Framework7-color-themes

Framework7-カラーテーマ

説明

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

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

S.No	Theme Type & Description
1	iOS Theme Colors アプリケーションには、10種類のデフォルトのiOSカラーテーマを使用できます。
2	Material Theme Colors 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つのテーマ_white_と_dark_を使用して、アプリケーションにデフォルトのレイアウトテーマを使用できます。 テーマは、_layout- [theme] _クラスを使用して親要素に適用できます。

例

   ...
</body>

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

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

ヘルパークラス

Framework7は追加のヘルパークラスを提供します。これは、以下にリストされているように、テーマの外で、またはテーマなしで使用できます-

• color- [color] -ブロックのテキスト色またはボタン、リンク、アイコンなどの色を変更するために使用できます。
• bg- [color] -ブロックまたは要素に事前定義された背景色を設定します。
• border- [color] -ブロックまたは要素に事前定義された境界線の色を設定します。