【react-onsenui】ListItemとcheckBoxを組み合わせてネイティブさながらのUIを作る

react-onsenuiでネイティブのようなリストUIを作りたい時は、react-onsenuiの

ライブラリのListとListItemを使う必要があります。

使い方は以下のように視覚的にすぐわかるような構造になっています。

</pre>
<List>
<ListItem>
<label><Checkbox value={1} onChange={() => this.addOption(1)} />リンゴ</label>
</ListItem>
<ListItem>
<label><Checkbox value={2} onChange={() => this.addOption(2)} />バナナ</label>
</ListItem>
<ListItem>
<label><Checkbox value={3} onChange={() => this.addOption(3)} />メロン</label>
</ListItem>
</List>
<pre>

List>ListItem>Checkboxと入れ子構造になっており、これでビルドをすると

チェックボックスごとに区切られたような見た目になります。

cssはこんな感じ。

border: solidで枠を作ってよりネイティブっぽく仕上げることができます。

</pre>
#sample-page ons-list {
background-color: rgba(255, 255, 255, 0.7);
border: solid 1px #dbd8ce;
border-radius: 4px;
}
<pre>

少ないコストでここまできれいに仕上がるなんてonsenui半端ねーって感じです。