カラーのプロパティ

Color Properties

すべてのFramework7 Svelteコンポーネントは、同じカラープロパティのセットをサポートしており、個別のエレメントカラーやカラーテーマを設定することができます。

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

例：

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

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

<!-- ページのカラーテーマ -->
<Page colorTheme="orange">
  ...
</Page>

<!-- ダークテーマのパネル -->
<Panel themeDark>
  ...
</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