色のプロパティ

Color Properties

すべてのFramework7-Vueコンポーネントは、別々の要素の色やカラーテーマを設定することができる同じカラープロパティのセットをサポートしています。

Prop	Type	Default	Description
color	string		単一の要素の色。デフォルトカラーの1つ。
color-theme	string		要素にカラー・テーマを適用します。これは、ビュー、ページ、ナビバー、ツールバー、リストなど、サポートされているすべての子要素に視覚的な影響を与えるため、何らかの親要素である必要があります。デフォルトカラーの一つです。
text-color	string		要素のテキストカラーを設定します。デフォルトの色の一つです。
bg-color	string		要素の背景色を設定します。既定の色のうちの一つです。
border-theme	string		要素の境界線の色を設定する。既定の色のうちの一つ。
ripple-color	string		要素の波紋の色を設定する。既定の色のうちの一つです。
theme-dark	boolean	false	要素のダークレイアウトテーマを有効にします。これは、ビュー、ページ、ナビバー、ツールバー、リストなど、サポートされているすべての子要素に視覚的な影響を与えるので、親要素である必要があります。

例：

<!-- ボタンの色 -->
<f7-button color="red">Red Button</f7-button>

<!-- リンクの色 -->
<f7-link color="green">Green Link</f7-link>

<!-- ページのカラーテーマ -->
<f7-page color-theme="orange">
  ...
</f7-page>

<!-- ダークテーマのパネル -->
<f7-panel theme-dark>
  ...
</f7-panel>

サポートされている色

red	#ff3b30
green	#4cd964
blue	#2196f3
pink	#ff2d55
yellow	#ffcc00
orange	#ff9500
purple	#9c27b0
deeppurple	#673ab7
lightblue	#5ac8fa
teal	#009688
lime	#cddc39
deeporange	#ff6b22
gray	#8e8e93
white	#ffffff
black	#000000