Weiter zum Inhalt
Konto erstellen
oder
anmelden
Das Logo der Stripe-Dokumentation
/
KI fragen
Konto erstellen
Anmelden
Jetzt starten
Zahlungen
Umsatz
Plattformen und Marktplätze
Geldmanagement
Entwickler-Tools
Übersicht
Informationen zu Stripe Payments
Aktualisieren Sie Ihre Integration
Zahlungsanalysefunktionen
Online-Zahlungen
ÜbersichtIhren Use case findenZahlungen verwalten
Payment Links verwenden
Bezahlseite erstellen
Erweiterte Integration erstellen
    Übersicht
    Quickstart
    Erweiterte Integration entwerfen
    Erscheinungsbild anpassen
    Zahlungsmethoden verwalten
    Zusätzliche Informationen erfassen
    Steuern auf Ihre Zahlungen einziehen
    Die für eine Zahlung verwendete Zahlungsmethode speichern
    Zahlungsmethode speichern, ohne eine Zahlung zu tätigen
    Belege und bezahlte Rechnungen senden
In-App-Integration erstellen
Zahlungsmethoden
Zahlungsmethoden hinzufügen
Zahlungsmethoden verwalten
Schnellerer Bezahlvorgang mit Link
Zahlungsschnittstellen
Payment Links
Checkout
Web Elements
In-App-Elements
Zahlungsszenarien
Nutzerdefinierte Zahlungsabläufe
Flexibles Acquiring
Orchestrierung
Präsenzzahlungen
Terminal
Andere Stripe-Produkte
Financial Connections
Krypto
Climate
StartseiteZahlungenBuild an advanced integration

Elements Appearance API

Passen Sie das Erscheinungsbild von Elements an das Design Ihrer Website an.

Seite kopieren

Stripe Elements unterstützt die visuelle Anpassung, wodurch Sie das Design Ihrer Website mit der Option appearance verändern können. Das Layout der einzelnen Elemente bleibt konsistent, Sie können jedoch u. a. Farben, Schriftarten, Rahmen und Abstände ändern.

  1. Beginnen Sie mit der Auswahl eines Designs.

Wählen Sie ein vorgefertigtes Design, das zu Ihrer Website passt, und legen Sie direkt los.

  1. Passen Sie das Design mithilfe von Variablen an .

Legen Sie Variablen wie fontFamily and colorPrimary fest, um in jedem Element auftretende Komponenten umfassend anzupassen.

  1. 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.

Kundenstandort
Anordnung

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.

Zahlungsformular mit Karteneingabefeldern, den wichtigsten Kreditkartensymbolen und der Zahlungsoption Klarna mit beschrifteten Appearance API-Variablen für Farben und Design.

Die Option variables funktioniert wie CSS-Variablen. Sie können mit der Syntax var(--myVariable) CSS-Werte für jede Variable angeben und auf andere Variablen verweisen. Sie können sogar das daraus resultierende DOM 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

VariableBeschreibung
fontFamilyDie Schriftfamilie, die überall in Elements verwendet wird. Elements unterstützt nutzerdefinierte Schriftarten, indem die Option fonts an die Elements-Gruppe übergeben wird.
fontSizeBaseDie für das Stammverzeichnis des Element verwendete Schriftgröße. Standardmäßig werden andere Schriftgrößenvariablen wie fontSizeXs oder fontSizeSm von diesem Wert mittels rem-Einheiten skaliert. Wählen Sie bei Eingabefeldern auf Mobilgeräten unbedingt eine Schriftgröße von mindestens 16px.
spacingUnitDie 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.
borderRadiusDer Rahmenradius, der für Registerkarten, Eingaben und andere Komponenten im Element verwendet wird.
colorPrimaryEine Primärfarbe, die im gesamten Element verwendet wird. Legen Sie hier Ihre primäre Markenfarbe fest.
colorBackgroundDie Farbe, die für den Hintergrund von Eingaben, Registerkarten und anderen Komponenten im Element verwendet wird.
colorTextDie Standard-Textfarbe, die im Element verwendet wird.
colorDangerEine Farbe, die zur Anzeige von Fehlern oder schädlichen Aktionen im Element verwendet wird.

Weniger häufig genutzte Variablen

VariableBeschreibung
fontSmoothWelche Text-Antialiasing-Einstellungen im Element verwendet werden sollen. Kann always, auto oder never sein.
fontVariantLigaturesDie Einstellung font-variant-ligatures von Text im Element.
fontVariationSettingsDie Einstellung font-variation-settings von Text im Element.
fontWeightLightDie für dünnen Text verwendete Schriftstärke.
fontWeightNormalDie für normalen Text verwendete Schriftstärke.
fontWeightMediumDie für halbfetten Text verwendete Schriftstärke.
fontWeightBoldDie für fetten Text verwendete Schriftstärke.
fontLineHeightDie Einstellung line-height von Text im Element.
fontSizeXlDie Schriftgröße von extra großem Text im Element. Wird standardmäßig vonvar(--fontSizeBase) mit rem-Einheiten skaliert.
fontSizeLgDie Schriftgröße von großem Text im Element. Wird standardmäßig vonvar(--fontSizeBase) mit rem-Einheiten skaliert.
fontSizeSmDie Schriftgröße von kleinem Text im Element. Wird standardmäßig vonvar(--fontSizeBase) mit rem-Einheiten skaliert.
fontSizeXsDie Schriftgröße von extra kleinem Text im Element. Wird standardmäßig vonvar(--fontSizeBase) mit rem-Einheiten skaliert.
fontSize2XsDie Schriftgröße von zweifach extra kleinem Text im Element. Wird standardmäßig vonvar(--fontSizeBase) mit rem-Einheiten skaliert.
fontSize3XsDie Schriftgröße von dreifach extra kleinem Text im Element. Wird standardmäßig vonvar(--fontSizeBase) mit rem-Einheiten skaliert.
logoColorEine Präferenz für die Logo-Varianten, die angezeigt werden sollen; entweder light oder dark.
tabLogoColorDie Logovariante, die innerhalb der .Tab-Komponenten angezeigt werden soll (entweder light oder dark).
tabLogoSelectedColorDie Logovariante, die innerhalb der .Tab--selected-Komponente angezeigt werden soll (entweder light oder dark).
blockLogoColorDie Logovariante, die innerhalb der .Block-Komponenten angezeigt werden soll (entweder light oder dark).
colorSuccessEine Farbe, die zur Anzeige positiver Aktionen oder erfolgreicher Ergebnisse im Element verwendet wird.
colorWarningEine Farbe, die für die Anzeige potenziell schädlicher Aktionen im Element verwendet wird.
accessibleColorOnColorPrimaryDie Farbe von Text, der auf einem Hintergrund von var(--colorPrimary) erscheint.
accessibleColorOnColorBackgroundDie Farbe von Text, der auf einem Hintergrund von var(--colorBackground) erscheint.
accessibleColorOnColorSuccessDie Farbe von Text, der auf einem Hintergrund von var(--colorSuccess) erscheint.
accessibleColorOnColorDangerDie Farbe von Text, der über jedem var(--colorDanger) Hintergrund erscheint.
accessibleColorOnColorWarningDie Farbe von Text, der auf einem Hintergrund von var(--colorWarning) erscheint.
colorTextSecondaryDie Farbe, die für Text von sekundärer Bedeutung verwendet wird. Diese Farbe wird z. B. für die Beschriftung einer Registerkarte verwendet, die aktuell nicht ausgewählt ist.
colorTextPlaceholderDie Farbe, die für Eingabe-Platzhaltertext im Element verwendet wird.
iconColorDie Standardfarbe, die für Symbole im Element verwendet wird (z. B. das Symbol auf der Registerkarte „Karte“).
iconHoverColorDie Farbe der Symbole, wenn der Mauszeiger darüber bewegt wird.
iconCardErrorColorDie Farbe des Kartensymbols, wenn es sich in einem Fehlerzustand befindet.
iconCardCvcColorDie Farbe der CVC-Variante des Kartensymbols.
iconCardCvcErrorColorDie Farbe der CVC-Variante des Kartensymbols, wenn das CVC-Feld ungültige Eingaben enthält.
iconCheckmarkColorDie Farbe von Häkchen, die in Komponenten wie .Checkbox angezeigt werden.
iconChevronDownColorDie Farbe der Pfeilsymbole, die in ausgewählten Eingaben angezeigt werden.
iconChevronDownHoverColorDie Farbe der Pfeilsymbole, wenn der Mauszeiger darüber bewegt wird.
iconCloseColorDie Farbe von Schließsymbolen, die zur Anzeige einer Kündigungs- oder Schließungsaktion verwendet werden.
iconCloseHoverColorDie Farbe von Schließsymbolen, wenn der Mauszeiger darüber bewegt wird.
iconLoadingIndicatorColorDie Farbe der Sanduhr in den Ladeindikatoren.
iconMenuColorDie Farbe von Menüsymbolen, die verwendet werden, um eine Reihe zusätzlicher Aktionen anzuzeigen.
iconMenuHoverColorDie Farbe der Menüsymbole, wenn der Mauszeiger darüber bewegt wird.
iconMenuOpenColorDie Farbe der geöffneten Menüsymbole.
iconPasscodeDeviceColorFarbe des Passcode-Gerätesymbols, das anzeigt, dass eine Nachricht an das Mobilgerät des Nutzers/der Nutzerin gesendet wurde.
iconPasscodeDeviceHoverColorDie Farbe des Passcode-Gerätesymbols, wenn der Mauszeiger darüber bewegt wird.
iconPasscodeDeviceNotificationColorDie Farbe der Benachrichtigungsanzeige, die über dem Codegerätesymbol angezeigt wird.
iconRedirectColorDie Farbe des Weiterleitungssymbols, das für Zahlungsmethoden mit Weiterleitung erscheint.
tabIconColorDie Farbe der Symbole, die auf einer Registerkarte erscheinen.
tabIconHoverColorDie Farbe der Symbole, die auf einer Registerkarte erscheinen, wenn der Mauszeiger über die Registerkarte bewegt wird.
tabIconSelectedColorDie Farbe der Symbole, die auf einer Registerkarte erscheinen, wenn die Registerkarte ausgewählt wird.
tabIconMoreColorDie Farbe des Symbols, das im Trigger für das Menü der zusätzlichen Zahlungsmethoden erscheint.
tabIconMoreHoverColorDie Farbe des Symbols, das im Trigger für das Menü der zusätzlichen Zahlungsmethoden erscheint, wenn der Mauszeiger über den Auslöser bewegt wird.
accordionItemSpacingDer vertikale Abstand zwischen .AccordionItem-Komponenten. Dies gilt nur, wenn spacedAccordionItems true ist.
gridColumnSpacingDer Abstand zwischen den Spalten im Raster für das Layout des Elements.
gridRowSpacingDer Abstand zwischen den Zeilen im Raster für das Layout des Elements.
pickerItemSpacingDer Abstand zwischen den .PickerItem-Komponenten, gerendert innerhalb der .Picker-Komponente.
tabSpacingDer 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 für eine Regel 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 z. B. 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

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-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

Wählen Sie bei Eingabefeldern auf Mobilgeräten unbedingt eine Schriftgröße von mindestens 16px.

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.Label--empty, --invalid, --focused
.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.

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.Label--empty, --invalid, --focused, --floating, --resting
.Input--empty, --invalid:hover, :focus, :disabled, :autofill::placeholder, ::selection
.Error

Ablehnen

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.Block
.BlockDivider
.BlockAction--negative:hover, :focus, :active

Codeeingabe

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.CodeInput:hover, :focus, :disabled

Kontrollkästchen

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.Checkbox--checked
.CheckboxLabel--checked:hover, :focus, :focus-visible
.CheckboxInput--checked:hover, :focus, :focus-visible

Dropdown

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.Dropdown
.DropdownItem--highlight:active

Umschalter

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.Switch--active:hover
.SwitchControl:hover

Auswahl

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.PickerItem--selected, --highlight, --new, --disabled:hover, :focus, :active
.PickerAction:hover, :focus, :active

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ü

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.Menu
.MenuIcon--open:hover
.MenuAction--negative:hover, :focus, :active

Accordion

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.AccordionItem--selected:hover , :focus-visible

Payment Method Messaging Element

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.PaymentMethodMessaging

Optionsfeld-Symbol

KlassennameUS-BundesstaatenPseudo-KlassenPseudo-Elemente
.RadioIcon
.RadioIconOuter--checked, --hovered
.RadioIconInner--checked, --hovered

Sie können die Gesamtgröße des Symbols mit der Eigenschaft width für .RadioIcon steuern. Sie können die relative Größe von .RadioIconInner mit der Eigenschaft r (Radius) steuern. .RadioIconOuter und .RadioIconInner sind SVG-Elemente und können mit stroke- und fill-Eigenschaften gestaltet werden. Unten finden Sie eine vollständige Liste der unterstützten CSS-Eigenschaften.

const appearance = { rules: { '.RadioIcon': { width: '24px' }, '.RadioIconOuter': { stroke: '#E0E6EB' }, '.RadioIconInner': { r: '16' } } };

Unterstützte CSS-Eigenschaften

CSS-EigenschaftUnterstützte Klassen
-moz-osx-font-smoothingAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
-webkit-font-smoothingAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
-webkit-text-fill-colorAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
backgroundColorAccordionItem, Action, Block, BlockAction, BlockDivider, Button, CheckboxInput, CodeInput, DropdownItem, Error, Input, InputDivider, MenuAction, MenuIcon, PickerAction, PickerItem, Switch, Tab, ToggleItem
borderAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderBottomAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderBottomColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderBottomLeftRadiusAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderBottomRightRadiusAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderBottomStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderBottomWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderLeftAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderLeftColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderLeftStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderLeftWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderRadiusAccordionItem, 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, ToggleItem
borderRightAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderRightColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderRightStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderRightWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderTopAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderTopColorAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderTopLeftRadiusAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderTopRightRadiusAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderTopStyleAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderTopWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
borderWidthAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Switch, SwitchControl, Tab, TermsText, Text, ToggleItem
boxShadowAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, InputCloseIcon, Link, MenuAction, MenuIcon, PasscodeCloseIcon, PasscodeShowIcon, PickerAction, PickerItem, SecondaryLink, Switch, SwitchControl, Tab, TermsLink, ToggleItem
colorAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabIcon, TabLabel, TermsLink, TermsText, Text, ToggleItem
fillAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, MenuAction, MenuIcon, PickerAction, PickerItem, RadioIconInner, RadioIconOuter, SwitchControl, Tab, TabIcon, ToggleItem
fillOpacityRadioIconInner, RadioIconOuter
fontFamilyAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
fontSizeAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Switch, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
fontVariantAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
fontWeightAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
letterSpacingAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
lineHeightAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
marginAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab, ToggleItem
marginBottomAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab, ToggleItem
marginLeftAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab, ToggleItem
marginRightAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab, ToggleItem
marginTopAction, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, MenuAction, PickerAction, PickerItem, Tab, ToggleItem
opacityLabel
outlineAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, InputCloseIcon, Link, MenuAction, MenuIcon, PasscodeCloseIcon, PasscodeShowIcon, PickerAction, PickerItem, SecondaryLink, Switch, SwitchControl, Tab, TermsLink, ToggleItem
outlineOffsetAccordionItem, Action, Block, BlockAction, Button, CheckboxInput, CodeInput, Dropdown, DropdownItem, Error, Input, InputCloseIcon, Link, MenuAction, MenuIcon, PasscodeCloseIcon, PasscodeShowIcon, PickerAction, PickerItem, SecondaryLink, Switch, SwitchControl, Tab, TermsLink, ToggleItem
paddingAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text, ToggleItem
paddingBottomAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text, ToggleItem
paddingLeftAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text, ToggleItem
paddingRightAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text, ToggleItem
paddingTopAccordionItem, Action, Block, BlockAction, Button, CodeInput, DropdownItem, Error, Input, Label, Menu, MenuAction, MenuIcon, PickerAction, PickerItem, RedirectText, Tab, TabIcon, TabLabel, TermsText, Text, ToggleItem
rRadioIconInner
strokeRadioIconInner, RadioIconOuter
strokeOpacityRadioIconInner, RadioIconOuter
strokeWidthRadioIconInner, RadioIconOuter
textAlignPaymentMethodMessaging
textDecorationAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
textShadowAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
textTransformAccordionItem, Action, BlockAction, Button, Checkbox, CheckboxLabel, CodeInput, DropdownItem, Error, Input, Label, Link, MenuAction, PickerAction, PickerItem, RedirectText, SecondaryLink, Tab, TabLabel, TermsLink, TermsText, Text, ToggleItem
transitionAction, Block, BlockAction, Button, CheckboxInput, CheckboxLabel, CodeInput, Dropdown, DropdownItem, Error, Icon, Input, InputCloseIcon, Label, Link, MenuAction, MenuIcon, PasscodeCloseIcon, PasscodeShowIcon, PickerAction, PickerItem, RadioIconInner, RadioIconOuter, RedirectText, SecondaryLink, Switch, SwitchControl, Tab, TabIcon, TabLabel, TermsLink, TermsText, Text, ToggleItem
widthRadioIcon

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:

KonfigurationBeschreibung
disableAnimationsDeaktiviert Animationen in Elements. Boolescher Wert, Standardwert ist false.
labelsErmö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
War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unser Änderungsprotokoll an.
Fragen? Sales-Team kontaktieren.
LLM? Lesen Sie llms.txt.
Unterstützt von Markdoc