Unterstützte Darstellungsoptionen
Prüfen Sie die für eingebettete Komponenten verfügbaren Darstellungsoptionen.
Das variables
-Objekt enthält die folgenden optionalen Eigenschaften, die für alle in Connect eingebetteten Komponenten in Ihrer Anwendung gelten. Die Variablen können Sie auf der Anpassungsseite testen.
Häufig genutzte Variablen![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Name | Typ | Beispielwert |
fontFamily | Zeichenfolge | sans-serif |
Der Wert der Schriftfamilie, der in allen eingebetteten Komponenten verwendet wird. Wenn eine eingebettete Komponente einen font-family -Wert von einem Element auf Ihrer Website übernimmt, in dem sie platziert ist, überschreibt diese Einstellung diese Übernahme. | ||
fontSizeBase | Zeichenfolge | 16px |
Die festgelegte Basisschriftgröße der eingebetteten Grundkomponente. Dadurch wird der Wert anderer Variablen für die Schriftgröße skaliert. Es werden nur Pixelwerte unterstützt. | ||
spacingUnit | Zeichenfolge | 8px |
Die Basis-Abstandseinheit, von der alle anderen Abstandswerte abgeleitet werden. Erhöhen oder verringern Sie diesen Wert, um Ihrem Layout mehr oder weniger Platz zu geben. Es werden nur Pixelwerte unterstützt. | ||
borderRadius | Zeichenfolge | 15px |
Der in eingebetteten Komponenten verwendete allgemeine Randradius. Dadurch wird der Standard-Randradius für alle Komponenten festgelegt. Es werden nur Pixelwerte unterstützt. | ||
colorPrimary | Zeichenfolge | #0074D4 |
Die in allen eingebetteten Komponenten verwendete Primärfarbe. Legen Sie hier Ihre primäre Markenfarbe fest. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
colorBackground | Zeichenfolge | #FFFFFF |
Die Hintergrundfarbe für eingebettete Komponenten, einschließlich Overlays, Tooltipps und Popovers. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
colorText | Zeichenfolge | #444444 |
Die für regulären Text verwendete Farbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
colorDanger | Zeichenfolge | #DF1B41 |
Die Farbe zur Kennzeichnung von Fehlern oder schädlichen Aktionen. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. |
Weniger häufig genutzte Variablen![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Name | Typ | Beispielwert |
buttonPrimaryColorBackground | Zeichenfolge | #0074D4 |
Die Farbe, die als Hintergrund für primäre Schaltflächen verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
buttonPrimaryColorBorder | Zeichenfolge | #0074D4 |
Die für primäre Schaltflächen verwendete Rahmenfarbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
buttonPrimaryColorText | Zeichenfolge | #FFFFFF |
Die für primäre Schaltflächen verwendete Textfarbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
buttonSecondaryColorBackground | Zeichenfolge | #EBEEF1 |
Die Farbe, die als Hintergrundfarbe für sekundäre Schaltflächen verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
buttonSecondaryColorBorder | Zeichenfolge | #EBEEF1 |
Die Farbe, die als Rahmenfarbe für sekundäre Schaltflächen verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
buttonSecondaryColorText | Zeichenfolge | #393B3E |
Die für sekundäre Schaltflächen verwendete Textfarbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
colorSecondaryText | Zeichenfolge | #717171 |
Die für sekundären Text verwendete Farbe. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. | ||
actionPrimaryColorText | Zeichenfolge | #0074D4 |
Die für primäre Aktionen und Links verwendete Farbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
actionSecondaryColorText | Zeichenfolge | #444444 |
Die für sekundäre Aktionen und Links verwendete Farbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
badgeNeutralColorBackground | Zeichenfolge | #E4ECEC |
Mit dieser Hintergrundfarbe wird ein neutraler Zustand oder das Fehlen eines Zustands in Status-Badges angezeigt. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
badgeNeutralColorText | Zeichenfolge | #545969 |
Mit dieser Textfarbe wird ein neutraler Zustand oder das Fehlen eines Zustands in Status-Badges angezeigt. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
badgeNeutralColorBorder | Zeichenfolge | #CBD5D6 |
Mit dieser Rahmenfarbe wird ein neutraler Zustand oder das Fehlen eines Zustands in Status-Badges angezeigt. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. | ||
badgeSuccessColorBackground | Zeichenfolge | #CEF6BB |
Die Hintergrundfarbe, mit der ein erfolgreiches Ergebnis bei Status-Badges hervorgehoben wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
badgeSuccessColorText | Zeichenfolge | #05690D |
Die Textfarbe, mit der ein erfolgreiches Ergebnis bei Status-Badges hervorgehoben wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
badgeSuccessColorBorder | Zeichenfolge | #B4E1A2 |
Die Rahmenfarbe, mit der ein erfolgreiches Ergebnis bei Status-Badges hervorgehoben wird. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. | ||
badgeWarningColorBackground | Zeichenfolge | #FCEEBA |
Die Hintergrundfarbe für Status-Badges bei Problemen, die möglicherweise ein Eingreifen erfordern, deren Behebung jedoch optional ist. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
badgeWarningColorText | Zeichenfolge | #A82C00 |
Die Textfarbe für Status-Badges bei Problemen, die möglicherweise ein Eingreifen erfordern, deren Behebung jedoch optional ist. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
badgeWarningColorBorder | Zeichenfolge | #F5DA80 |
Die Rahmenfarbe für Status-Badges bei Problemen, die möglicherweise ein Eingreifen erfordern, deren Behebung jedoch optional ist. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. | ||
badgeDangerColorBackground | Zeichenfolge | #F9E4F1 |
Die Hintergrundfarbe bei Status-Badges zur Verwendung in kritischen Situationen mit hoher Priorität, in denen unmittelbarer Handlungsbedarf besteht, und um auf fehlgeschlagene oder erfolglose Vorgänge hinzuweisen. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
badgeDangerColorText | Zeichenfolge | #B3063D |
Die Textfarbe bei Status-Badges zur Verwendung in kritischen Situationen mit hoher Priorität, in denen unmittelbarer Handlungsbedarf besteht, und um auf fehlgeschlagene oder erfolglose Vorgänge hinzuweisen. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
badgeDangerColorBorder | Zeichenfolge | #F2C9E3 |
Die Rahmenfarbe bei Status-Badges zur Verwendung in kritischen Situationen mit hoher Priorität, in denen unmittelbarer Handlungsbedarf besteht, und um auf fehlgeschlagene oder erfolglose Vorgänge hinzuweisen. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. | ||
offsetBackgroundColor | Zeichenfolge | #FFFFFF |
Die Hintergrundfarbe, die zur Hervorhebung von Informationen dient, wie zum Beispiel die ausgewählte Zeile in einer Tabelle oder ein bestimmtes Element der Nutzeroberfläche. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
formBackgroundColor | Zeichenfolge | #FFFFFF |
Die für Formularelemente verwendete Hintergrundfarbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
colorBorder | Zeichenfolge | #D7D7D7 |
Die Farbe, die für die Rahmen der Komponente verwendet wird. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. | ||
formHighlightColorBorder | Zeichenfolge | #D7D7D7 |
Die Farbe, die verwendet wird, um fokussierte Formularelemente hervorzuheben. Es werden Hex-Werte oder Zeichenfolgen der Typen RGB, RGBA oder HSL akzeptiert. | ||
formAccentColor | Zeichenfolge | #0074D4 |
Die Farbe, die zum Füllen von Formularelementen wie Kontrollkästchen, Optionsfeldern und Schaltern verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert. | ||
buttonBorderRadius | Zeichenfolge | 4px |
Der für Schaltflächen verwendete Rahmenradius. Es werden nur Pixelwerte unterstützt. | ||
formBorderRadius | Zeichenfolge | 6px |
Der für Formularelemente verwendete Rahmenradius. Es werden nur Pixelwerte unterstützt. | ||
badgeBorderRadius | Zeichenfolge | 4px |
Der für Badges verwendete Rahmenradius. Es werden nur Pixelwerte unterstützt. | ||
overlayBorderRadius | Zeichenfolge | 8px |
Der für Overlays verwendete Rahmenradius. Es werden nur Pixelwerte unterstützt. | ||
overlayZIndex | Zahl | 1000 |
Ein z-index, der für das Overlay aller eingebetteten Komponenten verwendet wird. Legen Sie diese Zahl fest, um die z-Reihenfolge des Overlays zu steuern. | ||
bodyMdFontSize | Zeichenfolge | 16px |
Die Schriftgröße für die Typografie des mittleren Textfeldes. Die Variablen für die Typografie des Textfeldes akzeptieren einen gültigen Wert für die Schriftgröße. | ||
bodyMdFontWeight | Zeichenfolge | 400 |
Die Schriftstärke für die Typografie des mittleren Textfeldes. Die Variablen des Textfeldes akzeptieren einen gültigen Wert für die Schriftstärke. | ||
bodySmFontSize | Zeichenfolge | 14px |
Die Schriftgröße für die Typografie des kleinen Textfeldes. Die Variablen für die Typografie des Textfeldes akzeptieren einen gültigen Wert für die Schriftgröße. | ||
bodySmFontWeight | Zeichenfolge | 400 |
Die Schriftstärke für die Typografie des kleinen Textfeldes. Die Variablen des Textfeldes akzeptieren einen gültigen Wert für die Schriftstärke. | ||
headingXlFontSize | Zeichenfolge | 28px |
Die Schriftgröße für die Typografie der extra großen Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die Schriftgröße. | ||
headingXlFontWeight | Zeichenfolge | 700 |
Die Schriftstärke für die Typografie der extra großen Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die Schriftstärke. | ||
headingXlTextTransform | Zeichenfolge | uppercase |
Die Texttransformation für die Typografie der extra großen Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die Texttransformation. | ||
headingLgFontSize | Zeichenfolge | 24px |
Die Schriftgröße für die Typografie der großen Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die Schriftgröße. | ||
headingLgFontWeight | Zeichenfolge | 700 |
Die Schriftstärke für die Typografie der großen Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die Schriftstärke. | ||
headingLgTextTransform | Zeichenfolge | uppercase |
Die Texttransformation für die Typografie der großen Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die Texttransformation. | ||
headingMdFontSize | Zeichenfolge | 20px |
Die Schriftgröße für die Typografie der mittleren Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die Schriftgröße. | ||
headingMdFontWeight | Zeichenfolge | 700 |
Die Schriftstärke für die Typografie der mittleren Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die Schriftstärke. | ||
headingMdTextTransform | Zeichenfolge | uppercase |
Die Texttransformation für die Typografie der mittleren Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die Texttransformation. | ||
headingSmFontSize | Zeichenfolge | 16px |
Die Schriftgröße für die Typografie der kleinen Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die Schriftgröße. | ||
headingSmFontWeight | Zeichenfolge | 700 |
Die Schriftstärke für die Typografie der kleinen Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die Schriftstärke. | ||
headingSmTextTransform | Zeichenfolge | uppercase |
Die Texttransformation für die Typografie der kleinen Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die Texttransformation. | ||
headingXsFontSize | Zeichenfolge | 12px |
Die Schriftgröße für die Typografie der extra kleinen Überschrift. Die Variablen für die Typografie der Überschrift akzeptieren einen gültigen Wert für die Schriftgröße. | ||
headingXsFontWeight | Zeichenfolge | 700 |
Die Schriftstärke für die Typografie der extra kleinen Überschrift. Die Variablen der Überschrift akzeptieren einen gültigen Wert für die Schriftstärke. | ||
headingXsTextTransform | Zeichenfolge | uppercase |
Die Texttransformation für die Typografie der extra kleinen Überschrift. Überschrift-Typografie-Variablen akzeptieren einen gültigen Wert für die Texttransformation. | ||
labelMdFontSize | Zeichenfolge | 14px |
Die Schriftgröße für die Typografie des mittleren Labels. Die Variablen für die Label-Typografie akzeptieren einen gültigen Wert für die Schriftgröße. | ||
labelMdFontWeight | Zeichenfolge | 400 |
Die Schriftstärke für die Typografie des mittleren Labels. Die Variablen des Labels akzeptieren einen gültigen Wert für die Schriftstärke. | ||
labelMdTextTransform | Zeichenfolge | uppercase |
Die Texttransformation für die Typografie des mittleren Labels. Label-Typografie-Variablen akzeptieren einen gültigen Wert für die Texttransformation. | ||
labelSmFontSize | Zeichenfolge | 12px |
Die Schriftgröße für die Typografie des kleinen Labels. Die Variablen für die Typografie akzeptieren einen gültigen Wert für die Schriftgröße. | ||
labelSmFontWeight | Zeichenfolge | 400 |
Die Schriftstärke für die Typografie des kleinen Labels. Die Variablen des Labels akzeptieren einen gültigen Wert für die Schriftstärke. | ||
labelSmTextTransform | Zeichenfolge | uppercase |
Die Texttransformation für die Typografie des kleinen Labels. Label-Typografie-Variablen akzeptieren einen gültigen Wert für die Texttransformation. |