Essaie d'utiliser des termes de recherche différents ou moins nombreux.
PrincipesBasesAccessibilitéSystème de designGuidelines Deutsch Français Italiano English
Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié
La marqueLink target opens in a new window. Portail de la marque CFF Logo Horloge numérique Droits d’utilisationCouleurs Couleurs de base Couleurs supplémentaires Couleurs off-brandAssets Icônes Icônes de l’horaire PictogrammesLangue À propos du UX writing Les textes de boutons et de liens Les notifications Les formulaires et champs de saisie Indicateur de progression Liste de mots numériques
Introduction À propos de l’accessibilité À propos de ce guide Contact Informations complémentairesRôles Product Owner User Research Interaction Design Visual Design Development Content Design Testing
Premiers pas What is a design system? Conception Développer FAQ AideOrganisation Procès Contribution ContactMobile Aperçu Base ComposantsLyne Aperçu Qu'est-ce que Lyne ? Releases Presets & Themes Design Tokens Composants TemplatesMaps Aperçu Base InformationsPatterns Aperçu
Guides Power-Apps Bandeaux publicitaires numériques SAP IA Design : BasesSpécifications Icônes d’applications
Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch EnglishChip.
Übersicht
Was macht die Komponente?
Stellt Werte und Kategorien als kompakte dar.
Wann soll die Komponente eingesetzt werden?
Wenn es in einem Formular möglich sein soll, zu einem Attribut mehrere Werte zu setzen.
Wenn nach Kategorien gefiltert werden soll.
Regeln
Der Begriff im Chip ist immer einzeilig (keine Zeilenumbrüche) und der Chip selber wächst in der Breite mit dem Text mit.
Wird ein Chip aufgrund des Textes zu lang für den Viewport, wird der Text mit «...» gekürzt.
Die Chips werden in einem Textfield dargestellt. Dieses kann je nach Anzahl Chips und vorhandenem Platz auch mehrzeilig werden.
Mittels Backspace können Chips im Textfield gelöscht werden.
Je nach Anwendungsfall können die Chips über "autocomplete"-Auswahlen oder mit Freitext generiert werden.
Varianten
Zustände
Die Komponente hat folgende Zustände:
Active
Disabled
Hover
Focused
Varianten
Input
Spezifikationen
Link target opens in a new window.DesignLink target opens in a new window.Code