Champs et lanceursFields and flyouts


ChampsFields

Les champs sont des zones dans lesquelles les utilisateurs peuvent entrer du texte.Fields are areas where users can input text.

Remplissage et taillePadding and size

Les champs de texte à une seule ligne représentent une hauteur fixe de des pour correspondre à la hauteur des autres composants.Single-line text fields are a fixed height of 32px to match the height of other components. Certains champs de texte, tels que les champs de description, peuvent être plus hauts verticalement pour permettre davantage de texte.Some text fields such as description fields may be taller vertically to allow more text.

ÉtatsStates

Voici les États de nos champs de texte.These are the states of our text fields. Les champs de texte existent dans différents États.Text fields exist in different states. Nous disposons de conceptions spécifiques dédiées à neuf scénarios possibles, y compris (de haut en bas) : zone de texte de repos, clavier en focus et curseur à l’intérieur du champ, clavier activé avec le texte entré, la gestion des erreurs a réussi, la gestion des erreurs a échoué, texte clair champ (y compris une icône X), champ de recherche (y compris une icône de recherche), chargement du champ et champ désactivé.We have specific designs dedicated to nine possible scenarios, including (top to bottom): Resting text field, Keyboard in focus and cursor inside the field, Keyboard in focus with text entered, Error handling has succeeded, Error handling has failed, Clear text field (including an X icon), Search field (including a Search icon), Loading field, and a Disabled field.

Mise en forme du texte d’aide et des étiquettesFormatting help text and labels

Les champs peuvent contenir un texte d’espace réservé pour donner un exemple du type d’informations requis.Fields can contain placeholder text to give an example of the kind of information that is required. Ils peuvent également contenir des étiquettes qui donnent davantage de contexte à l’utilisateur.They can also hold labels that give the user more context. Dans un champ, votre texte doit toujours être justifié à gauche.Within a field, your text should always be justified left. Nous utilisons également la casse des phrases ici.We use sentence casing throughout here, as well.

Nous utilisons l’interface utilisateur Segoe standard à 12 pt (légende) et $app-gris-02 pour les étiquettes.We use Segoe UI Regular at 12 pt (caption) and $app-gray-02 for labels. Pour le texte d’aide, nous utilisons une interface utilisateur Segoe standard à 14 PT (base) et $app-gris-02.For help text, we use Segoe UI Regular at 14 pt (base) and $app-gray-02.


LanceursFlyouts

Les lanceurs sont plus légers que les boîtes de dialogue et peuvent être ignorés rapidement.Flyouts are more lightweight than dialogs and can be dismissed quickly. Ils peuvent contenir des boutons, des champs et d’autres composants.They can contain buttons, fields, and other components.

Dimensionnement et remplissageSizing and padding

Nous recommandons un remplissage 16px à gauche et à droite du contenu.We recommend a 16px padding to the left and right of the content.

PlacementPlacement

Les lances sont contextuelles et doivent être placées au-dessus, en dessous ou à côté de l’élément qui les a déclenchés.Flyouts are contextual and should be placed above, below, or beside the element that triggered it.

DéfilementScrolling

L’en-tête reste en place pour donner le contexte au contenu en cours de défilement.The header remains in place to give context to the content being scrolled.

MobileMobile

Les champs sont des zones de saisie de texte qui acceptent les entrées des utilisateurs.Fields are text-entry boxes that accept input from users. Les menus volants sont des fenêtres contextuelles horizontales qui apparaissent dans le volet de la partie supérieure et peuvent être utilisées pour afficher plus de détails sur un élément.Flyout menus are horizontal pop-up windows that appear from the top pane and can be used to show more detail about an item.

Contrôles de champField Controls

Contrôles de liste de menu volantFlyout menu list controls