概要
前回に引き続き、OnsenUI for Reactの基本コンポーネントについて解説していきます。
<Page>内で利用できる<Row>コンポーネントと<Col>コンポーネントについて解説します。
<Row>と<Col>はGridというコンポーネント群にまとめられています。
Component
Row Component
各ページの「行」を表現するコンポーネントです。
BootstrapやMaterialize.cssなどを利用した事がある人なら馴染みのあるコンポーネントだと思います。
使い方は非常に簡単で、<Row>を記述し、その子要素が１行になります。
大抵の場合、<Row>と<Col>はセットで利用します。
Props
| Props | Description |
|---|---|
| verticalAlign | 行の垂直状態を指定する。(bottom, top, center) |
Col Component
次はColコンポーネントです。
このコンポーネントは、<Row>コンポーネントの子要素として利用し、<Row>の列の状態を表現します。
Bootstrapなどでは、classとして、[col-sm-3]とか[col-md-4]とか指定しますが、OnsenUIではColの分だけいい感じにRowの列を分割してくれます。
Rowを指定して分割したい場合は、width Propsでwidthを指定する事も可能です。
Props
| Props | Description |
|---|---|
| verticalAlign | 列の垂直状態を指定する。(bottom, top, center) |
| width | 列の幅をしていします。(50%や50などで表現) |
終わり
Gridシステムを利用した各種CSSフレームワークを利用した事がある方なら簡単に使えると思います。
中身まで見ると、Gridはflexを利用して行や列を表現していました。
自分でアプリを作る時には、必須なコンポーネントだと思うので、どんどん使いましょう。
続きは次回。