Elements Appearance API
Stripe Elements では、ビジュアルのカスタマイズが可能なため、appearance
オプションを使用してサイトのデザインに合わせて調整できます。Element の各レイアウトは変更できませんが、色、フォント、境界線、パディングなどを変更できます。
- テーマの選択から始める
自身の Web サイトに最も近い事前構築されたテーマを選択し、すぐに作業を開始できます。
- 変数を使用してテーマをカスタマイズする
fontFamily
や colorPrimary
などの変数を設定し、各 Element に表示されるコンポーネントを大まかにカスタマイズします。
- 必要に応じて、ルールを使用して個々のコンポーネントと状態を微調整する
完全にコントロールするには、 Element に表示される個々のコンポーネントにカスタムの CSS プロパティを指定します。
注
Elements Appearance API は、個別の決済手段の Element (CardElement
など) には対応していません。Element をカスタマイズするには、代わりに Style (スタイル) オブジェクトを使用してください。
テーマ
以下のいずれかのテーマを選択して Elements のカスタマイズを開始します。
stripe
night
flat
const appearance = { theme: 'night' }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});
変数
変数を設定し、各 Element に表示される多くのコンポーネントの外観を変更します。
variables
オプションは、CSS 変数のように機能します。各変数に CSS 値を指定して、var(--myVariable)
構文で他の変数を参照できます。ブラウザーで DOM エクスプローラーを使用し、結果の DOM を確認することもできます。
const appearance = { theme: 'stripe', variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Ideal Sans, system-ui, sans-serif', spacingUnit: '2px', borderRadius: '4px', // See all possible variables below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});
よく使用される変数
変数 | 説明 |
---|---|
fontFamily | Elements 全体で使用されるフォントファミリー。Elements は、Elements グループ に fonts オプションを渡すことで、カスタムフォントをサポートします。 |
fontSizeBase | Element のルートに設定されるフォントサイズ。デフォルトでは、fontSizeXs や fontSizeSm などの他のフォントサイズ変数は、rem 単位を使用してこの値から拡大縮小されます。 |
spacingUnit | 他のすべてのスペースの基準となるスペースの基本単位。この値を増やしたり減らしたりすることで、レイアウトのスペースを調整します。 |
borderRadius | Element 内のタブ、入力、その他のコンポーネントに使用される境界半径。 |
colorPrimary | Element 全体で使用される主要な色。これを、ブランドの主要カラーに設定してください。 |
colorBackground | Element 内の入力、タブ、その他のコンポーネントの背景に使用される色。 |
colorText | Element に使用される、デフォルトのテキストカラー。 |
colorDanger | Element でエラーや否定的なアクションを示すために使用される色。 |
一般に使用頻度の少ない変数
変数 | 説明 |
---|---|
fontSmooth | Element で使用するテキストのアンチエイリアス設定。always 、auto 、never のいずれかになります。 |
fontVariantLigatures | Element でのテキストの font-variant-ligatures設定。 |
fontVariationSettings | Element でのテキストの font-variation-settings設定。 |
fontWeightLight | ライトテキストで使用されるフォントの太さ。 |
fontWeightNormal | 標準のテキストで使用されるフォントの太さ。 |
fontWeightMedium | 中テキストで使用されるフォントの太さ。 |
fontWeightBold | 太字テキストで使用されるフォントの太さ。 |
fontLineHeight | Element でのテキストの line-height設定。 |
fontSizeXl | Element の特大テキストのフォントサイズ。デフォルトでは、これは、rem 単位を使用して var(--fontSizeBase) から拡大縮小されます。 |
fontSizeLg | Element の大テキストのフォントサイズ。デフォルトでは、これは、rem 単位を使用して var(--fontSizeBase) から拡大縮小されます。 |
fontSizeSm | Element の小テキストのフォントサイズ。デフォルトでは、これは、rem 単位を使用して var(--fontSizeBase) から拡大縮小されます。 |
fontSizeXs | Element の極小テキストのフォントサイズ。デフォルトでは、これは、rem 単位を使用して var(--fontSizeBase) から拡大縮小されます。 |
fontSize2Xs | Element の極極小テキストのフォントサイズ。デフォルトでは、これは、rem 単位を使用して var(--fontSizeBase) から拡大縮小されます。 |
fontSize3Xs | Element の極極極小テキストのフォントサイズ。デフォルトでは、これは、rem 単位を使用して var(--fontSizeBase) から拡大縮小されます。 |
logoColor | どちらのロゴのバージョンを表示するかを決める設定。これは light または dark です。 |
tabLogoColor | .Tab コンポーネント内で、light または dark のどちらのバージョンのロゴを表示するか。 |
tabLogoSelectedColor | .Tab--selected コンポーネント内で、light または dark のどちらのバージョンのロゴを表示するか。 |
blockLogoColor | .Block コンポーネント内で、light または dark のどちらのバージョンのロゴを表示するか。 |
colorSuccess | Element でポジティブなアクションや成功を示すために使用される色。 |
colorWarning | Element で否定的な可能性のあるアクションを示すために使用される色。 |
accessibleColorOnColorPrimary | var(--colorPrimary) 背景の上に表示されるテキストの色。 |
accessibleColorOnColorBackground | var(--colorBackground) 背景の上に表示されるテキストの色。 |
accessibleColorOnColorSuccess | var(--colorSuccess) 背景の上に表示されるテキストの色。 |
accessibleColorOnColorDanger | var(--colorDanger) 背景の上に表示されるテキストの色。 |
accessibleColorOnColorWarning | var(--colorWarning) 背景の上に表示されるテキストの色。 |
colorTextSecondary | 二次的な重要性を持つテキストに使用される色。たとえば、この色は、現在選択されていないタブのラベルに使用されます。 |
colorTextPlaceholder | Element 内の入力のプレースホルダーテキストに使用される色。 |
iconColor | カードタブに表示されるアイコンなど、Element 内のアイコンに使用されるデフォルトの色。 |
iconHoverColor | マウスのカーソルを合わせたときのアイコンの色。 |
iconCardErrorColor | エラー状態の場合の、カードアイコンの色。 |
iconCardCvcColor | カードアイコンのセキュリティコードバリアントの色。 |
iconCardCvcErrorColor | セキュリティコードフィールドの入力が無効な場合の、カードアイコンのセキュリティコードバリアントの色。 |
iconCheckmarkColor | .Checkbox などのコンポーネント内で表示されるチェックマークの色。 |
iconChevronDownColor | 一部の入力で表示される矢印アイコンの色。 |
iconChevronDownHoverColor | マウスのカーソルを合わせたときの矢印アイコンの色。 |
iconCloseColor | 閉じる操作を示すために使用する、閉じるアイコンの色。 |
iconCloseHoverColor | マウスのカーソルを合わせたときの閉じるアイコンの色。 |
iconLoadingIndicatorColor | 読み込みインジケーターのスピナーの色。 |
iconMenuColor | 一連の追加アクションを示すメニューアイコンの色。 |
iconMenuHoverColor | マウスのカーソルを合わせたときのメニューアイコンの色。 |
iconMenuOpenColor | 開いたときのメニューアイコンの色。 |
iconPasscodeDeviceColor | ユーザーのモバイルデバイスにメッセージが送信されたことを示す、パスコードデバイスアイコンの色。 |
iconPasscodeDeviceHoverColor | マウスのカーソルを合わせたときのパスコードデバイスアイコンの色。 |
iconPasscodeDeviceNotificationColor | パスコードデバイスアイコンの上に表示される通知インジケーターの色。 |
iconRedirectColor | リダイレクトベースの支払い方法に表示される、リダイレクトアイコンの色。 |
tabIconColor | タブに表示されるアイコンの色。 |
tabIconHoverColor | タブ上にマウスのカーソルを合わせたときに、タブに表示されるアイコンの色。 |
tabIconSelectedColor | タブが選択されたときの、タブに表示されるアイコンの色。 |
tabIconMoreColor | 追加支払い方法メニューのトリガーに表示されるアイコンの色。 |
tabIconMoreHoverColor | マウスのカーソルをトリガーの上に合わせたときに、追加支払い方法メニューのトリガーに表示されるアイコンの色。 |
accordionItemSpacing | .AccordionItem コンポーネント間の縦方向のスペース。これは、spacedAccordionItems が true の場合にのみ該当します。 |
gridColumnSpacing | Element レイアウトに使用される、グリッド内の列間のスペース。 |
gridRowSpacing | Element レイアウトに使用される、グリッド内の行間のスペース。 |
pickerItemSpacing | .Picker コンポーネント内にレンダリングされる .PickerItem コンポーネント間の間隔。 |
tabSpacing | .Tab コンポーネントの左右の間隔。 |
ルール
rules
オプションは、CSS に類似するセレクターと CSS プロパティのマッピングであり、個々のコンポーネントをきめ細かくカスタマイズできます。theme
および variables
を定義した後で、rules
を使用して Elements をサイトのデザインに合わせてシームレスに組み込みます。
const appearance = { rules: { '.Tab': { border: '1px solid #E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02)', }, '.Tab:hover': { color: 'var(--colorText)', }, '.Tab--selected': { borderColor: '#E0E6EB', boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(18, 42, 66, 0.02), 0 0 0 2px var(--colorPrimary)', }, '.Input--invalid': { boxShadow: '0 1px 1px 0 rgba(0, 0, 0, 0.07), 0 0 0 2px var(--colorDanger)', }, // See all supported class names and selector syntax below } }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});
すべてのルール
ルールのセレクターは、Element 内の公開クラス名、各クラスのサポートされる状態、疑似クラス、疑似要素のいずれも対象にできます。有効なセレクターの例を以下に示します。
.Tab, .Label, .Input
.Tab:focus
.Input--invalid, .Label--invalid
.Input::placeholder
以下はセレクターとして有効ではありません。
.p-SomePrivateClass, img
、公開クラス名のみをターゲットにすることができます.Tab .TabLabel
、セレクター内で親子関係はサポートされません.Tab--invalid
、.Tab
クラスは--invalid
状態をサポートしません
セレクターで使用される各クラス名は CSS プロパティの許可リストをサポートします。これは、キャメルケース (たとえば、box-shadow プロパティを boxShadow
とする) を使用して指定します。
次は、サポートされているクラス名と、対応する状態、疑似クラス、疑似要素の一覧です。
タブ
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.Tab | --selected | :hover 、:focus 、:active 、:disabled | |
.TabIcon | --selected | :hover 、:focus 、:active 、:disabled | |
.TabLabel | --selected | :hover 、:focus 、:active 、:disabled |
フォーム入力: 上配置ラベル
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.Label | --empty 、--invalid | ||
.Input | --empty 、--invalid | :hover 、:focus 、:disabled 、:autofill | ::placeholder 、::selection |
.Error |
フォーム入力: 浮動ラベル
注
浮動ラベルは、その他の設定オプションとして有効にできます。
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.Label | --empty 、--invalid 、--floating 、--resting | ||
.Input | --empty 、--invalid | :hover 、:focus 、:disabled 、:autofill | ::placeholder 、::selection |
.Error |
ブロック
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.Block | |||
.BlockDivider | |||
.BlockAction | --negative | :hover 、:focus 、:active |
コード入力
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.CodeInput | :hover 、:focus 、:disabled |
チェックボックス
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.Checkbox | --checked | ||
.CheckboxLabel | --checked | :hover 、:focus 、:focus-visible | |
.CheckboxInput | --checked | :hover 、:focus 、:focus-visible |
ドロップダウン
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.Dropdown | |||
.DropdownItem | --highlight | :active |
切り替える
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.Switch | --active | :hover | |
.SwitchControl | :hover |
ピッカー
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.PickerItem | --selected 、--highlight 、--new 、--disabled | :hover 、:focus 、:active | |
.PickerAction | :hover 、:focus 、:active |
ユーザー体験のヒント
他の状態と比較して .PickerItem
アクティブ状態が目立つようにしてください。
推奨 目立つコントラストの効いた色、太さ、および/またはアウトラインを使用し、顧客がすでに選択したアクティブな状態を区別します。 | すべきでないこと .PickerItem の状態に 2 つの同じ太さのフォントオプションやコントラストの低い色を使用しないでください。どちらがアクティブかを見分けるのが難しくなります。 |
メニュー
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.Menu | |||
.MenuIcon | --open | :hover | |
.MenuAction | --negative | :hover 、:focus 、:active |
アコーディオン
クラス名 | 状態 | 疑似クラス | 疑似要素 |
---|---|---|---|
.AccordionItem | --selected | :hover 、:focus-visible |
サポートされている CSS プロパティ
CSS プロパティ | サポートされているクラス |
---|---|
-moz-osx-font-smoothing | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
-webkit-font-smoothing | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
-webkit-text-fill-color | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
backgroundColor | AccordionItem 、Action 、Block 、BlockAction 、BlockDivider 、Button 、CheckboxInput 、CodeInput 、DropdownItem 、Error 、Input 、InputDivider 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、Switch 、Tab |
border | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderBottom | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderBottomColor | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderBottomLeftRadius | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderBottomRightRadius | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderBottomStyle | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderBottomWidth | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderColor | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderLeft | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderLeftColor | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderLeftStyle | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderLeftWidth | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderRadius | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、InputCloseIcon 、Link 、MenuAction 、MenuIcon 、PasscodeCloseIcon 、PasscodeShowIcon 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Switch 、SwitchControl 、Tab 、TermsLink 、TermsText 、Text |
borderRight | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderRightColor | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderRightStyle | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderRightWidth | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderStyle | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderTop | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderTopColor | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderTopLeftRadius | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderTopRightRadius | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderTopStyle | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderTopWidth | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
borderWidth | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Switch 、SwitchControl 、Tab 、TermsText 、Text |
boxShadow | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、InputCloseIcon 、Link 、MenuAction 、MenuIcon 、PasscodeCloseIcon 、PasscodeShowIcon 、PickerAction 、PickerItem 、SecondaryLink 、Switch 、SwitchControl 、Tab 、TermsLink |
color | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabIcon 、TabLabel 、TermsLink 、TermsText 、Text |
fill | Action 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、SwitchControl 、Tab 、TabIcon |
fontFamily | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
fontSize | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Switch 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
fontVariant | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
fontWeight | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
letterSpacing | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
lineHeight | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
margin | Action 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、MenuAction 、PickerAction 、PickerItem 、Tab |
marginBottom | Action 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、MenuAction 、PickerAction 、PickerItem 、Tab |
marginLeft | Action 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、MenuAction 、PickerAction 、PickerItem 、Tab |
marginRight | Action 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、MenuAction 、PickerAction 、PickerItem 、Tab |
marginTop | Action 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、MenuAction 、PickerAction 、PickerItem 、Tab |
opacity | Label |
outline | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、InputCloseIcon 、Link 、MenuAction 、MenuIcon 、PasscodeCloseIcon 、PasscodeShowIcon 、PickerAction 、PickerItem 、SecondaryLink 、Switch 、SwitchControl 、Tab 、TermsLink |
outlineOffset | AccordionItem 、Action 、Block 、BlockAction 、Button 、CheckboxInput 、CodeInput 、Dropdown 、DropdownItem 、Error 、Input 、InputCloseIcon 、Link 、MenuAction 、MenuIcon 、PasscodeCloseIcon 、PasscodeShowIcon 、PickerAction 、PickerItem 、SecondaryLink 、Switch 、SwitchControl 、Tab 、TermsLink |
padding | AccordionItem 、Action 、Block 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Menu 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Tab 、TabIcon 、TabLabel 、TermsText 、Text |
paddingBottom | AccordionItem 、Action 、Block 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Menu 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Tab 、TabIcon 、TabLabel 、TermsText 、Text |
paddingLeft | AccordionItem 、Action 、Block 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Menu 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Tab 、TabIcon 、TabLabel 、TermsText 、Text |
paddingRight | AccordionItem 、Action 、Block 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Menu 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Tab 、TabIcon 、TabLabel 、TermsText 、Text |
paddingTop | AccordionItem 、Action 、Block 、BlockAction 、Button 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Menu 、MenuAction 、MenuIcon 、PickerAction 、PickerItem 、RedirectText 、Tab 、TabIcon 、TabLabel 、TermsText 、Text |
textDecoration | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
textShadow | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
textTransform | AccordionItem 、Action 、BlockAction 、Button 、Checkbox 、CheckboxLabel 、CodeInput 、DropdownItem 、Error 、Input 、Label 、Link 、MenuAction 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Tab 、TabLabel 、TermsLink 、TermsText 、Text |
transition | Action 、Block 、BlockAction 、Button 、CheckboxInput 、CheckboxLabel 、CodeInput 、Dropdown 、DropdownItem 、Error 、Icon 、Input 、InputCloseIcon 、Label 、Link 、MenuAction 、MenuIcon 、PasscodeCloseIcon 、PasscodeShowIcon 、PickerAction 、PickerItem 、RedirectText 、SecondaryLink 、Switch 、SwitchControl 、Tab 、TabIcon 、TabLabel 、TermsLink 、TermsText 、Text |
上記のプロパティにはいくつかの例外があります。
-webkit-text-fill-color
は疑似クラスと互換性がありません
その他の設定オプション
themes
、variables
、rules
以外にも Elements のスタイルを設定するデザイン設定オプションを用意しています。
これらは、Appearance オブジェクトに追加することでカスタマイズできます。
const appearance = { labels: 'floating', // other configurations such as `theme`, `variables` and `rules`... }
現在、使用可能なオプションは以下のとおりです。
設定 | 説明 |
---|---|
labels | フォームフィールドの上に配置されたラベルとフォームフィールド内のフローティングラベルの切り替えを行えるようにします。above または floating を設定できます |