ng-bootstrapを使用したAngularアプリでのブートストラップの使用
ng-bootstrap は、最新バージョンのBootstrap(この記事の執筆時点では、 v4.0.0 alpha 6 )をラップするコンポーネントとディレクティブのセットです。 これにより、AngularアプリでBootstrapを簡単に使用できるようになります。
ng-bootstrapを使用するには、 Angular4+が必要です。
ng-bootstrap は、使用可能なBootstrapのCSSに依存しますが、BootstrapJSまたはjQueryの依存関係は必要ありません。
必要なものをすべてプロジェクトにインストールし、FontAwesomeをミックスに追加しましょう。
$ npm install --save @ng-bootstrap/ng-bootstrap [email protected] font-awesome
または、ヤーンを使用したい場合:
$ yarn add @ng-bootstrap/ng-bootstrap [email protected] font-awesome
AngularアプリがAngularCLIプロジェクトであると仮定して、.angular-cli.jsonファイルのstyles配列に以下を追加するだけです。
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css"
これにより、BootstrapとFontAwesomeのCSS依存関係が追加されます。 この時点で開発サーバーを再起動する必要がある場合があることに注意してください。
デモ
ng-bootstrapで使用できるカスタムコンポーネントとディレクティブの一部を示す例を次に示します。
<div class="jumbotron">
<div class="container">
<ngb-alert type="success" [dismissible]="false">
Bootstrap is working!
</ngb-alert>
<h1>
<i class="fa fa-bath" aria-hidden="true"></i>
And so is Font Awesome!
</h1>
</div>
</div>
<div class="container">
<p>
A progress bar:
<ngb-progressbar showValue="true" type="success" [value]="65">
</ngb-progressbar>
</p>
</div>
<div class="container">
<ngb-tabset>
<ngb-tab title="Bacon">
<ng-template ngbTabContent>
<p class="mt-4">Content for tab 1.
<button type="button"
class="btn btn-secondary"
placement="bottom"
ngbPopover="A popover in tab 1"
popoverTitle="Bacon is good">
Click me
</button>
</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Lettuce">
<ng-template ngbTabContent>
<p>Content for tab 2</p>
</ng-template>
</ngb-tab>
<ngb-tab title="Tomatoes">
<ng-template ngbTabContent>
<p>Content for tab 3</p>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
ngb-alert 、 ngb-progressbar 、およびngb-tabsetコンポーネントの使用に注意してください。
結果は次のとおりです。
コンポーネント
使用可能なコンポーネントの構文については、公式のng-bootstrapドキュメントを参照してください。