Elements Appearance API
Stripe Elements unterstützt eine visuelle Anpassung, wodurch Sie das Design Ihrer Website mit der Option appearance
verändern können. Das Layout der einzelnen Elemente bleibt gleich, aber Sie können Farben, Schriftarten, Rahmen, Füllzeichen und vieles mehr ändern.
- Beginnen Sie mit der Wahl eines Designs
Wählen Sie ein vorgefertigtes Design, das zu Ihrer Website passt, und legen Sie direkt los.
- Passen Sie das Design mithilfe von Variablen an
Legen Sie Variablen wie fontFamily
und colorPrimary
fest, um in jedem Element auftretende Komponenten umfassend anzupassen.
- Bei Bedarf können Sie einzelne Komponenten und Status mithilfe von Regeln weiter anpassen
Für vollständige Kontrolle geben Sie nutzerdefinierte CSS-Eigenschaften für einzelne Komponenten an, die in dem Element auftreten.
Notiz
Die Elements Appearance API unterstützt keine individuellen Zahlungsmethoden-Elemente (z. B. CardElement
). Verwenden Sie stattdessen das Objekt Style, um Ihr Element anzupassen.
Designs
Beginnen Sie mit der Anpassung von Elements, indem Sie eins der folgenden Designs auswählen:
stripe
night
flat
const appearance = { theme: 'night' }; // Pass the appearance object to the Elements instance const elements = stripe.elements({clientSecret, appearance});
Variablen
Legen Sie Variablen fest, um die Darstellung von Komponenten anzupassen, die in jedem Element auftreten.
Die Option variables
funktioniert wie CSS-Variablen. Sie können mit der Syntax var(--myVariable)
den CSS-Wert für jede Variable angeben und auf andere Variablen verweisen. Sie können sogar das daraus resultierende DOM-Element mit dem DOM-Explorer Ihres Browsers überprüfen.
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});
Häufig genutzte Variablen
Variable | Beschreibung |
---|---|
fontFamily | Die Schriftfamilie, die überall in Elements verwendet wird. Elements unterstützt nutzerdefinierte Schriftarten, indem die Option fonts an die Elements-Gruppe übergeben wird. |
fontSizeBase | Die für das Stammverzeichnis des Elements verwendete Schriftgröße. Standardmäßig werden andere Schriftgrößenvariablen wie fontSizeXs oder fontSizeSm von diesem Wert skaliert, indem rem -Einheiten verwendet werden. |
spacingUnit | Die Basis-Abstandseinheit, von der alle anderen Abstände abgeleitet werden. Erhöhen oder verringern Sie diesen Wert, um Ihrem Layout mehr oder weniger Platz zu geben. |
borderRadius | Der Rahmenradius, der für Registerkarten, Eingaben und andere Komponenten im Element verwendet wird. |
colorPrimary | Eine Primärfarbe, die im gesamten Element verwendet wird. Legen Sie diese Farbe als Ihre primäre Markenfarbe fest. |
colorBackground | Die Farbe, die für den Hintergrund von Eingaben, Registerkarten und anderen Komponenten im Element verwendet wird. |
colorText | Die Standard-Textfarbe, die im Element verwendet wird. |
colorDanger | Eine Farbe, die zur Anzeige von Fehlern oder schädlichen Aktionen im Element verwendet wird. |
Weniger häufig genutzte Variablen
Variable | Beschreibung |
---|---|
fontSmooth | Welche Text-Antialiasing-Einstellungen im Element verwendet werden sollen. Kann always , auto oder never sein. |
fontVariantLigatures | Die Einstellung font-variant-ligatures von Text im Element. |
fontVariationSettings | Die Einstellung font-variation-settings von Text im Element. |
fontWeightLight | Die für dünnen Text verwendete Schriftstärke. |
fontWeightNormal | Die für normalen Text verwendete Schriftstärke. |
fontWeightMedium | Die für halbfetten Text verwendete Schriftstärke. |
fontWeightBold | Die für fetten Text verwendete Schriftstärke. |
fontLineHeight | Die Einstellung line-height von Text im Element. |
fontSizeXl | Die Schriftgröße von extra großem Text im Element. Wird standardmäßig von var(--fontSizeBase) mit rem -Einheiten skaliert. |
fontSizeLg | Die Schriftgröße von großem Text im Element. Wird standardmäßig von var(--fontSizeBase) mit rem -Einheiten skaliert. |
fontSizeSm | Die Schriftgröße von kleinem Text im Element. Wird standardmäßig von var(--fontSizeBase) mit rem -Einheiten skaliert. |
fontSizeXs | Die Schriftgröße von extra kleinem Text im Element. Wird standardmäßig von var(--fontSizeBase) mit rem -Einheiten skaliert. |
fontSize2Xs | Die Schriftgröße von zweifach extra kleinem Text im Element. Wird standardmäßig von var(--fontSizeBase) mit rem -Einheiten skaliert. |
fontSize3Xs | Die Schriftgröße von dreifach extra kleinem Text im Element. Wird standardmäßig von var(--fontSizeBase) mit rem -Einheiten skaliert. |
logoColor | Eine Präferenz für die Logo-Varianten, die angezeigt werden sollen; entweder light oder dark . |
tabLogoColor | Die Logovariante, die innerhalb der .Tab -Komponenten angezeigt werden soll (entweder light oder dark ). |
tabLogoSelectedColor | Die Logovariante, die innerhalb der .Tab--selected -Komponente angezeigt werden soll (entweder light oder dark ). |
blockLogoColor | Die Logovariante, die innerhalb der .Block -Komponenten angezeigt werden soll (entweder light oder dark ). |
colorSuccess | Eine Farbe, die zur Anzeige positiver Aktionen oder erfolgreicher Ergebnisse im Element verwendet wird. |
colorWarning | Eine Farbe, die für die Anzeige potenziell schädlicher Aktionen im Element verwendet wird. |
accessibleColorOnColorPrimary | Die Farbe von Text, der auf einem Hintergrund von var(--colorPrimary) erscheint. |
accessibleColorOnColorBackground | Die Farbe von Text, der auf einem Hintergrund von var(--colorBackground) erscheint. |
accessibleColorOnColorSuccess | Die Farbe von Text, der auf einem Hintergrund von var(--colorSuccess) erscheint. |
accessibleColorOnColorDanger | Die Farbe von Text, der über jedem var(--colorDanger) Hintergrund erscheint. |
accessibleColorOnColorWarning | Die Farbe von Text, der auf einem Hintergrund von var(--colorWarning) erscheint. |
colorTextSecondary | Die Farbe, die für Text von sekundärer Bedeutung verwendet wird. Diese Farbe wird z. B. für den Titel einer Registerkarte verwendet, die aktuell nicht ausgewählt ist. |
colorTextPlaceholder | Die Farbe, die für Eingabe-Platzhaltertext im Element verwendet wird. |
iconColor | Die Standardfarbe, die für Symbole im Element verwendet wird (z. B. das Symbol auf der Registerkarte „Karte“). |
iconHoverColor | Die Farbe der Symbole, wenn der Mauszeiger darüber bewegt wird. |
iconCardErrorColor | Die Farbe des Kartensymbols, wenn es sich in einem Fehlerzustand befindet. |
iconCardCvcColor | Die Farbe der CVC-Variante des Kartensymbols. |
iconCardCvcErrorColor | Die Farbe der CVC-Variante des Kartensymbols, wenn das CVC-Feld ungültige Eingaben enthält. |
iconCheckmarkColor | Die Farbe von Häkchen, die in Komponenten wie .Checkbox angezeigt werden. |
iconChevronDownColor | Die Farbe der Pfeilsymbole, die in ausgewählten Eingaben angezeigt werden. |
iconChevronDownHoverColor | Die Farbe der Pfeilsymbole, wenn der Mauszeiger darüber bewegt wird. |
iconCloseColor | Die Farbe von Schließsymbolen, die zur Anzeige einer Kündigungs- oder Schließungsaktion verwendet werden. |
iconCloseHoverColor | Die Farbe von Schließsymbolen, wenn der Mauszeiger darüber bewegt wird. |
iconLoadingIndicatorColor | Die Farbe der Sanduhr in den Ladeindikatoren. |
iconMenuColor | Die Farbe von Menüsymbolen, die verwendet werden, um eine Reihe zusätzlicher Aktionen anzuzeigen. |
iconMenuHoverColor | Die Farbe der Menüsymbole, wenn der Mauszeiger darüber bewegt wird. |
iconMenuOpenColor | Die Farbe der geöffneten Menüsymbole. |
iconPasscodeDeviceColor | Farbe des Passcode-Gerätesymbols, das anzeigt, dass eine Nachricht an das Mobilgerät des Nutzers/der Nutzerin gesendet wurde. |
iconPasscodeDeviceHoverColor | Die Farbe des Passcode-Gerätesymbols, wenn der Mauszeiger darüber bewegt wird. |
iconPasscodeDeviceNotificationColor | Die Farbe der Benachrichtigungsanzeige, die über dem Codegerätesymbol angezeigt wird. |
iconRedirectColor | Die Farbe des Weiterleitungssymbols, das für Zahlungsmethoden mit Weiterleitung erscheint. |
tabIconColor | Die Farbe der Symbole, die auf einer Registerkarte erscheinen. |
tabIconHoverColor | Die Farbe der Symbole, die auf einer Registerkarte erscheinen, wenn der Mauszeiger über die Registerkarte bewegt wird. |
tabIconSelectedColor | Die Farbe der Symbole, die auf einer Registerkarte erscheinen, wenn die Registerkarte ausgewählt wird. |
tabIconMoreColor | Die Farbe des Symbols, das im Trigger für das Menü der zusätzlichen Zahlungsmethoden erscheint. |
tabIconMoreHoverColor | Die Farbe des Symbols, das im Trigger für das Menü der zusätzlichen Zahlungsmethoden erscheint, wenn der Mauszeiger über den Trigger bewegt wird. |
accordionItemSpacing | Der vertikale Abstand zwischen .AccordionItem -Komponenten. Dies gilt nur, wenn spacedAccordionItems true ist. |
gridColumnSpacing | Der Abstand zwischen den Spalten im Raster für das Layout des Elements. |
gridRowSpacing | Der Abstand zwischen den Zeilen im Raster für das Layout des Elements. |
pickerItemSpacing | Der Abstand zwischen den .PickerItem -Komponenten, gerendert innerhalb der .Picker -Komponente. |
tabSpacing | Der horizontale Abstand zwischen den .Tab -Komponenten. |
Regeln
Die Option rules
ist eine Zuordnung von CSS-ähnlichen Selektoren zu CSS-Eigenschaften, die eine detaillierte Anpassung einzelner Komponenten ermöglicht. Nachdem Sie Ihr theme
und Ihre variables
definiert haben, integrieren Sie Elements mithilfe von rules
nahtlos in das Design Ihrer Website.
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});
Alle Regeln
Der Selektor kann jeden der öffentlichen Klassennamen im Element zum Ziel haben, ebenso wie die unterstützten Status, Pseudo-Klassen und Pseudo-Elemente für jede Klasse. Die folgenden Selektoren sind beispielsweise gültig:
.Tab, .Label, .Input
.Tab:focus
.Input--invalid, .Label--invalid
.Input::placeholder
Die folgenden Selektoren sind nicht gültig:
.p-SomePrivateClass, img
, nur öffentliche Klassennamen können das Ziel sein.Tab .TabLabel
, Vorgänger-Nachfolger-Beziehungen in Selektoren werden nicht unterstützt.Tab--invalid
, die Klasse.Tab
unterstützt den Status--invalid
nicht
Jeder in einem Selektor verwendete Klassenname unterstützt eine Liste zulässiger CSS-Eigenschaften, die in Camel-Case-Schreibweise angegeben werden (z. B. boxShadow
für die Eigenschaft box-shadow).
Nachfolgend finden Sie eine vollständige Liste aller unterstützten Klassennamen und entsprechenden Status, Pseudo-Klassen und Pseudo-Elemente:
Registerkarten
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.Tab | --selected | :hover , :focus , :active , :disabled | |
.TabIcon | --selected | :hover , :focus , :active , :disabled | |
.TabLabel | --selected | :hover , :focus , :active , :disabled |
Formulareingaben – Labels, die oberhalb angezeigt werden
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.Label | --empty , --invalid | ||
.Input | --empty , --invalid | :hover , :focus , :disabled , :autofill | ::placeholder , ::selection |
.Error |
Formulareingaben – Labels, die ihre Position dem Textfluss anpassen
Notiz
Labels, die ihre Position dem Textfluss anpassen, können als zusätzliche Konfigurationsoption aktiviert werden.
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.Label | --empty , --invalid , --floating , --resting | ||
.Input | --empty , --invalid | :hover , :focus , :disabled , :autofill | ::placeholder , ::selection |
.Error |
Block
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.Block | |||
.BlockDivider | |||
.BlockAction | --negative | :hover , :focus , :active |
Codeeingabe
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.CodeInput | :hover , :focus , :disabled |
Kontrollkästchen
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.Checkbox | --checked | ||
.CheckboxLabel | --checked | :hover , :focus , :focus-visible | |
.CheckboxInput | --checked | :hover , :focus , :focus-visible |
Dropdown
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.Dropdown | |||
.DropdownItem | --highlight | :active |
Umschalter
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.Switch | --active | :hover | |
.SwitchControl | :hover |
Auswahl
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.PickerItem | --selected , --highlight , --new , --disabled | :hover , :focus , :active | |
.PickerAction | :hover , :focus , :active |
Tipp für die Nutzererfahrung
Stellen Sie sicher, dass Ihr aktiver .PickerItem
-Status sich von den anderen Status unterscheidet.
RICHTIG Verwenden Sie zur Unterscheidung des aktiven Status, den Ihre Kundin/Ihr Kunde bereits ausgewählt hat, eine auffällige, kontrastreiche Grundfarbe, eine Gewichtung und/oder einen Umriss. | NEIN Verwenden Sie für Ihre .PickerItem-Status keine zwei gleich gewichteten Optionen oder kontrastarmen Farben. Das erschwert die Unterscheidung, welcher Status aktiv ist. |
Menü
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.Menu | |||
.MenuIcon | --open | :hover | |
.MenuAction | --negative | :hover , :focus , :active |
Accordion
Klassenname | Zustände | Pseudo-Klassen | Pseudo-Elemente |
---|---|---|---|
.AccordionItem | --selected | :hover , :focus-visible |
Unterstützte CSS-Eigenschaften
CSS-Eigenschaft | Unterstützte Klassen |
---|---|
-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 |
Einige Ausnahmen zu den obigen Eigenschaften sind:
-webkit-text-fill-color
ist nicht kompatibel mit Pseudo-Klassen
Weitere Konfigurationsoptionen
Neben themes
, variables
und rules
haben wir weitere Konfigurationsoptionen für das Erscheinungsbild von Elements bereitgestellt.
Sie können die Optionen anpassen, indem Sie sie dem Appearance-Objekt hinzufügen:
const appearance = { labels: 'floating', // other configurations such as `theme`, `variables` and `rules`... }
Aktuell unterstützen wir folgende Optionen:
Konfiguration | Beschreibung |
---|---|
labels | Ermöglicht den Wechsel zwischen Labels oberhalb von Formularfeldern und Labels, die innerhalb von Formularfeldern ihre Position dem Textfluss anpassen; kann entweder above oder floating sein |