Framework7-カラーテーマ

説明

Framework7は、アプリケーションにさまざまな色のテーマを提供します。

カラーテーマは、以下の表に指定されているように、アプリケーションをスムーズに操作するために使用されるさまざまなタイプのテーマカラーを提供します。

S.No	テーマの種類と説明
1	iOSのテーマの色 アプリケーションには、10種類のデフォルトのiOSカラーテーマを使用できます。
2	マテリアルテーマの色 Framework7は、アプリケーションに22の異なるデフォルトのマテリアルカラーテーマを提供します。

カラーテーマの適用

Framework7では、theme- [color]クラスを親要素に使用することで、ページ、リストブロック、ナビゲーションバー、ボタン行などのさまざまな要素にカラーテーマを適用できます。

例

...
</body>

<div class = "page theme-gray">
   ...
</div>

<div class = "list-block theme-blue">
   ...
</div>

<div class = "navbar theme-green">
   ...
</div>

<div class = "buttons-row theme-red">
   ...
</div>

レイアウトテーマ

白と暗いの2つのテーマを使用して、アプリケーションのデフォルトのレイアウトテーマを使用できます。テーマは、layout- [theme]クラスを使用して親要素に適用できます。

例

...
</body>

<div class = "navbar layout-white">
   ...
</div>

<div class = "buttons-row layout-dark">
   ...
</div>

ヘルパークラス

Framework7は、以下に示すテーマの外部またはテーマなしで使用できる追加のヘルパークラスを提供します-

• color-[color] −ブロックのテキストの色やボタン、リンク、アイコンなどの色を変更するために使用できます。

• bg-[color] −ブロックまたは要素に事前定義された背景色を設定します。

• border-[color] −ブロックまたは要素に事前定義された境界線の色を設定します。