Designs in Jitterbit App Builder
Übersicht
Ein Design steuert das visuelle Erscheinungsbild einer App Builder-Anwendung in der UI-Ebene. Ein Design ist eine Kombination von Komponenten und Stiltypen (früher als Werttypen bekannt), mit der man das Erscheinungsbild definierter UI-Bereiche kontrollieren kann. Beispielsweise können Sie die Hintergrundfarbe (ein Stiltyp) des Bereichs Links (eine Komponente) auf Blaugrün setzen.
Diese Seite erklärt, wie Designs funktionieren, wie Design-Token die Anpassung vereinfachen, und wie man den dunklen Modus einrichtet.
Funktionsweise von Designs
Eine Komponente stellt einen Bereich in der UI dar, dessen Eigenschaften geändert werden können (beispielsweise sind Seiten Komponenten). Stiltypen stellen die spezifischen Eigenschaften dar, die geändert oder definiert werden können (beispielsweise ist Hintergrundfarbe ein Stiltyp).
Ein neues Design hat keine sichtbare Auswirkung, bis man Komponenten darin konfiguriert. Die auf Design-Ebene gewählten Farben werden nicht automatisch auf Teile der UI angewendet. Ohne angewendetes Design erscheint App Builder auf der UI-Ebene in einem designlosen Zustand mit minimaler Formatierung. Verwenden Sie die Schaltfläche Vorschau eines Designs, um zu sehen, wie verschiedene Bildschirme und Fenster mit angewendetem Design aussehen, ohne dieses zuerst anwenden zu müssen.
Mit App Builder werden mehrere vordefinierte Basis-Designs ausgeliefert, die von der Anwendung einfach so verwendet oder als Basis-Design genutzt werden können, das man dann weiter anpasst. Über grundlegende Farben hinaus ermöglichen Komponenten und Stiltypen das Formatieren von Dutzenden weiterer Bereiche und Verhalten.
Komponenten und Unterkomponenten
Eine Komponente ist ein Bereich der UI, der formatiert werden kann, beispielsweise eine Seite oder ein Fenster. Jede Komponente ist in Unterkomponenten unterteilt, die einzeln formatiert werden können, beispielsweise die Titelleiste eines Fensters oder die Links in der Titelleiste einer Seite.
Um benutzerdefinierte Farben durch die UI-Ebene zu sehen, konfigurieren Sie die Bereiche Komponenten und Unterkomponenten. Der folgende Screenshot zeigt die Unterkomponente Links der Komponente Seite - Titelleiste mit ihrer Hintergrundfarbe auf Blaugrün eingestellt:
Siehe Komponenten-Referenz für die vollständige Liste der Komponenten und Unterkomponenten.
Stiltypen
Wenn Komponente und Unterkomponente angegeben sind, wählen Sie einen Stiltyp aus dem Feld Stiltyp aus, um eine Eigenschaft anzuwenden. Stiltypen können sich auf Schriftfarben, Hintergrundfarben, Bilder, Ausrichtung, Farbverlaufsinformationen, Größeninformationen und mehr beziehen, je nachdem, welche Unterkomponente Sie anpassen. Der Hilfetext jedes Stiltyps im Feld Stiltyp beschreibt die spezifischen Werte, die erforderlich sind.
Siehe Stiltyp-Referenz für die vollständige Liste.
Design-Token
Ein Token ist ein benannter, wiederverwendbarer Wert, wie eine Farbe, eine Texteinstellung oder ein Bild, auf die sich ein Stil beziehen kann, anstatt einen hartcodierten Wert zu verwenden. Verweisen Sie auf einen Token in einem Stilwert mit der Syntax {TokenName}:
System-Token
Jedes Design enthält einen Satz von System-Token, die von der Plattform bereitgestellt werden. System-Token haben einen Punkt links neben ihrem Namen im Token-Raster, und ihre Namen sind übergreifend auf alle Designs gleich:
BackgroundColorBorderColorCautionColorComplementaryColorDangerColorForegroundColorPageBackgroundColorPrimaryColorSecondaryColor
Farben, die direkt im Design-Editor festgelegt werden, erscheinen als diese System-Token im Token-Raster. Die Syntax {TokenName} ist die gleiche reservierte Syntax, die zuvor nur für die Token PrimaryColor, SecondaryColor und ComplementaryColor verfügbar war.
Benutzerdefinierte Token
Sie können einem Design auch benutzerdefinierte Token für Ihre eigenen Farben, Texteinstellungen und Bilder hinzufügen, die auf die gleiche Weise wie {TokenName} referenziert werden. Um Token zu bearbeiten, klicken Sie auf das Listen-Symbol rechts neben dem Titel Token. Dies öffnet das Dialogfeld Token:
Das Tokens-Raster gruppiert Token in drei Registerkarten:
- Colors: Farbwerte. Ein Token ohne festgelegte Farbe zeigt eine Vorschau von Hashmarks.
- Text: Texteinstellungen wie Border Radius oder Font Family. Jedes Text-Token hat eine Style-Eigenschaft, die steuert, in welchen Stilisten das Token angezeigt wird, wenn du einen Stil festlegst.
- Images: Bildwerte, die als CSS eingegeben werden, wie
linear-gradient(to right, #FFD700, #1E90FF), keine visuellen Bilder, die in die Sammlung hochgeladen wurden.
Benutzerdefinierte Token, die in einem Basis-Theme definiert sind, stehen auch jedem Theme zur Verfügung, das darauf basiert, ohne dass sie neu definiert werden müssen. Allerdings sind Steuerelement-Level-Themes, die direkt im Design eines bestimmten Field, Panel oder ähnlichen Steuerelements verwendet werden, nicht an ein Hauptanwendungs-Theme gebunden, daher bieten sie nur Systemtoken, wenn du einen Stil festlegst. Wenn du weißt, dass ein Steuerelement ein bestimmtes Theme verwendet, das du erstellt hast, kannst du den Namen eines benutzerdefinierten Tokens immer noch direkt in das Theme-Stil-Feld eines Steuerelements als {MyCustomTokenName} eingeben, aber wenn sich das Theme der Anwendung später ändert und das neue Theme dieses Token nicht hat, wird der Stil nicht wie erwartet angezeigt.
Vorsicht
Wenn du ein Theme für Seiten- oder Panel-Zwecke verwendest, lass sein Base Theme leer. Wenn du es auf das App-Theme setzt, wird das App-Theme-CSS zweimal geladen.
Tipp
Die Verwendung von Tokens ermöglicht es dir, ein Theme zu kopieren und den Wert eines Tokens einmal zu bearbeiten, um jeden Stil zu aktualisieren, der darauf verweist. Dies beschleunigt die Theme-Anpassung.
Farben anpassen
Farben können in Bezug auf Helligkeit oder Dunkelheit und Deckkraft angepasst werden. Diese Anpassung ist für jedes Farbtoken verfügbar, einschließlich der Systemtoken wie {PrimaryColor}, {SecondaryColor} und {ComplementaryColor}.
Um die Farbbelligkeit und -dunkelheit anzupassen, füge ein Pipe-Zeichen zusammen mit einem numerischen Dezimalwert hinzu (positiver Wert zum Aufhellen oder negativer Wert zum Abdunkeln der Farbe). Erwartete Werte liegen zwischen -.9 und .9.
Syntax: {PrimaryColor|.25} oder {PrimaryColor|-.25}
Für ein Theme, das Dark Mode unterstützt, füge einen zweiten, durch Komma getrennten Wert hinzu, um eine andere Anpassung für die Dark-Variante festzulegen. Zum Beispiel dunkelt {ForegroundColor|-.8} eine Farbe ab, was für eine Light-Variante gut funktioniert, aber in einer Dark-Variante möchtest du die Farbe wahrscheinlich stattdessen aufhellen. Das Hinzufügen eines zweiten Wertes legt die Anpassung der Dark-Variante fest: {ForegroundColor|-.8,.8} dunkelt die Farbe für die Light-Variante ab und hellt sie für die Dark-Variante auf.
Um die Farbdeckkkraft anzupassen, füge das Tilde-Zeichen zusammen mit einem numerischen Dezimalwert hinzu. Erwartete Werte liegen zwischen .1 und .9.
Syntax: {PrimaryColor~.25}
Dark Mode
Die Supports Dark-Einstellung eines Themes steuert, ob dieses Theme im Dark Mode angezeigt werden kann, und die Color Scheme-Einstellung jedes Benutzers, die auf der Seite User Profile festgelegt wird, steuert, wann Dark Mode angefordert wird. Als Entwickler entscheidest du, welche Themes Dark Mode unterstützen, und definierst die dunklen Farben und Bilder, die diese Themes verwenden. Weitere Informationen zur Speicherung sowohl der Light- als auch der Dark-Werte in einem einzigen Theme findest du unter Theme tokens.
Anwendung des Color Scheme eines Benutzers
Benutzer wählen eine der folgenden Optionen für das Color Scheme ihres Kontos:
| Option | Verhalten |
|---|---|
| Light | (Standard.) Verwende immer Light-Farben und -Bilder. |
| Dark | Verwende Dark-Farben und -Bilder überall dort, wo das aktive Theme Dark Mode unterstützt. |
| System | Folge der Einstellung des Betriebssystems oder Browsers des Benutzers und wechsle automatisch, wenn sich diese Einstellung ändert. |
Ein Theme wird nur dann dunkel dargestellt, wenn es den dunklen Modus unterstützt. Wenn ein Nutzer Dunkel bevorzugt, aber das Theme eines Elements den dunklen Modus nicht unterstützt, bleibt dieses Element hell, sodass ein einzelner Bildschirm beide Darstellungen mischen kann. Beispielsweise kann die Hauptanwendung dunkel sein, während ein Pop-up, das ein anderes Theme ohne Unterstützung für den dunklen Modus verwendet, hell bleibt, wie das Benutzerprofil-Pop-up, das aus der Aktionsleiste geöffnet wird.
Hell ist das Standard-Farbschema für neue Nutzer.
Dunklen Modus für ein Theme einrichten
Um den dunklen Modus für ein Theme zu aktivieren, führen Sie diese Schritte aus:
- Öffnen Sie das Theme im Theme-Editor.
- Aktivieren Sie die Einstellung Unterstützt Dunkel.
- Klicken Sie auf das Listensymbol rechts neben dem Titel Tokens, um das Dialogfeld Tokens zu öffnen.
- Geben Sie auf den Registerkarten Farben und Bilder für jeden Token einen Hell-Wert und einen Dunkel-Wert ein. Ein Text-Token hat einen einzelnen Wert, der von beiden Modi gemeinsam genutzt wird.
Sammlungsbilder und dunkler Modus
Sammlungsbilder sind nicht mit einem Theme verbunden; sie werden in einer Sammlung definiert und direkt in der Workbench beim Erstellen einer Seite verwendet. Daher hat die Einstellung Unterstützt Dunkel eines Themes keine direkte Auswirkung auf Sammlungsbilder, die in einer Anwendung verwendet werden.
Stattdessen kann jedes Sammlungsbild mit einer Variante vom Typ Dunkles Bild verknüpft werden. Wenn eine Anwendungsseite dargestellt wird, prüft App Builder die Einstellung Farbschema des Nutzers und ob das aktive Theme den dunklen Modus unterstützt. Wenn das Bild im dunklen Theme-Modus dargestellt wird und ein Dunkles Bild verknüpft ist, wird stattdessen die verknüpfte dunkle Variante dargestellt.
So verknüpfen Sie eine dunkle Variante mit einem Sammlungsbild:
- Laden Sie das Bild, das als dunkle Variante verwendet werden soll, in dieselbe Sammlung wie das Originalbild hoch. Siehe Logo in eine Sammlung hochladen für die Schritte zum Hochladen.
- Navigieren Sie zum Bereich Look & Feel der Sammlung, klicken Sie auf die Registerkarte Bilder, und öffnen Sie den Datensatz für das Originalbild.
- Klicken Sie auf Bearbeiten.
- Wählen Sie im Feld Dunkles Bild die dunkle Variante aus.
- Klicken Sie auf Speichern.
Für einen Sonderfall, in dem die dunkle Variante nicht dargestellt werden soll, obwohl ein Bild ein verknüpftes Dunkles Bild hat, z. B. bei einem Listensteuerelement, bei dem das genaue Bild mit dem Ausgewählten des Nutzers übereinstimmen muss, siehe Dunkle Bildvariante deaktivieren.
Elemente, die sich im dunklen Modus nicht ändern
Die folgenden Elemente ändern sich nicht, wenn das Farbschema eines Nutzers Dunkel erfordert:
- Elemente, die von einem Theme ohne Unterstützung für den dunklen Modus formatiert werden. Beispielsweise bleibt ein Pop-up, das ein Theme ohne Unterstützung für den dunklen Modus verwendet, hell, während die Hauptanwendung dunkel ist.
- Sammlungsbilder ohne verknüpftes Dunkles Bild.
- Bilder, die aus Anwendungsdaten dargestellt werden, z. B. Mitarbeiterfotos. Diese Bilder haben keine dunkle Variante.
Kopieren-Funktion
Jedes Theme kann kopiert werden. Da Styles auf Tokens und nicht auf hartcodierte Werte verweisen, können Sie eine Kopie oft durch Änderung von nur deren Token-Werten umgestalten, wie z. B. PrimaryColor, SecondaryColor und ComplementaryColor. Es gibt viele vordefinierte Themes, die ausgewählt und unverändert verwendet oder weiter angepasst werden können, um schnell loszulegen.
Vordefinierte Themes in App Builder
App Builder wird mit mehreren vordefinierten Themes ausgeliefert. Obwohl diese technisch bearbeitbar sind, gehen bei einem Upgrade alle Änderungen verloren. Kopieren Sie ein vordefiniertes Theme, um Ihre Änderungen über ein Upgrade hinweg zu erhalten.
Das vordefinierte Theme Dunkel ist ein fixes dunkelgestaltetes Theme und reagiert nicht auf die Farbschema-Einstellung eines Nutzers. Um ein Theme zwischen hellen und dunklen Werten wechseln zu lassen, siehe stattdessen Dunkler Modus.
Seit App Builder 4.67 enthalten die vordefinierten Themes Hell, Dunkel, Shapes, Violet, Gradient, Hell - Modern und Login-Basistheme jeweils ein vorgefertigtes mobiles Theme, das bereits als mobiles Theme dieses Themes festgelegt ist, sodass es sich auf kleinen Bildschirmen automatisch anwendet. Diese mobilen Themes sind standardmäßig für die Verwendung auf Mobilgeräten optimiert und enthalten die folgenden Anpassungen:
- Benutzerfreundliche Hit-Ziele mit einer Mindestgröße von 44x44 Pixeln.
- Für Mobilgeräte skalierte Typografie und Zeilenhöhen.
- Kompakte Abstände und Ränder.
- Einspaltige Anordnung von Formularfeldern.
Dieses automatische Verhalten gilt nur für Apps, die eines dieser Systemdesigns direkt verwenden. Ein benutzerdefiniertes Design basierend auf einem Systemdesign erbt nicht das vordefinierte Mobildesign. Wenn du ein Systemdesign direkt verwendest und das vordefinierte Mobildesign deaktivieren möchtest, erstelle ein benutzerdefiniertes Design basierend auf dem Systemdesign und nutze dieses stattdessen; das vordefinierte Mobildesign wird nicht übernommen. Wenn du bereits ein benutzerdefiniertes Design basierend auf einem Systemdesign verwendest und das vordefinierte Mobildesign übernehmen möchtest, siehe Vordefiniertes Mobildesign mit einem benutzerdefinierten Basisdesign verwenden.
Siehe Mobildesign erstellen, um stattdessen ein benutzerdefiniertes Mobildesign zu erstellen.
Vorschläge
Wenn du eine dunkle Hintergrundfarbe festlegst, stelle sicher, dass du eine Schriftfarbe verwendest, die für alle Texte lesbar ist. Nutze die text-shadow-Eigenschaft in der Schriftfarbe, um zusätzlichen Kontrast hinzuzufügen. Dies ist besonders relevant bei der Auswahl der dunklen Variantfarben eines Designs.
Anhang
Komponentenreferenz
Seite
| Schnittstellenname | Beschreibung |
|---|---|
| Container – Rahmen-Seitencontainer (Mobil) | Seitencontainer in einem Rahmen auf einem Mobilgerät |
| Container – Einzelne Seitencontainer | Der Container für jede auf dem Bildschirm angezeigte Seite |
| Container – Maximierter Seitencontainer | |
| Container – Äußerer Seitencontainer | Element, das jeden Seitenknoten umhüllt |
| Container – Seite | Der Container für die Seiten |
| Container – Innerer Seitencontainer | Element im Seitencontainer |
| Container – Innerer Seitencontainer – nicht gescrollt | Element in einer Seite, die nicht zum Scrollen eingestellt ist |
| Container – Seitencontainer (Mobil) | Seitencontainer auf einem Mobilgerät |
| Container – Website | Der Gesamtkörper der Website, modale Fenster und andere Pop-ups |
| Container – Vinyl-Container der obersten Ebene | Container der obersten Ebene unter dem Body-Tag |
| Fußzeile – Versionsfußzeile | Die unten angezeigte Versionsfußzeile |
| Sonstige Inhaltsbereiche – Action Drawer-Inhalt | |
| Sonstige Inhaltsbereiche – Audit-Link-Container | |
| Sonstige Inhaltsbereiche – Sonstige Inhaltsbereiche | Verschiedene Bereiche wie die Action Drawer und Datumsauswahl-Felder |
| Sonstige Inhaltsbereiche – Benachrichtigungsschaltfläche | Schaltflächen, die in Benachrichtigungen angezeigt werden |
| Sonstige Inhaltsbereiche – Innerer Pages-Container | |
| Sonstige Inhaltsbereiche – Vinyl-Menü-Bezeichnungen | |
| Sonstige Inhaltsbereiche – Hilfe zum Wizard-Fenster | |
| Registerkarte – Aktiv | Aktive Registerkarten auf einer Seite |
| Registerkarte – Inaktiv | Inaktive Registerkarten auf einer Seite |
| Registerkarte – Äußerer Container der Seitenregisterkarten | |
| Registerkarte – Registerkarten-Container | Der Container für die Registerkarten, die in reduzierten Ansichtsfenstern angezeigt werden |
| Wizard-Schritte-Leiste – Text des aktiven Schritts | Aktiver Text auf einem Schritt in einer Wizard-Schritte-Leiste |
| Wizard-Schritte-Leiste – Marker für unvollständige Schritte | Marker, der einen unvollständigen Schritt in einer Wizard-Schritte-Leiste darstellt |
| Wizard-Schritte-Leiste – Verbindungslinie für unvollständige Schritte | Linie, die einen Schritt mit einem unvollständigen Schritt in einer Wizard-Schritte-Leiste verbindet |
| Wizard-Schritte-Leiste – Schritt-Marker | Marker, der einen Schritt in einer Wizard-Schritte-Leiste darstellt |
| Wizard-Schritte-Leiste – Verbindungslinie zwischen Schritten | Linie, die 2 Schritte in einer Wizard-Schritte-Leiste verbindet |
| Wizard-Schritte-Leiste – Text eines Schritts | Text auf einem Schritt in einer Wizard-Schritte-Leiste |
| Wizard-Schritte-Leiste – Wizard-Fenster-Schaltflächencontainer | |
| Wizard-Schritte-Leiste – Wizard-Fenster-Kopfzeile | |
| Wizard-Schritte-Leiste – Wizard-Schritte-Container | Der Container für eine Wizard-Schritte-Leiste |
| Wizard-Symbolleiste – Alle Wizard-Symbolleistenschaltflächen | Gilt für alle Schaltflächen in der Wizard-Symbolleiste, einschließlich der systeminternen Schaltflächen |
| Wizard-Symbolleiste – Benutzerdefinierte Wizard-Symbolleistenschaltflächen | Gilt für die benutzerdefinierten Schaltflächen in der Wizard-Symbolleiste. Dies schließt die systeminternen Schaltflächen (Zurück, Weiter, Fertig) aus |
| Wizard-Symbolleiste – Systemische Wizard-Symbolleistenschaltflächen | Gilt für die Systemschaltflächen in der Wizard-Symbolleiste (Zurück, Weiter, Fertig). Dies schließt benutzerdefinierte Schaltflächen in der Wizard-Symbolleiste aus |
Seite - Titelleiste
| Schnittstellenname | Beschreibung |
|---|---|
| Badge - Menü-Badge | |
| Drop-down-Menüs - Action Drawer Container | |
| Drop-down-Menüs - Drop-down-Links | Die Menüelemente des Drop-down-Menüs |
| Drop-down-Menüs - Drop-down-Menü | Das Drop-down-Menü, geöffnet mit Menüelementen |
| Drop-down-Menüs - Links im Drop-down-Menü | |
| Links - Aktiver Link zur Seite (Menü) | Ein Menülink, der zur aktuell angezeigten Seite führt |
| Links - Schaltfläche „Zurück"-Symbol | |
| Links - Hamburger-Menü-Symbol | Das Hamburger-Menü-Symbol in der oberen rechten Ecke |
| Links - Symbole in Links | Menüelemente vom Typ Symbol |
| Links - Verknüpftes Feld im Menü | |
| Links - Links | Links in der oberen Seitenleiste |
| Links - Menücontainer für Links | Der Container mit den Menüelementen, aber ohne den Seitentitel oder das Action Drawer Hamburger-Menü |
| Links - Menüfeld im Menü | |
| Links - Äußerer Menücontainer | Äußerer Container für Menüelemente; kann nicht von Menüelement-Designs verwendet werden |
| Links - Overflow-Container | Wenn zu viele Elemente vorhanden sind, wird dieses Menü angezeigt |
| Links - Overflow - Symbol | Ein Symbol, das angezeigt wird, wenn zu viele Elemente vorhanden sind |
| Links - Overflow-Links | |
| Links - Site-Menü-Links | Nur Inhalt des Site-Menüs |
| Links - Symbole im System | |
| Titelleiste - Schaltfläche „Zurück" | Die Schaltfläche „Zurück", die zur vorherigen Seite führt |
| Titelleiste - Trennlinie der Schaltfläche „Zurück" | |
| Titelleiste - Text der Schaltfläche „Zurück" | |
| Titelleiste - Container | Die obere Leiste mit dem Seitennamen, der Navigation und der Schaltfläche Mehr |
| Titelleiste - Links ausgerichteter Container im Menü | |
| Titelleiste - Live-Bearbeitung umschalten | |
| Titelleiste - Menücontainer | Element mit allen Menüelementen |
| Titelleiste - Innerer Menücontainer | Menüs werden in 3 (links, Mitte, rechts) aufgeteilt, und dies zielt auf alle 3 ab |
| Titelleiste - Menü-Flex-Container | |
| Titelleiste - Menüelement-Container | Äußerer Container für jedes Menüelement |
| Titelleiste - Menülogo | Bilder in Menüelementen |
| Titelleiste - Seitentitel | Das Container-Element in der oberen Leiste nur für den Seitentitel |
| Titelleiste - Trennlinien | Kleine Trennlinien zwischen Elementen |
| Titelleiste - Assistent-Seitentitel | Text, der als Seitentitel eines Assistenten angezeigt wird |
Seite - Registerkartenleiste
| Schnittstellenname | Beschreibung |
|---|---|
| Registerkartenleiste - Registerkarte | Jedes Registerkartenelement in der Leiste |
| Registerkartenleiste - Registerkartenleiste | Leiste unter der Seite |
| Registerkartenleiste - Registerkartenleiste Container nur für Seite | Der äußere Container für Registerkarten, aber die Seitenversion |
| Registerkartenleiste - Registerkartenleiste nur für Seite - Schaltfläche | |
| Registerkartenleiste - Registerkartenleiste nur für Seite - Schaltfläche (Aktiv) | |
| Registerkartenleiste - Registerkartenleiste nur für Seite - Schaltflächengruppe | |
| Registerkartenleiste - Registerkartenleiste nur für Seite - Schaltfläche (Letzte in Gruppe) | |
| Registerkartenelement - Menü-Symbol | |
| Registerkartenelement - Menüelement (Aktiv) | |
| Registerkartenelement - Menüelement-Symbol (Aktiv) |
Seite - Action Drawer
| Schnittstellenname | Beschreibung |
|---|---|
| Drawer-Elemente - Drawer-Elemente | Action Drawer Schaltflächen |
| Drawer-Elemente - Hamburger-Menü-Zeilentrennzeichen | |
| Site-Menü - Site-Menü | Der Home-Link, der zur Homepage der Website führt |
Seite Pop-up
| Schnittstellenname | Beschreibung |
|---|---|
| Schließschaltfläche - Schließschaltfläche | Die X-Schaltfläche, die die modalen Fenster schließt |
| Schließschaltfläche - Symbol der Schließschaltfläche | |
| Schließschaltfläche - SVG der Schließschaltfläche | |
| Container - Alle Deckkraftebenen | Alle Deckkraftebenen auf der Seite |
| Container - Container | Überlagerte Seite Container |
| Container - Container - Nach dem Verschieben | Nachdem ein Modal verschoben wurde, werden Top/Left zum Positionieren verwendet |
| Container - Nur erste modale Deckkraftebene | Wählt den ersten Deckkraftblocker aus, aber wenn er nicht der erste ist, wird er nicht angewendet |
| Container - Live-Bearbeitung Pop-up rechts ausgerichtet | |
| Container - Nicht-Pop-up-Seite, Nicht-framed-Seite | Seiten, die nicht überlagert werden (d. h. Flat) und auch nicht gerahmt sind |
| Container - Panel-Container | Panels, die als Overlay angezeigt werden |
| Container - Panel-Titel | Panel-Titel speziell in einem Pop-up-Seitentyp |
| Container - Slide-out-Container | Slide-out-Seite Container |
| Container - Titelleiste Panel Header | |
| Container - Vinyl-Filterpanel-Container |
Panel
| Schnittstellenname | Beschreibung |
|---|---|
| Action Drawer - Action Drawer Button | Eine Schaltfläche in einer Panel-Action-Drawer |
| Action Drawer - Action Drawer More Button | Schaltfläche, die ein Menü mit in die Action Drawer hochgestuften Schaltflächen anzeigt |
| Action Drawer - Action Drawer More Button - Opened | |
| Action Drawer - Action Drawer Wrapper | Das äußere div um die Action-Drawer-Schaltfläche |
| Activity indicator - Activity indicator | Animierter Kreis-Container, der Panel-Netzwerkaktivität anzeigt |
| Activity indicator - Activity indicator - Icon | |
| Activity indicator - Activity Indicator Temporary | |
| Activity indicator - Activity Indicator - Wrapper | |
| Activity indicator - Report Spinner | Spinner zum Laden von Berichten |
| Group - Panel Group Tabs | Die mit einer Tabbed Group angezeigten Registerkarten |
| Panel - App Menu - Content | |
| Panel - App Menu - Outer Container | |
| Panel - Container | Panel mit Header und Panel-Inhalt |
| Panel - Content | Container für Panel-Inhalt |
| Panel - Content - Pop Up Page | |
| Panel - Control Labels | |
| Panel - Disabled | Panels, die deaktiviert sind, weil sie unvollständige Bindungen haben |
| Panel - Link To Page Image | Das Bild, das Sie auf eine andere Seite führt |
| Panel - Maximized Panel Container | Identifiziert maximierte Panels |
| Panel - Maximize icon | Symbol, das ein Panel auf die volle Bildschirmgröße vergrößert |
| Panel - Metric Panel | |
| Panel - Outer container | Der oberste Container um ein einzelnes Panel |
| Panel - Panel Container | Der äußere Container jedes Panels |
| Panel - Panel In A Lane/Board Panel | |
| Panel - Panel Inner Shadow | |
| Panel - Title Bar | Der Bereich über einem Panel, enthält den Panel-Namen |
| Panel - Title center helpers | Verborgene Steuerelemente, die beim Zentrieren von Panel-Titeln angezeigt werden können; verwenden Sie Position: static |
| Title Bar - Close Button | Die X-Schaltfläche, die die modalen Panels schließt |
| Title Bar - Header button | Die Schaltfläche selbst, wenn sie zum Panel-Header hochgestuft wird |
| Title Bar - Header button container | Der Container für jede zum Panel-Header hochgestufte Schaltfläche |
| Title Bar - Header Buttons Container | |
| Title Bar - More Button Container | |
| Title Bar - More Button Items | |
| Title Bar - Panel Header in Tab Group | |
| Title Bar - Title | Der Titeltext des Panels |
| Title Bar - Title Bar Button | |
| Title Bar - Title (Before) |
Panel Placement
| Schnittstellenname | Beschreibung |
|---|---|
| All panels - Left-most and Right-most | |
| All panels - Padded All Sides | Panel mit Abstand auf allen Seiten |
| All panels - Padded Top Bottom Left | Panel mit Abstand oben, unten und links |
| All panels - Padded Top Left | Panel mit Abstand oben und links |
| All panels - Padded Top Right Left | Panel mit Abstand oben, rechts und links |
| All panels - Panel In Scroll Container | |
| All panels - Panel shown alone | Ein Panel, das die Seite nicht mit einem anderen teilt |
| All panels - Scrolled Panel Containers | |
| All panels - Scrolling Padded Right | Scroll-Gruppe mit Abstand rechts |
| All panels - Side By Side Scrolled Container | |
| Overlay panels - Padded All Sides | Panel mit Abstand auf allen Seiten |
| Overlay panels - Padded Top Bottom Left | Panel mit Abstand oben, unten und links |
| Overlay panels - Padded Top Left | Panel mit Abstand oben und links |
| Overlay panels - Padded Top Right Left | Panel mit Abstand oben, rechts und links |
| Overlay panels - Panel shown alone | Ein Panel, das die Seite nicht mit einem anderen teilt |
| Overlay panels - Scrolling Padded Right | Scroll-Gruppe mit Abstand rechts |
Panel - Toolbar
| Schnittstellenname | Beschreibung |
|---|---|
| Search and Filter - Container | Einfacher Such- und Filter-Kriterien-Container |
| Search and Filter - Container in a Tabbed Panel Group | |
| Search and Filter - Filter Clear X Icon | Kleines X-Symbol zum Löschen des Filters |
| Search and Filter - Input | Einfaches Sucheingabefeld |
| Search and Filter - Widget Searchbox | |
| Toolbar - All Icon Containers | |
| Toolbar - All toolbar buttons (override) | Alle Symbolleisten-Schaltflächen auswählen und alle niedrigeren Ebenen-Designs überschreiben |
| Toolbar - Audit Button | Die Audit-Schaltfläche in einer Symbolleiste |
| Toolbar - Buttons | Schaltflächen in der Symbolleiste |
| Toolbar - Cancel Button | |
| Toolbar - Create Button | Die Erstellen-Schaltfläche in einer Symbolleiste |
| Toolbar - Delete Button | Die Löschen-Schaltfläche in einer Symbolleiste |
| Toolbar - Download Icon Container | |
| Toolbar - Edit Button | Die Bearbeiten-Schaltfläche in einer Symbolleiste |
| Toolbar - Edit, Cancel, Audit & Clear Buttons | |
| Toolbar - Filter Icon Container | |
| Toolbar - Icon Containers | |
| Toolbar - Icons In Toolbar | Schaltflächensymbole in einer Symbolleiste |
| Toolbar - Row Count | Der Zeilenzahl-Anzeigetext |
| Toolbar - Save Button | |
| Toolbar - Search Icon Container | Äußerer Container des Suchsymbols |
| Toolbar - Search Icon in Toolbar | |
| Toolbar - Search Icon in Toolbar - Input | |
| Toolbar - Search Icon (When In Focus) | |
| Toolbar - Search Icon (When Not In Focus) | |
| Toolbar - Search Input Container (In Focus or Has Value) | |
| Toolbar - Search Input (In Focus or Has Value) | |
| Toolbar - Search Input (In Toolbar) | |
| Toolbar - Search X Icon | |
| Toolbar - Secondary Buttons | Sekundäre Schaltflächen in der Symbolleiste |
| Toolbar - Toolbar | Symbolleiste mit Schaltflächen und Steuerelementen auf Panel-Ebene |
| Toolbar - Toolbar Button, Not Last Child | |
| Toolbar - Toolbar Group (First Group) | |
| Toolbar - Toolbar in a Lane Panel | |
| Toolbar - Toolbar in a Tabbed Panel | |
| Toolbar - Toolbar - Pop Up Page | |
| Toolbar - Toolbar Spacer |
Panel - Filter
| Schnittstellenname | Beschreibung |
|---|---|
| Search and Filter - Active Button Group | Die derzeit ausgewählte Schaltfläche für den Filteroperator |
| Search and Filter - Button Group | Schaltflächen zur Auswahl des zu verwendenden Filtertyps |
| Search and Filter - Cancel Filter Button | Die sekundäre Schaltfläche zum Abbrechen des Filters |
| Search and Filter - Filter Button Group | |
| Search and Filter - Filter Field Labels | Die Beschriftungen für jedes Filterfeld |
| Search and Filter - Filter Field Wrapper | |
| Search and Filter - Filter Option (First Button) | |
| Search and Filter - Filter Page - Panel Content | |
| Search and Filter - Filter Page - Panel Header | |
| Search and Filter - Filter Page - Toolbar | |
| Search and Filter - Filter Required | |
| Search and Filter - Filter Required Button | |
| Search and Filter - Filter Required Text | |
| Search and Filter - Filter Tags | |
| Search and Filter - Filter X Icon | |
| Search and Filter - Multiple Filter Line | Dünne Linie, die anzeigt, dass mehrere Werte in demselben Feld verknüpft sind |
| Search and Filter - Run Filter Button | Die Hauptschaltfläche zum Ausführen des Filters |
| Search and Filter - Single Filter Dropdown |
Panel - Single-row Panel
| Schnittstellenname | Beschreibung |
|---|---|
| Content - Metric Panel Form | |
| Content - Panel Content | Der Inhaltscontainer innerhalb eines Single-Row-Panels |
| Content - Panel Form | Das Formular, der Feld-Container der obersten Ebene innerhalb eines Panels, das die Formularanzeige unterstützt |
| Content - Panel Form Outer | |
| Field - Controls (SRPs, Board & Lanes) | |
| Field - Label | Der Titel, der das Feld in einem Formular darstellt |
| Field - Last child control | Äußerer Wrapper des letzten untergeordneten Controls |
| Field - Required Indicator | |
| Field - SRP - Date Picker | |
| Field - SRP - Date Picker Icon | |
| Field - Stacked fields in a form | Feld-Container innerhalb eines Single-Row-Panels und gestapelt |
| Field - Value | Der Anzeigewert des Felds in einem Formular |
Panel - Board and Lane
| Schnittstellenname | Beschreibung |
|---|---|
| Lane - Both Axis - Group - Even Group | Rahmen um jede abwechselnde Gruppe, wird für Streifenmuster verwendet |
| Lane - Both Axis - Group - Group Title | Titel über jeder Spur, die horizontal verlaufen, sowie der Titel der anderen Achse |
| Lane - Both Axis - Group - Lane Group Container | Der Container pro Gruppe auf einer Spur; enthält den Titel und die Kacheln in jeder |
| Lane - Both Axis - Group - Panel Group | Rahmen um jede wiederholte vertikale Gruppe |
| Lane - Both Axis - Group - Vertical Group Title | Gruppentitel, die vertikal verlaufen |
| Link to Page icon | Das Symbol, das zu einer Seite führt |
| Tile - Container | Das enthaltende Kachel-Element eines gekachelten Paneltyps |
| Tile - Content | Der Inhalt jeder Kachel, der Container der Formularsteuerelemente; verwenden Sie dies, um die Ausrichtung von Feldern zu beeinflussen |
| Tile - Content in a Lane Panel | |
| Tile - Filler | Ein Füller-Element, das sicherstellt, dass umgebrochene Boards linksbündig ausgerichtet sind. Blenden Sie diese aus, um sie zu zentrieren, zusammen mit justify-content: center |
| Tile - Lane Title | Die Überschrift über Spuren oder Gruppen von Kacheln |
| Tile - Selected | Das enthaltende Kachel-Element eines gekachelten Paneltyps, wenn aktiv |
| Tile - Tile Panel Container | Der unmittelbare Container, der alle Kacheln umhüllt |
| Tile - Value | Felder innerhalb eines Boards |
Panel - Multi-row
| Schnittstellenname | Beschreibung |
|---|---|
| Field - Audit Icon | |
| Field - Checkbox Control | |
| Field - Dithered Field | |
| Field - Grouped On | Zellenwerte, die beim Verwenden von Gruppieren ausgeblendet werden |
| Field - Icons In MRP | |
| Field - Link To Page Icon | |
| Field - Load More Rows Button - Icon | |
| Field - MRP Auto Edit | Automatisch bearbeitbare Felder in einem Multi-Row-Panel |
| Field - MRP Dropdown Container | |
| Field - MRP Excel Mode | Excel-Modus-Felder, die in Multi-Row-Panels angezeigt werden |
| Field - MRP Excel Mode List | |
| Field - MRP Excel Mode List - After | |
| Field - Selected Row - Control | |
Field - Table Header - <th> |
|
| Field - Trash & Remove Icon | |
| Field - Value | Feld in einem MRP |
| Field - Vinyl Custom Font Icons | |
| Header - Colgroup Col | |
| Header - Colgroup Col Spacers | |
| Header - Container | Spaltenüberschriftzeile in einem Datengitter |
| Header - Control Group | Gruppierte Spalten in einem Datengitter |
| Header - Control Group Label | Die Beschriftung über jeder Steuerelementgruppe |
| Header - Label | Jede Spaltenüberschriftzelle in einem Datengitter |
| Header - Pinned column area | Der Container für fixierte Spalten |
| Header - Sort Icons | Symbole zum Anzeigen der Sortierung in einem MRP; enthält auch die kleinen Zahlen, die daneben angezeigt werden |
| Row - Add | Die Zeile zum Hinzufügen, die beim Einfügen in ein Multi-Row-Panel angezeigt wird |
| Row - Button | Schaltflächen in einem Multi-Row-Panel |
| Row - Button Icon | Symbole in Schaltflächen in einem Multi-Row-Panel |
| Row - Cells | Zellen in einem Multi-Row-Panel |
| Row - Cells with Icons | |
| Row - Empty Column Spacers | |
| Row - Even | Jede gerade Zeile in einem Datengitter |
| Row - Footer - Spacer Row | Zeile zum Bereitstellen von Abstände zu einem MRP; wird auch verwendet, um Text anzuzeigen, der anzeigt, dass keine Daten vorhanden sind. Legen Sie die Deckkraft auf 1 fest, um sie anzuzeigen |
| Row - Footer - Spacer Row Text | Tatsächlicher Text im MRP angezeigt. Legen Sie „Inhalt" fest, um Ihre Nachricht anzupassen |
| Row - Footer - Spacer Row Text Container | Text-DIV, das die Meldung „Keine Ergebnisse gefunden" anzeigt |
Row - Footer <td> |
|
| Row - Icons | Symbole in Multi-Row-Panels |
| Row - Load more rows button | Die Schaltfläche, die angezeigt wird, wenn mehr Zeilen geladen werden können |
| Row - Load More Rows Button Container | |
| Row - MRP Panel Container | |
| Row - MRP Panel Content | |
| Row - New Window Icon | |
| Row - Odd | Jede ungerade Zeile in einem Datengitter |
| Row - Row | Die Zeile |
| Row - Row hover, target cell | Zielt auf Zeilenzellen ab, wenn nicht aktive Zeile und nur beim Hover |
| Row - Selected | Die derzeit hervorgehobene Zeile in Datengittern |
| Row - Total | Die Gesamtzelle eines Datengitters |
Panel - Diagramm
| Schnittstellenname | Beschreibung |
|---|---|
| Chart Colors - Color 1 | Die erste Reihe in einem Diagramm |
| Chart Colors - Color 2 | Die zweite Reihe in einem Diagramm |
| Chart Colors - Color 3 | Die dritte Reihe in einem Diagramm |
| Chart Colors - Color 4 | Die vierte Reihe in einem Diagramm |
| Chart Colors - Color 5 | Die fünfte Reihe in einem Diagramm |
| Chart Colors - Color 6 | Die sechste Reihe in einem Diagramm |
| Chart Colors - Color 7 | Die siebte Reihe in einem Diagramm |
| Chart Colors - Color 8 | Die achte Reihe in einem Diagramm |
| Chart Colors - Color 9 | Die neunte Reihe in einem Diagramm |
| Chart Colors - Color 10 | Die zehnte Reihe in einem Diagramm |
| Chart Colors - Text Color | Der Text, der in verschiedenen Teilen eines Diagramms angezeigt wird |
| Misc - Flags | Die Flaggen in einem Diagramm |
| Misc - Selected | Die hervorgehobene Diagrammfarbe |
| Network chart - Highlight | Hervorgehobener Zustand in einem Netzwerkdiagramm. Nur Hintergrundfarbe und Rahmenfarbe festlegen |
| Network chart - Node | Knoten in einem Netzwerkdiagramm. Nur Hintergrundfarbe und Rahmenfarbe festlegen |
| Network chart - Text | Text auf Knoten in einem Netzwerkdiagramm. Nur Schriftfarbe festlegen |
Panel - Kalender
| Schnittstellenname | Beschreibung |
|---|---|
| Container - Button | Schaltflächen in der Kalendersymbolleiste |
| Container - Button - Active | Aktive oder ausgewählte Schaltfläche in der Kalendersymbolleiste |
| Container - Cells | Kalenderzellen, einschließlich Wochentagen und Überschriften |
| Container - Container | Die Tage in einem Kalender |
| Container - Date Numbers | |
| Container - Day Heading | Tabellenspaltenkopfzeilen für Wochentage |
| Container - Title | Der große Titel oben im Kalender |
| Container - Toolbar | Die Kalendersymbolleiste |
| Event - Container | Das Ereignisfeld in einem Kalender |
| Event - Selected | Das hervorgehobene Ereignisfeld in einem Kalender |
| Today's Date - Container | Das gesamte Feld für das heutige Datum |
| Today's Date - Day | Der Zahlenteil des heutigen Datums |
| Today's Date - Selected | Der ausgewählte Tag des Monats |
Gruppe
| Schnittstellenname | Beschreibung |
|---|---|
| Group - Content in Tabbed Panel Group | Die direkten Kinder einer Tabbedgruppe (in der Regel Panel) |
| Group - Panel Groups | Alle Gruppen auf Seitenebene |
| Group - Scrolled Panel Groups | Gruppen, die gescrollt werden; sie erhalten Flex zur Selbstverwaltung des Renderings ihrer Kinder |
| Group - Tabbed Group Header | |
| Group - Tabbed Group Title | |
| Group - Tabbed Panel Group | Die Gruppe im Tabbedmodus |
| Tab - Tab | |
| Tab - Tab - Active | |
| Tab - Tab - First | |
| Tab - Tab - Inner Container | |
| Tab - Tab - Last | |
| Tab - Tab - Outer Container |
Panel - Agent Chat
| Schnittstellenname | Beschreibung |
|---|---|
| Global Layout - Chat Panel Root Container | |
| Global Layout - Panel Content Loading State | |
| Global Layout - Panel Content Wrapper | |
| Main Window - Main Chat Area Container | |
| Main Window - Header - Hamburger Menu Button | |
| Main Window - Header - Header Agent Image | |
| Main Window - Header - Header Agent Selector Wrapper | |
| Main Window - Header - Header Icon Wrapper | |
| Main Window - Header - Header New Chat Button | |
| Main Window - Header - Top Header Bar | |
| Main Window - Input Area - Attach Button | |
| Main Window - Input Area - Input Icon Buttons (Base) | |
| Main Window - Input Area - Input Section Wrapper | |
| Main Window - Input Area - Input Textarea | |
| Main Window - Input Area - Input Textarea (Placeholder) | |
| Main Window - Input Area - Pill Input Box | |
| Main Window - Input Area - Send Button | |
| Main Window - Messages - AI Avatar Icon | |
| Main Window - Messages - Assistant Message Bubble | |
| Main Window - Messages - Local Message Bubble Modifier | |
| Main Window - Messages - Markdown Content Wrapper | |
| Main Window - Messages - Markdown Inline Code | |
| Main Window - Messages - Markdown Pre-formatted Code Block | |
| Main Window - Messages - Markdown Table | |
| Main Window - Messages - Message Scroll Container | |
| Main Window - Messages - Polling Indicator | |
| Main Window - Messages - User Message Bubble | |
| Sidebar - Mobile Close Button | |
| Sidebar - Sidebar Container | |
| Sidebar - Sidebar Container (Mobile Open State) | |
| Sidebar - Lists & Items - Agent/History Icon Box | |
| Sidebar - Lists & Items - Agent Item Row (Specific) | |
| Sidebar - Lists & Items - Agent List Container | |
| Sidebar - Lists & Items - History Agent Icon (Specific) | |
| Sidebar - Lists & Items - History Delete Button | |
| Sidebar - Lists & Items - History Item Row (Specific) | |
| Sidebar - Lists & Items - History Item Text Label | |
| Sidebar - Lists & Items - List Item Rows | |
| Sidebar - Lists & Items - List Item Rows (Active) | |
| Sidebar - Lists & Items - Sidebar Image Icons Fallback | |
| Sidebar - Sections & Headers - Empty History State | |
| Sidebar - Sections & Headers - History Group Label | |
| Sidebar - Sections & Headers - Section Header Container | |
| Sidebar - Sections & Headers - Section Header Icon | |
| Sidebar - Sections & Headers - Section Header Title | |
| Sidebar - Sections & Headers - Section Wrappers | |
| Sidebar - Sections & Headers - Section Wrappers (Scrollable) | |
| Sidebar - Top Actions - New Chat Button | |
| Sidebar - Top Actions - New Chat Row Container |
Steuerelement-Container
| Schnittstellenname | Beschreibung |
|---|---|
Akkordeon - Akkordeon-Pfeilsymbol <img> |
|
| Akkordeon - Akkordeon-Symbol | |
| Akkordeon - Akkordeon-Element | |
| Akkordeon - Container | Steuerelement-Container für alle inneren Feldgruppen |
| Akkordeon - Container - Nur untergeordnet | Gleich wie Container, aber nur für das untergeordnete Element des Elements, das das Design erhält |
| Akkordeon - Steuerelementgruppe | Die Steuerelementgruppen, die unter dem Akkordeon-Titel angezeigt werden |
| Akkordeon - Steuerelementgruppe mit Rahmen | |
| Akkordeon - Steuerelement im offenen Titel | |
| Akkordeon - Feldgruppe direkt im Akkordeon | |
| Akkordeon - Erstes Akkordeon-Element | |
| Akkordeon - Titel | Der anklickbare Titelbereich des Akkordeons mit Beschriftung und Schließsymbol |
| Akkordeon - Titel - Offen | Der Titelbereich eines Akkordeons, wenn geöffnet |
| Feldgruppe - Container | Fieldset-Container mit Formularsteuerelementen |
| Feldgruppe - Container mit verborgenem Rahmen | Feldgruppen-Container mit verstecktem Rahmen |
| Feldgruppe - Steuerelement-Container in Feldgruppen | |
| Feldgruppe - Steuerelemente in einer Steuerelementgruppe - innerhalb | Für die Verwendung mit einer Steuerelementgruppe wird das erste Element im äußeren Wrapper angeordnet |
| Feldgruppe - Geschlossene Steuerelementgruppe | Geschlossene Steuerelementgruppen |
| Feldgruppe - Feldgruppen-Beschriftung (Rahmen sichtbar) | |
| Feldgruppe - Erstes Container-untergeordnetes Element | Das erste Element in einem Container |
| Feldgruppe - Gruppe: Beschriftung erweitern: Gestapelte Beschriftungsposition | Beschriftungen einer erweiterten Steuerelementgruppe, wenn der übergeordnete Container gestapelte Beschriftungen aufweist |
| Feldgruppe - Gruppe mit sichtbarem Rahmen | Steuerelementgruppe mit sichtbarem Rahmen |
| Feldgruppe - Hervorgehobene Zeile | Wählt alle Zellen nach diesem Feld aus |
| Feldgruppe - Beschriftung | Der Legend-Teil des Fieldset-Containers |
| Feldgruppe - Beschriftung (Rahmen sichtbar) | |
| Feldgruppe - Beschriftung in Steuerelementgruppe mit sichtbarem Rahmen | |
| Feldgruppe - SBS-Feldcontainer-Wrapper | |
| Feldgruppe - SBS-Feldcontainer-Wrapper einmal | |
| Feldgruppe - SBS-Beschriftungen | |
| Feldgruppe - Gestapelte Feldgruppe Nebeneinander-Beschriftung (Fehlerbehebung) | |
| Feldgruppe - Gestapelter innerer Container | Das innere Element einer gestapelten Feldgruppe |
| Feldgruppe - Gestapelter innerer Container-untergeordnete Elemente | |
| Feldgruppe - Oberste Steuerelementgruppe | |
| Registerkartenleiste - Anklickbarer Registerkartencontainer | Der Bereich, der die anklickbaren Registerkarten enthält |
| Registerkartenleiste - Container | Steuerelement-Container für die Registerkarten und die Feldgruppen darin |
| Registerkartenleiste - Steuerelementgruppe | Die Steuerelementgruppe in einem Satz von Registerkarten |
| Registerkartenleiste - Feldgruppe direkt in Registerkarten | |
| Registerkartenleiste - Offen | Die offene Registerkarte |
| Registerkartenleiste - Registerkarte | Alle Registerkarten in einem Satz von Registerkarten |
| Registerkartenleiste - Registerkartenzeile | Zeilenelement unter Registerkarten |
Steuerelemente
| Schnittstellenname | Beschreibung |
|---|---|
| Badge - Badge | Das Badge-Element, das sich an andere Steuerelemente anfügt |
| Schaltfläche - Aktiver Link zur Seite - Schaltfläche | |
| Schaltfläche - Aktivitätsindikator | Das Spinnerelement, das verwendet wird, um Aktivität anzuzeigen |
| Schaltfläche - Aktivitätsindikator - Symbol | Das rotierende Symbol, das verwendet wird, um Aktivität anzuzeigen |
| Schaltfläche - Aktivitätsindikator - Symbol [Deaktiviert] | Spinner-Symbol auf einer Schaltfläche, die auch deaktiviert ist; könnte sich in einem laufenden Zustand befinden |
| Schaltfläche - App-Menü - Aktiver Link zur Seite - Schaltfläche | |
| Schaltfläche - App-Menü - Link zur Seite - Schaltfläche | |
| Schaltfläche - App-Menü - Link zur Seite - Symbol | |
| Schaltfläche - Schaltfläche | Schaltflächen auf einem Panel |
| Schaltfläche - Schaltflächencontainer | Wrapper um eine Schaltfläche, nicht die Schaltfläche selbst |
| Schaltfläche - Schaltflächensteuerelement | Selektor für Schaltflächen, aber in Vinyl können Schaltflächen ein BUTTON oder ein <A>-Tag sein |
| Schaltfläche - Schaltflächenabstand-Abstände | Zusätzlich zur Basis-Icon-Klasse fügen Schaltflächen Abstände hinzu, wenn die Beschriftung sichtbar ist (nicht ein Leerzeichen) |
| Schaltfläche - Schaltflächen in einer SBS-Gruppe | |
| Schaltfläche - Schaltflächen in einer SBS-Gruppe (außer erste) | |
| Schaltfläche - Schaltflächen in einer SBS-Gruppe (außer letzte) | |
| Schaltfläche - Schaltfläche mit Symbol - Beschriftung verborgen | |
| Schaltfläche - Deaktivierte Schaltflächen | Wählen Sie Schaltflächen aus, die speziell deaktiviert sind |
| Schaltfläche - Symbol | Symbole auf Schaltflächen |
| Schaltfläche - Symbol - Beschriftung verborgen | Symbol in einer Schaltfläche, wenn die Beschriftung verborgen ist |
| Schaltfläche - Beschriftung | Die Textbeschriftung einer Schaltfläche |
| Schaltfläche - Große Schaltfläche | Große Schaltflächen auf einem Panel |
| Schaltfläche - Symbol für große Schaltfläche | Symbole auf großen Schaltflächen |
| Schaltfläche - Große Unter-Typ-Schaltfläche | Dieser Bereich ist für Schaltflächen mit einem großen Unter-Typ (gilt derzeit nur für Inline-Menüs) |
| Schaltfläche - Primäre Schaltflächen | Die Hauptschaltfläche auf einem Panel; normalerweise durchgehend gefärbt |
| Schaltfläche - Sekundäre Schaltflächen | Weniger auffällige Schaltflächen für sekundäre Aktionen |
| Schaltfläche - SRP - Schaltfläche | |
| Schaltflächengruppe - Aktive Schaltfläche | Die aktuell ausgewählte Schaltfläche |
| Schaltflächengruppe - Symbol der aktiven Schaltfläche | Das Symbol der aktuell ausgewählten Schaltfläche |
| Schaltflächengruppe - Aktive Schaltfläche (nicht vom Benutzer wählbar) | Die aktuell ausgewählte Schaltfläche, wenn sie nicht vom Benutzer wählbar ist |
| Schaltflächengruppe - Schaltfläche | Jede Schaltfläche in einer Gruppe. Verwenden Sie flex: auto, um zu ändern, wie die Schaltflächen umgebrochen werden |
| Schaltflächengruppe - Erforderlicher Indikator für Schaltflächengruppe | |
| Schaltflächengruppe - Schaltfläche (nicht vom Benutzer wählbar) | Jede Schaltfläche in einer Gruppe. Verwenden Sie flex: auto, um zu ändern, wie die Schaltflächen umgebrochen werden, wenn sie nicht vom Benutzer wählbar sind |
| Schaltflächengruppe - Container | Der äußere Container um einen Satz von Schaltflächen |
| Schaltflächengruppe - Symbole | Symbole in einer Schaltflächengruppe |
| Schaltflächengruppe - Beschriftung | Beschriftungstext in einer Schaltflächengruppe |
| Schaltflächengruppe - Beschriftung (nicht vom Benutzer wählbar) | Beschriftungstext in einer Schaltflächengruppe, wenn nicht vom Benutzer wählbar |
| Schaltflächengruppe - Lade-Schaltflächen | 3 Schaltflächen, die angezeigt werden, wenn die Schaltflächengruppe ihre Daten lädt |
| Schaltflächengruppe - Platzhalter | Ein Element, das verhindert, dass die letzte Zeile einer Schaltflächengruppe den gesamten verfügbaren Platz ausfüllt |
| Felder - Zusätzliche Feldcontainer | Zusätzlicher Formularfeld-Inhalt, z. B. Listenfeld-Optionen |
| Felder - A.I. Expertenmodus | |
| Felder - A.I. Anfängermodus | |
| Felder - Alle Feldsteuerelemente - Legacy | |
| Felder - Felder immer bearbeiten | |
| Felder - App-Menü - Feldwert | |
Felder - Autovervollständigungs-Felder <ul> |
|
| Felder - Automatische Bearbeitung | Der Hover-Effekt über einem Auto-Edit-Feld |
| Felder - Automatische Bearbeitung - Kontrollkästchen | |
| Felder - Automatische Bearbeitung inaktiv | |
| Felder - Automatische Bearbeitung (nicht Kontrollkästchen) | |
| Felder - Chat versteckte Daten | |
| Felder - Kontrollkästchen-Steuerelement | |
| Felder - Kontrollkästchen-Steuerelement-Container (alle Zustände) | |
Felder - Kontrollkästchen <img> |
|
| Felder - Kontrollkästchen-Typ-Steuerelement | |
| Felder - Kontrollkästchen-Typ-Steuerelement - Kontrollkästchen | |
| Felder - Kontrollkästchen-Typ-Steuerelement - Beschriftung | |
| Felder - Schaltfläche "Wert löschen" | Schaltfläche, die den Wert aus einem Feld löscht |
| Felder - Symbol "Wert löschen" | Symbol, das in der Schaltfläche verwendet wird, die den Wert aus einem Feld löscht |
| Felder - Farbwähler | Die Anzeige des Farbwähler-Elements |
| Felder - Steuerelement nachher | |
| Felder - Steuerelement-Container innerhalb einer SBS-Gruppe | |
| Felder - Steuerelement-Hover-Effekt nachher | Mousover über ein Steuerelement, das das :after beeinflusst |
| Felder - Steuerelemente in einer SBS-Gruppe (außer erste) | |
| Felder - Steuerelemente in einer SBS-Gruppe (außer letzte) | Steuerelemente in dieser spezifischen Steuerelementgruppe, außer dem letzten |
| Felder - Steuerelemente mit nebeneinander angeordneten Beschriftungen | Alle Feldsteuerelement-Typen, der Bereich, der den Wert im Ansichtszustand enthält und das Eingabesteuerelement während der Bearbeitung |
| Felder - Steuerelement innerhalb einer SBS-Gruppe (alle) | |
| Felder - Steuerelement mit nebeneinander angeordneter Beschriftung (Container) | |
| Felder - Datumswähler aktiver Tag | |
| Felder - Datumswähler-Widget-Pfeil | |
| Felder - Datumswähler-Widget-Container | |
| Felder - Datumswähler-Widget-Tag | |
| Felder - Datumswähler-Widget-Schaltflächen oben | |
| Felder - Deaktiviertes Feld | |
| Felder - Dropdown-Pfeil | Der Pfeil auf der rechten Seite eines Dropdown-Felds |
| Felder - Dropdown-Pfeil-Inhalt | Das Pfeilsymbol auf der rechten Seite eines Dropdown-Felds |
| Felder - Dropdown-Container | |
| Felder - Dropdown-Element | Ein Element in einer Dropdown-Liste |
| Felder - Dropdown-Element (nicht vom Benutzer wählbar) | Ein Element in einer Dropdown-Liste, wenn nicht vom Benutzer wählbar |
| Felder - Dropdown nicht ausgewählt | |
| Felder - Bearbeitungszustand | Formularelemente auf der Seite |
| Felder - Bearbeitungszustand in Gebrauch | Formularelemente auf der Seite, wenn fokussiert oder anderweitig aktiv |
| Felder - Eingebettetes Video | |
| Felder - Geschlossenes Steuerelement | |
| Felder - Geschlossener Steuerelement-Container | |
| Felder - Geschlossene Steuerelement-Beschriftung | |
| Felder - Geschlossenes statisches Feld | |
| Felder - Geschlossener HTML-Editor | |
| Felder - Excel-Modus | Der Hover-Effekt über einem Excel-Modus-Feld |
| Felder - Excel-Modus - Kontrollkästchen | Kontrollkästchen bei Verwendung des Excel-Modus |
| Felder - Excel-Modus - Kontrollkästchen-Bild | Bild in einem Kontrollkästchen im Excel-Modus |
| Felder - Excel-Modus - Liste | Listen bei Verwendung des Excel-Modus |
| Felder - Excel-Modus - Liste (nachher) | |
| Felder - Feldcontainer | Feldcontainer für alle Typen |
| Felder - Dateisteuerelement | Das äußere Container des Dateisteuerelements |
| Felder - Dateisteuerelement - Schaltflächen-Div | |
| Felder - Dateisteuerelement - Schaltflächensymbol | |
| Felder - Dateisteuerelement - Schaltflächensymbol davor | |
| Felder - Dateisteuerelement - Dateinameneingabe | Dateinameneingabefeld des Dateisteuerelements nur |
| Felder - Dateisteuerelement - Dateigröße-Text | Dateigrößentext auf einem Dateisteuerelement im Bearbeitungszustand |
| Felder - Dateisteuerelement - Schaltfläche entfernen | Schaltfläche "Entfernen" des Dateisteuerelements nur |
| Felder - Dateityp-Steuerelement - Dateidownload-Schaltfläche | |
| Felder - Dateityp-Steuerelement - Dateidownload-Schaltflächensymbol | |
| Felder - Fokus-Elemente | |
| Felder - Formularsteuerelement | Formularsteuerelement |
| Felder - Allgemeine Formularfelder | All-in-One-Selektor zum Bearbeiten der Größe von Formularfeldern |
| Felder - HTML-Editor | |
| Felder - HTML-Editor-Container | |
| Felder - HTML-Editor - innerer Container | |
| Felder - HTML-Typ-Steuerelement | |
| Felder - Bildsteuerelement | |
Felder - Bildsteuerelement - <img> |
IMG-Tags in einem Fotobilder-Steuerelement |
| Felder - Bild mit Fotovorteil | |
| Felder - Inline-Menü - äußerer Container für Schaltflächen | |
| Felder - innerer Wrapper | Das erste Element in einem Steuerelement; sparsam verwenden |
| Felder - Eingabe - Beschriftung innen | |
| Felder - Beschriftung innen | Die Beschriftung innerhalb eines Eingabefelds |
| Felder - Listenfeld-Pfeil | |
| Felder - Listenfeld-Pfeil (Steuerelement mit innerer Beschriftung) | |
| Felder - Listenfeld-Steuerelement | |
| Felder - Metrik-Panel-Feld | |
| Felder - Metrik-Panel-Feldbeschriftung | |
| Felder - Metrik-Panel-Feldwert | |
| Felder - Weitere Header-Schaltfläche | |
| Felder - Nicht bearbeitbar | Alle nicht bearbeitbaren Textwerte aus einer Datenquelle |
| Felder - Nicht bearbeitbare Felder (nicht MRP oder Automatische Bearbeitung) | |
| Felder - Nicht aktuell bearbeitbar | Felder, die bearbeitet werden könnten, wenn Sie in den Bearbeitungsmodus wechseln |
| Felder - äußerer Steuerelement-Container | |
| Felder - äußerer Steuerelement-Selektor | Äußerster Wrapper, der von Designs verwendet werden kann |
| Felder - äußerer Wrapper | Das oberste Element, das mit bedingten Designs verwendet werden kann |
| Felder - Schreibgeschütztes Feld - Ansichtszustand | Felder im Ansichtszustand, die aufgrund des Steuerelement-Zustands nicht in den Bearbeitungsmodus wechseln können |
| Felder - Erforderliches Sternchen | Ein Sternchen neben der Beschriftung eines Steuerelements, das anzeigt, dass das Feld erforderlich ist |
| Felder - Erforderlicher Indikator | Das kleine Farbenelement, das anzeigt, dass ein Feld erforderlich ist |
| Felder - Erforderlicher Indikator - Beschriftung innen | |
| Felder - Rechts ausgerichtetes Steuerelement in einer SBS-Gruppe | |
| Felder - Regel-Generator-Container | |
| Felder - Ausgewählt | Verschiedene hervorgehobene Datenelemente, z. B. Listen oder Tage in einem Datums-Panel |
| Felder - Nebeneinander angeordnete Beschriftung in einer gestapelten Feldgruppe | |
| Felder - SRP - Immer bearbeiten | |
| Felder - SRP - Immer bearbeiten - Liste | |
| Felder - SRP - Automatische Bearbeitung | |
| Felder - SRP - Farbwähler in Gebrauch | |
| Felder - SRP - Dropdown-Pfeil | Der Pfeil auf der rechten Seite eines Dropdown-Felds nur für Single Row Panels |
| Felder - SRP - Dropdown-Pfeil-Inhalt | Das Pfeilsymbol auf der rechten Seite eines Dropdown-Felds nur für Single Row Panels |
| Felder - SRP - Dropdown-Container | |
| Felder - SRP - Dropdown nicht ausgewählt | |
| Felder - SRP - Bearbeitungszustand | |
| Felder - SRP - Bearbeitungszustand-Container | |
| Felder - SRP - Bearbeitungszustand in Gebrauch | |
| Felder - SRP - Bearbeitungszustand-Liste (Einfügen erlauben) | |
| Felder - SRP - Excel-Modus - Liste (nachher) | Excel-Modus-Liste (:after CSS-Selektor) |
| Felder - SRP - Datei-Schaltfläche | |
| Felder - SRP - Datei-Eingabe-Symbol | |
| Felder - SRP - Formularsteuerelement | |
| Felder - SRP - Eingabegruppe | |
| Felder - SRP - Textarea | |
| Felder - Gestapeltes Steuerelement in einer SBS-Gruppe | |
| Felder - Gestapeltes Steuerelement in einer gestapelten Gruppe | |
| Felder - Gestapeltes Steuerelement in gestapelter Gruppe (nicht erste) | |
| Felder - Gestapelte Steuerelement-Beschriftung | |
| Felder - Gestapelte Steuerelement-Beschriftung - mittig ausgerichtet | |
| Felder - Gestapeltes Steuerelement (Abstand-Fehlerbehebung) | |
| Felder - Gestapeltes Feld mit verborgener Beschriftung | |
| Felder - Gestapeltes Layout, Beschriftung in SBS, Div in SBS (Fehlerbehebung) | |
| Felder - Tags - Einzelnes Tag | |
| Felder - Tags - Tag-Gruppen-Container | |
| Felder - Tags - Text im Tag | |
| Felder - Textarea-Steuerelement | |
| Felder - Textlinks | |
| Felder - Ansichtszustand-Steuerelement | Legacy-Format-Selektor; erfasst die Ansichtszustand-Version eines Steuerelements |
| Hilfe - Symbol neben Schaltfläche mit Hilfe | Das Symbol neben einer Schaltfläche mit Hilftext zum Anzeigen |
| Hilfe - Symbol neben Beschriftung mit Hilfe | Eine Beschriftung mit Hilftext zum Anzeigen |
| Hilfe - Tooltip-Container | Das Pop-up-Tooltip, das angezeigt wird, um Hilfe anzuzeigen |
| Symbol-Felder - Symbol-Felder | Symbol-Feldsteuerelement-Typen |
| Symbol-Felder - Bild mit Symbol-Vorteil | |
| Symbol-Felder - Verlinkte Symbol-Felder | |
| Symbol-Felder - Listensymbole | Listenfelder mit Symbolen (nur der Symbol-Teil) |
| Symbol-Felder - SRP - Symbol-Container | |
| Liniensteuerelement - Liniensteuerelement | Liniensteuerelement, das verwendet wird, um Inhalte auf einem Panel zu unterteilen |
| Links - Aktiver Link zur Seite (Feld) | Das Steuerelement, das auf die aktuell aktive Seite verlinkt |
| Links - Chevron | Das Chevron, das nach einem Hyperlink angezeigt wird |
| Links - Container | Links überall in der Anwendung |
| Links - Link-Farbe-Außerkraftsetzung (Symbole in der Symbolleiste) | |
| Fortschrittsbalken - Fortschrittsbalken - gefüllt | Fortschrittsbalken-Element (gefüllt) |
| Fortschrittsbalken - Fortschrittsbalken - außen | Äußeres Element um den gefüllten Teil eines Fortschrittsbalkens |
| Radio - Ladentext | Text, der angezeigt wird, während ein Radio seine Steuerelemente lädt |
| Radio - Radio-Gruppe | Äußerer Container für mehrere Radioschalter-Elemente |
| Radio - Radio-Element | Jedes Radio-Element, einschließlich des Schalters und seines Titels |
| Radio - Radioschalter-Element | Der kreisförmige Radioschalter selbst |
| Radio - Radioschalter-Element (nicht vom Benutzer wählbar) | Der kreisförmige Radioschalter selbst, wenn nicht vom Benutzer wählbar |
| Radio - Radio-Element-Bild | Das Symbol pro Radioschalter-Element |
| Radio - Radio-Element (nicht vom Benutzer wählbar) | Jedes Radio-Element, einschließlich des Schalters und seines Titels, wenn nicht vom Benutzer wählbar |
| Radio - Radio-Element ausgewählt | Das aktuell ausgewählte Radio-Element |
| Radio - Radio-Element ausgewählt - Bild | Das Bild eines Radio-Elements, wenn ausgewählt |
| Radio - Radio-Element ausgewählt - Titel | Titel des ausgewählten Radio-Elements |
| Radio - Radio-Element-Text | Der Container für den Text jedes Radio-Elements |
| Radio - Radio-Element-Text (nicht vom Benutzer wählbar) | Der Container für den Text jedes Radio-Elements, wenn nicht vom Benutzer wählbar |
| Radio - Radio-Element - Titel | Titel des Radio-Elements |
| Radio - Radio-Untertitel | Der kleine Text, der unter dem Titel angezeigt wird |
| Leer-Steuerelement - Leer-Steuerelement | Leer-Steuerelemente, die verwendet werden, um Inhalte auf einem Panel zu verteilen |
Validierungen
| Schnittstellenname | Beschreibung |
|---|---|
| Validierungen - Schaltflächen | Schaltflächen wie „Fortfahren" und „Abbrechen" |
| Validierungen - Schaltflächen - Abbrechen | Die Schaltfläche „Abbrechen" in einem Validierungselement |
| Validierungen - Schaltflächen - Fortfahren | Die Schaltfläche „Fortfahren" in einer Validierung |
| Validierungen - Bestätigung | Bestätigungsaufforderungen für Ereignisse wie Löschen |
| Validierungen - Leere Spans | |
| Validierungen - Fehler | Validierungsergebnisse vom Typ Fehler |
| Validierungen - Ereigniscontainer | |
| Validierungen - Ausnahme | App Builder-Ausnahmen, die am unteren Bildschirmrand angezeigt werden |
| Validierungen - Information | Validierungsergebnisse vom Typ Information |
| Validierungen - Container für Inline-Validierungsaktionen | |
| Validierungen - Inline-Validierungscontainer | |
| Validierungen - Äußerer Inline-Validierungscontainer | |
| Validierungen - Validierung für einzelne Zeile | Meldungen, die bei Paneelereignissen angezeigt werden |
| Validierungen - Erfolg | |
| Validierungen - Erfolg - Text | |
| Validierungen - Schaltfläche zum Schließen der Validierung | |
| Validierungen - Validierungscontainer | |
| Validierungen - Validierungsmeldungs-Text-Spans | |
| Validierungen - Warnung | Validierungsergebnisse vom Typ Warnung |
Anmeldeformular
| Schnittstellenname | Beschreibung |
|---|---|
| Anmeldung-Logo - Symbol in Formularfeldern | |
| Anmeldung-Logo - Symbol in Formularfeldern - Passwort (Vorher) | |
| Anmeldung-Logo - Symbol in Formularfeldern - Benutzer (Vorher) | |
| Anmeldung-Logo - Jitterbit-Anmeldungslogo | |
| Anmeldung-Logo - Container für Anmeldeformular-Schaltfläche | |
| Anmeldung-Logo - Container für Anmeldeformular | |
| Anmeldung-Logo - Kopfzeile des Anmeldeformulars | |
| Anmeldung-Logo - Titel der Kopfzeile des Anmeldeformulars | |
| Anmeldung-Logo - Titel der Kopfzeile des Anmeldeformulars (Nachher) | |
| Anmeldung-Logo - Titel der Kopfzeile des Anmeldeformulars (Nachher, einzelner Anbieter) | |
| Anmeldung-Logo - Titel der Kopfzeile des Anmeldeformulars (Nachher, wenn erweitert) | |
| Anmeldung-Logo - Titel der Kopfzeile des Anmeldeformulars (wenn erweitert) | |
| Anmeldung-Logo - Kopfzeile des Anmeldeformulars (wenn erweitert) | |
| Anmeldung-Logo - Anmeldungslogo | Das Logo, das auf der Anmeldeseite angezeigt wird; Hintergrundbild verwenden |
| Anmeldung-Logo - Container für Anmeldeanbieter | |
| Anmeldung-Logo - Container für Anmeldeanbieter (wenn erweitert) |
Referenz für Stiltypen (Werttypen)
| Werttyp-Name | Eingabebeschreibung | Hilfetext |
|---|---|---|
| Erweiterte Stile | Legen Sie erweiterte CSS-Werte für Position, Inhalt und z-index fest | |
| Ausrichtung | Legen Sie die Ausrichtung für verschiedene Elemente in einem angegebenen Bereich fest | Value1 gibt die vertikale Ausrichtung eines Inline-Containers an, zum Beispiel: middle. Value2 wird verwendet, um die horizontale Ausrichtung von Text festzulegen, zum Beispiel: center. |
| Animation | Geben Sie Animationen oder Übergangsstile an | |
| Hintergrund erweitert | Legen Sie Werte für alle hintergrundbezogenen Optionen fest | Value1 stellt die Hintergrund-Kurzschrift dar. Damit können Sie alle Hintergrundoptionen auf einmal angeben. Value2 ist die background-size-Eigenschaft. |
| Hintergrundfarbe | Legen Sie die Hintergrundfarbe für Elemente fest, indem Sie Farbwertinformationen angeben | Value1 wird für die Hintergrundfarbe verwendet. Kann ein HTML-Code sein oder {PrimaryColor} verwenden, um zum Beispiel die Farbe des Designs zu verwenden. |
| Hintergrundverlauf | Legen Sie Hintergrundverlaufsinformationen für ein Element fest, indem Sie eine Anfangsfarbe, eine Endfarbe und eine Rahmenfarbe angeben | Value1 und 2 werden für die To- und From-Farben verwendet. Value3 ist für die Rahmenfarbe. |
| Hintergrundbild | Geben Sie ein Hintergrundbild an, das als Hintergrund eines Elements angezeigt werden soll, und legen Sie Größeninformationen für das Bild fest | Value1 ist entweder eine URL oder ein Base64-codiertes Bild. Klicken Sie mit der rechten Maustaste auf ein beliebiges App Builder-Bild und wählen Sie URL kopieren, um in App Builder gehostete Bilder zu verwenden. Value2 wird verwendet, um das Bild entweder zu strecken oder zu wiederholen. Geben Sie zum Strecken cover ein, oder lassen Sie das Feld leer, um das Bild zu wiederholen (zu kacheln). |
| Rahmen | Geben Sie Informationen für den Rahmen eines Elements an, wie Farbcode, benannter Farbwert, Stil und Breite | |
| Rahmenradius | Geben Sie den Kurvenwert des Rahmens eines Elements an | Value1 wird verwendet, um die Ecken eines Elements zu runden. |
| Boxschatten | Geben Sie einen Schatteneffekt auf einem Boxelement an | Value1 stellt die Boxschatten-Werte dar, während Value2 für die Farbe des Schattens verwendet wird. |
| Anzeige | Legen Sie Eigenschaften fest, die beeinflussen, ob das Element angezeigt wird | |
| Erweiterte Flex-Eigenschaften | Legen Sie zusätzliche Flexbox-Optionen fest | |
| Flex-Eigenschaften | Legen Sie Flexbox-Optionen fest | |
| Schriftart | Geben Sie verschiedene Schriftstil-Informationen an, wie Schrifttyp, Größe und wie dick oder dünn (Fettdruck) Zeichen angezeigt werden sollen | Value 1 wird verwendet, um den Schrifttyp für ein Element anzugeben. Verwenden Sie eine durch Kommas getrennte Liste. Beispiel: Calibri, Arial, sans-serif. Value 2 wird verwendet, um die Schriftgröße festzulegen. Die Optionen für Schriftgröße reichen von xx-small bis xx-large. Beispiel: small. Value 3 wird verwendet, um das Schriftgewicht festzulegen, oder wie dick oder dünn Schriftzeichen auf der Seite angezeigt werden. Die Optionen für Schriftgewicht reichen von normal bis bolder. Ein Schriftgewicht von 400 ist identisch mit normal, 700 ist identisch mit bold. Beispiel: bold. |
| Schriftfarbe | Geben Sie einen Farbwert für die in einem Element angezeigte Schrift an | Value1 wird für die Schriftfarbe verwendet. Value2 muss in einem bestimmten Format vorliegen: 0 1px 1px #222. Ändern Sie den Farbcode, um die tatsächliche Farbe zu beeinflussen. |
| Freiformige CSS-Eigenschaften | Geben Sie rohe Freiformige CSS-Eigenschaften ein | |
| Erweiterte Grid-Eigenschaften | Legen Sie zusätzliche Grid-Optionen fest | |
| Höhe und Breite | Legen Sie die Höhe und Breite von Elementen fest | |
| Symbol - Glyphe | Geben Sie ein Glyphen-Symbol an, das über einen Glyphicon-Codewert angezeigt werden soll | Value1 wird für den Glyphicon-Code verwendet. |
| Min/Max-Höhe und -Breite | Legen Sie die Mindest- und Maximalhöhe sowie die Breite von Elementen fest | |
| Positionen | Legen Sie die Position des Elements fest und beeinflussen Sie, wo es in Verbindung mit dem Positionswert platziert wird | |
| Abstände | Geben Sie Abstandswerte für Inhalte an, die in einem Container angezeigt werden | |
| Abstände - Rand | Geben Sie Randwerte für Inhalte an, die in einem Container angezeigt werden | |
| Text erweitert | Legen Sie erweiterte CSS-Werte für Text fest, um die Eigenschaften text-decoration, text-transform und font-style zu definieren |
Value1 legt text-decoration fest, um Unterstrich und andere Eigenschaften hinzuzufügen. Value2 legt text-transform fest, um Text in Großbuchstaben umzuwandeln. Value3 legt font-style fest, um Kursivschrift zu verwenden. |