AngularはCSSなコンポーネントは用意していません。なのでBootstrapやUIkitなどのCSSフレームワークを利用するとさくっとそれなりのUIが作れます。ただこうしたCSSフレームワークで定義されているイベント(JavaScriptで書かれた部分)との連携には一工夫必要です。カスタムディレクティブを作ればいいのですがAngular用のBootstrapもあるので利用すると良い。それがUI Bootstrapです。このエントリーは「AngularJS Advent Calendar 2015」12月9日の記事です。
Bootstrap
Bootstrapは今のバージョンではv3ですが、アルファ版でv4の開発も行われています。
UI Bootstrap for Angular1
提供されているコンポーネントはこちら：
- Accordion (ui.bootstrap.accordion)
- Alert (ui.bootstrap.alert)
- Buttons (ui.bootstrap.buttons)
- Carousel (ui.bootstrap.carousel)
- Collapse (ui.bootstrap.collapse)
- Datepicker (ui.bootstrap.datepicker)
- Dropdown (ui.bootstrap.dropdown)
- Modal (ui.bootstrap.modal)
- Pagination (ui.bootstrap.pagination)
- Popover (ui.bootstrap.popover)
- Progressbar (ui.bootstrap.progressbar)
- Rating (ui.bootstrap.rating)
- Tabs (ui.bootstrap.tabs)
- Timepicker (ui.bootstrap.timepicker)
- Tooltip (ui.bootstrap.tooltip)
- Typeahead (ui.bootstrap.typeahead)
UI Bootstrapのサイトにサンプルコードもデモもあるのでサイトを要チェック。
UI Bootstrap for Angular2
Angular2に対するUI Bootstrapはどうか？開発が少しずつですが進んでいるよう。ng-bootstrapという名前が付いてる。
デモは今のところこれ：
まるでBootstrapっぽくない（笑）。が、ディレクティブの作り方の参考にもなるので今から見ておく。 Bootstrap v4もAngular2もまだアルファ版だからこれからだね。
