Komponenten
62 typisierte Vue-Wrapper, einer pro Polaris Web Component, gruppiert wie in der Referenz von Shopify.
Aktionen
- SButton<s-button>Löst eine Aktion aus oder navigiert, mit den Varianten primary, secondary und tertiary, Icons und einem Ladezustand.
- SButtonGroup<s-button-group>Ordnet eine Gruppe zusammengehöriger Buttons gemeinsam an, etwa eine primäre Aktion und ihre sekundären Aktionen.
- SClickable<s-clickable>Macht beliebige Inhalte als Button oder Link klickbar, ohne ein Button-Styling vorzugeben.
- SClickableChip<s-clickable-chip>Ein interaktiver Chip, der angeklickt, als Link geöffnet oder entfernt werden kann, nützlich für Filter und angewendete Tags.
- SLink<s-link>Ein Textlink, der zu einer anderen Seite oder URL navigiert oder einen Befehl ausführt.
- SMenu<s-menu>Eine Liste von Aktionen in einem Overlay, die über einen Button geöffnet wird.
- SPressButton<s-press-button>Ein Umschalt-Button, der gedrückt oder nicht gedrückt bleibt, um einen Modus oder Filter ein- und auszuschalten.
Feedback und Status
- SBadge<s-badge>Ein kleines Label, das den Status eines Objekts anzeigt, etwa einer Bestellung, Zahlung oder Ausführung.
- SBanner<s-banner>Eine auffällige Meldung, die wichtige Informationen, Warnungen oder Fehler oben auf einer Seite oder in einem Abschnitt hervorhebt.
- SEmptyState<s-empty-state>Erklärt, warum eine Ansicht noch keine Inhalte hat, und weist Händler auf die erste Aktion hin.
- SProgress<s-progress>Ein Fortschrittsbalken, der zeigt, wie weit eine Aufgabe in Richtung ihres Maximalwerts fortgeschritten ist.
- SSpinner<s-spinner>Ein animierter Indikator dafür, dass Inhalte oder eine Aktion geladen werden.
Formulare
- SCheckbox<s-checkbox>Eine einzelne Checkbox für eine Ja/Nein-Auswahl, deren checked-Zustand per v-model gebunden wird.
- SChoice<s-choice>Eine Option innerhalb einer Auswahlliste.
- SChoiceList<s-choice-list>Eine Gruppe von Radiobuttons oder Checkboxen zur Auswahl einer oder mehrerer Optionen.
- SColorField<s-color-field>Ein Texteingabefeld für einen Farbwert, optional mit Alphakanal.
- SColorPicker<s-color-picker>Ein visuelles Steuerelement zur Auswahl einer Farbe.
- SDateField<s-date-field>Ein Eingabefeld für ein Datum.
- SDatePicker<s-date-picker>Ein Kalender zur Auswahl eines einzelnen Datums oder eines Datumsbereichs.
- SDropZone<s-drop-zone>Ein Upload-Bereich, der Dateien per Drag & Drop oder über eine Dateiauswahl annimmt.
- SEmailField<s-email-field>Ein Texteingabefeld für E-Mail-Adressen.
- SMoneyField<s-money-field>Ein numerisches Eingabefeld für Geldbeträge.
- SNumberField<s-number-field>Ein numerisches Eingabefeld mit optionalem Minimum, Maximum und Schrittweite.
- SOption<s-option>Eine Option innerhalb eines Selects.
- SOptionGroup<s-option-group>Gruppiert zusammengehörige Optionen innerhalb eines Selects unter einem gemeinsamen Label.
- SPasswordField<s-password-field>Ein Texteingabefeld für Passwörter, das die Eingabe maskiert.
- SSearchField<s-search-field>Ein Texteingabefeld für Suchanfragen.
- SSelect<s-select>Ein Dropdown zur Auswahl einer Option aus einer Liste.
- SSwitch<s-switch>Ein Umschalter, der eine Einstellung ein- oder ausschaltet.
- STextArea<s-text-area>Ein mehrzeiliges Texteingabefeld für längere Inhalte wie Notizen oder Beschreibungen.
- STextField<s-text-field>Ein einzeiliges Texteingabefeld mit Label, Platzhalter, Validierungsfehler und Hilfetext.
- SUrlField<s-url-field>Ein Texteingabefeld für Webadressen.
Layout und Struktur
- SBox<s-box>Ein generischer Container für Padding, Hintergrund, Rahmen, Eckenradius und Größe.
- SDivider<s-divider>Eine horizontale oder vertikale Linie, die Inhalte voneinander trennt.
- SGrid<s-grid>Ein CSS-Grid-Container, der Inhalte in Zeilen und Spalten anordnet.
- SGridItem<s-grid-item>Ein Kindelement eines Grids, das sich über mehrere Spalten oder Zeilen erstrecken kann.
- SListItem<s-list-item>Ein Eintrag in einer geordneten oder ungeordneten Liste.
- SOrderedList<s-ordered-list>Eine nummerierte Liste.
- SPage<s-page>Das Seitenlayout der obersten Ebene, mit Überschrift, Seitenaktionen und Inhaltsbereichen.
- SQueryContainer<s-query-container>Macht ein Element zu einem Size-Container, sodass sich seine Kinder per Container Queries an seine Breite anpassen können.
- SScrollBox<s-scroll-box>Ein Container, der seinen Inhalt scrollt, wenn dieser überläuft.
- SSection<s-section>Gruppiert zusammengehörige Inhalte, optional mit Überschrift, Unterüberschrift und Aktionen.
- SStack<s-stack>Ordnet seine Kinder in einer Zeile oder Spalte mit einheitlichem Abstand und einheitlicher Ausrichtung an.
- STable<s-table>Eine Tabelle für strukturierte Daten, optional mit Paginierung, Ladezustand und Listenlayout auf kleinen Bildschirmen.
- STableBody<s-table-body>Der Body einer Tabelle, der ihre Datenzeilen enthält.
- STableCell<s-table-cell>Eine Zelle in einer Tabellenzeile.
- STableHeader<s-table-header>Eine Spaltenüberschrift in einer Tabelle.
- STableHeaderRow<s-table-header-row>Die Zeile mit den Spaltenüberschriften oben in einer Tabelle.
- STableRow<s-table-row>Eine Datenzeile in einer Tabelle.
- SUnorderedList<s-unordered-list>Eine Aufzählungsliste.
Medien und Grafik
- SAvatar<s-avatar>Zeigt das Bild einer Person oder eines Unternehmens an oder deren Initialen, wenn kein Bild vorhanden ist.
- SIcon<s-icon>Zeigt ein Icon aus dem Polaris-Icon-Set anhand seines Namens an.
- SImage<s-image>Zeigt ein Bild an, mit Kontrolle über Seitenverhältnis, Einpassung, Rahmen und Lazy Loading.
- SThumbnail<s-thumbnail>Ein kleines Vorschaubild fester Größe für ein Produkt oder eine Datei.
Overlays
Typografie und Inhalt
- SChip<s-chip>Ein statisches Label für ein Tag oder Attribut, optional entfernbar.
- SHeading<s-heading>Eine Überschrift, die einen Seitenabschnitt betitelt.
- SNumber<s-number>Zeigt eine bereits formatierte Zahl an, mit Typografie-, Ton- und Farbgestaltung.
- SParagraph<s-paragraph>Ein Block Fließtext.
- SText<s-text>Inline-Text mit Gestaltung für Ton, Schriftstärke und Hervorhebung.
- STooltip<s-tooltip>Ein kurzes Label, das erscheint, wenn ein anderes Element mit der Maus berührt oder fokussiert wird.