【OnsenUI】カードビュー実装

2022-01-11 未分類

グリッドと組み合わせることで見やすいUIを表現できるカードビューですが、Onsenuiでも

カードクラスを使うことで他のスタイルフレームワークと同じようにカードビューを

使うことが出来ます。

<div class="card">
  <div class="card__content">ここにテキストや画像を表示.</div>
</div>

各クラス「card」と「card-contents」がありますが、cardクラスはカードビュー周りの

プロパティを管理しており、card__contentクラスは中で表示されるコンテンツのプロパティを

管理できます。どちらも後から修正可能です。

OnsenUIのカードビューはとてもシンプルかつ修正が簡単なので、これからアプリを作ってカードを

使ったUIを実装したいという方にはおすすめです。