Composants
62 wrappers Vue typés, un par web component Polaris, classés comme dans la référence officielle de Shopify.
Actions
- SButton<s-button>Déclenche une action ou une navigation, avec des variantes primary, secondary et tertiary, des icônes et un état de chargement.
- SButtonGroup<s-button-group>Regroupe un ensemble de boutons liés, comme une action principale et ses actions secondaires.
- SClickable<s-clickable>Rend n'importe quel contenu cliquable comme un bouton ou un lien, sans imposer le style d'un bouton.
- SClickableChip<s-clickable-chip>Un chip interactif que l'on peut cliquer, suivre comme un lien ou supprimer, utile pour les filtres et les tags appliqués.
- SLink<s-link>Un lien texte qui mène vers une autre page ou URL, ou qui exécute une commande.
- SMenu<s-menu>Une liste d'actions affichée dans une superposition, ouverte depuis un bouton.
- SPressButton<s-press-button>Un bouton bascule qui reste enfoncé ou relâché, pour activer ou désactiver un mode ou un filtre.
Retours et statut
- SBadge<s-badge>Une petite étiquette qui indique le statut d'un objet, comme une commande, un paiement ou un traitement.
- SBanner<s-banner>Un message bien visible qui met en avant des informations importantes, des avertissements ou des erreurs en haut d'une page ou d'une section.
- SEmptyState<s-empty-state>Explique pourquoi une vue n'a pas encore de contenu et oriente les marchands vers la première action à effectuer.
- SProgress<s-progress>Une barre de progression qui indique l'avancement d'une tâche vers sa valeur maximale.
- SSpinner<s-spinner>Un indicateur animé signalant qu'un contenu ou une action est en cours de chargement.
Formulaires
- SCheckbox<s-checkbox>Une case à cocher unique pour un choix oui/non, liée à son état coché avec v-model.
- SChoice<s-choice>Une option dans une liste de choix.
- SChoiceList<s-choice-list>Un groupe de boutons radio ou de cases à cocher pour choisir une ou plusieurs options.
- SColorField<s-color-field>Un champ de texte pour saisir une valeur de couleur, avec un canal alpha facultatif.
- SColorPicker<s-color-picker>Un contrôle visuel pour choisir une couleur.
- SDateField<s-date-field>Un champ pour saisir une date.
- SDatePicker<s-date-picker>Un calendrier pour sélectionner une date unique ou une plage de dates.
- SDropZone<s-drop-zone>Une zone d'import de fichiers qui accepte les fichiers par glisser-déposer ou via un sélecteur de fichiers.
- SEmailField<s-email-field>Un champ de texte pour les adresses e-mail.
- SMoneyField<s-money-field>Un champ numérique pour les montants.
- SNumberField<s-number-field>Un champ numérique avec minimum, maximum et pas facultatifs.
- SOption<s-option>Une option dans un select.
- SOptionGroup<s-option-group>Regroupe des options liées d'un select sous un libellé commun.
- SPasswordField<s-password-field>Un champ de texte pour les mots de passe qui masque la saisie.
- SSearchField<s-search-field>Un champ de texte pour les requêtes de recherche.
- SSelect<s-select>Une liste déroulante pour choisir une option dans une liste.
- SSwitch<s-switch>Un interrupteur qui active ou désactive un paramètre.
- STextArea<s-text-area>Un champ de texte multiligne pour les contenus plus longs, comme des notes ou des descriptions.
- STextField<s-text-field>Un champ de texte sur une ligne avec libellé, placeholder, erreur de validation et texte d'aide.
- SUrlField<s-url-field>Un champ de texte pour les adresses web.
Mise en page et structure
- SBox<s-box>Un conteneur générique pour gérer le padding, l'arrière-plan, la bordure, l'arrondi et les dimensions.
- SDivider<s-divider>Une ligne horizontale ou verticale qui sépare des contenus.
- SGrid<s-grid>Un conteneur CSS grid pour disposer le contenu en lignes et en colonnes.
- SGridItem<s-grid-item>Un enfant d'une grille qui peut s'étendre sur plusieurs colonnes ou lignes.
- SListItem<s-list-item>Un élément dans une liste ordonnée ou non ordonnée.
- SOrderedList<s-ordered-list>Une liste numérotée.
- SPage<s-page>La mise en page de premier niveau, avec un titre, des actions de page et des zones de contenu.
- SQueryContainer<s-query-container>Transforme un élément en conteneur de taille afin que ses enfants s'adaptent à sa largeur grâce aux container queries.
- SScrollBox<s-scroll-box>Un conteneur qui fait défiler son contenu lorsqu'il déborde.
- SSection<s-section>Regroupe des contenus liés, avec un titre, un sous-titre et des actions facultatifs.
- SStack<s-stack>Dispose ses enfants en ligne ou en colonne avec un espacement et un alignement cohérents.
- STable<s-table>Un tableau pour les données structurées, avec pagination, état de chargement et affichage en liste sur petits écrans facultatifs.
- STableBody<s-table-body>Le corps d'un tableau, qui contient ses lignes de données.
- STableCell<s-table-cell>Une cellule d'une ligne de tableau.
- STableHeader<s-table-header>Un en-tête de colonne d'un tableau.
- STableHeaderRow<s-table-header-row>La ligne d'en-têtes de colonnes en haut d'un tableau.
- STableRow<s-table-row>Une ligne de données d'un tableau.
- SUnorderedList<s-unordered-list>Une liste à puces.
Médias et visuels
- SAvatar<s-avatar>Affiche l'image d'une personne ou d'une entreprise, ou ses initiales en l'absence d'image.
- SIcon<s-icon>Affiche une icône du jeu d'icônes Polaris à partir de son nom.
- SImage<s-image>Affiche une image en contrôlant le ratio, l'ajustement, les bordures et le chargement différé.
- SThumbnail<s-thumbnail>Une petite image d'aperçu de taille fixe pour un produit ou un fichier.
Superpositions
Typographie et contenu
- SChip<s-chip>Une étiquette statique pour un tag ou un attribut, éventuellement supprimable.
- SHeading<s-heading>Un titre qui intitule une section de page.
- SNumber<s-number>Affiche un nombre déjà formaté, avec un style de typographie, de ton et de couleur.
- SParagraph<s-paragraph>Un bloc de texte courant.
- SText<s-text>Du texte en ligne avec un style de ton, de graisse et d'emphase.
- STooltip<s-tooltip>Un court libellé qui apparaît lorsqu'un autre élément est survolé ou reçoit le focus.