Unterstützte Darstellungsoptionen

Prüfen Sie die für eingebettete Komponenten verfügbaren Darstellungsoptionen.

Das Figma UI-Toolkit mit eingebetteten Komponenten enthält alle Komponenten, allgemeine Muster und eine Beispielanwendung. Sie können damit eingebettete Nutzeroberflächen in Ihrer Website visualisieren und gestalten.

Sie können jede der folgenden appearance-Eigenschaften auf der Anpassungsseite verwenden. Diese Seite generiert auch automatisch ein Snippet, das Sie basierend auf den angegebenen appearance-Parametern auf Ihrer Website verwenden können.

These options are the only way to change styles in Connect embedded components. You can’t override their styles with CSS selectors or other mechanisms.

Necessary popups

Some behavior in embedded components, such as user authentication, is always presented in a popup. You can’t customize the embedded component to eliminate such popups.

Variablen

Das variables-Objekt enthält die folgenden optionalen Eigenschaften, die für alle in Connect eingebetteten Komponenten in Ihrer Anwendung gelten.

Häufig genutzte Variablen

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

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.
`actionPrimaryTextDecorationLine`	Zeichenfolge	`underline`
Der Linientyp, der für die Textdekoration von primären Aktionen und Links verwendet wird. Dies akzeptiert einen gültigen Text-Dekorationslinie Wert.
`actionPrimaryTextDecorationColor`	Zeichenfolge	`#0074D4`
Die Farbe, die für die Textdekoration von primären Aktionen und Links verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert.
`actionPrimaryTextDecorationStyle`	Zeichenfolge	`solid`
Der Textdekorationsstil für primäre Aktionen und Links. Akzeptiert einen gültigen Textdekorationsstil.
`actionPrimaryTextDecorationThickness`	Zeichenfolge	`1px`
Der Textdekorationsstil für primäre Aktionen und Links. Akzeptiert einen gültigen Textdekorationsstil.
`actionSecondaryColorText`	Zeichenfolge	`#444444`
Die für sekundäre Aktionen und Links verwendete Farbe. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert.
`actionSecondaryTextDecorationLine`	Zeichenfolge	`underline`
Der Linientyp, der für die Textdekoration von sekundären Aktionen und Links verwendet wird. Akzeptiert eine gültige Textdekorationszeile.
`actionSecondaryTextDecorationColor`	Zeichenfolge	`#0074D4`
Die Farbe, die für die Textdekoration von sekundären Aktionen und Links verwendet wird. Es werden Hex-Werte oder RGB-/HSL-Zeichenfolgen akzeptiert.
`actionSecondaryTextDecorationStyle`	Zeichenfolge	`solid`
Der Textdekorationsstil für sekundäre Aktionen und Links. Akzeptiert einen gültigen Textdekorationsstil.
`actionSecondaryTextDecorationThickness`	Zeichenfolge	`1px`
Der Textdekorationsstil für sekundäre Aktionen und Links. Akzeptiert einen gültigen Textdekorationsstil.
`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.
`overlayBackdropColor`	Zeichenfolge	`#F9E4F1`
Die Hintergrundfarbe, wenn ein Overlay geöffnet wird. Akzeptiert Hexadezimalwerte oder RGB/RGBA/HSL-Zeichenfolgen.
`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.

Overlays

Die Eigenschaft overlays steuert, ob eine Dialog-Nutzeroberfläche (auch als Modal bezeichnet) oder eine Schubladen-Nutzeroberfläche für Overlays verwendet werden soll. Wählen Sie das Preis-Leistungs-Verhältnis, das am besten zu Ihrer Website passt.

Name	Typ	Beispielwert
`overlays`	Zeichenfolge	`dialog`
Der Typ des Overlays, das von eingebetteten Komponenten verwendet wird. Gültige Werte sind `dialog` (Standard) und `drawer`.