Felder und FlyoutsFields and flyouts


FelderFields

Felder sind Bereiche, in denen Benutzer Text eingeben können.Fields are areas where users can input text.

Textabstand und GrößePadding and size

Einzeilige Textfelder sind eine feste Höhe von Bund, die der Höhe anderer Komponenten entspricht.Single-line text fields are a fixed height of 32px to match the height of other components. Einige Textfelder wie Beschreibungsfelder sind möglicherweise vertikal höher, sodass mehr Text zulässig ist.Some text fields such as description fields may be taller vertically to allow more text.

StaatenStates

Dies sind die Zustände unserer Textfelder.These are the states of our text fields. Text Felder sind in unterschiedlichen Zuständen vorhanden.Text fields exist in different states. Wir haben spezielle Designs für neun mögliche Szenarien, einschließlich (von oben nach unten): resting-Textfeld, Tastatur im Fokus und Cursor innerhalb des Felds, Tastatur im Fokus mit eingegebenem Text, Fehlerbehandlung erfolgreich, Fehlerbehandlung ist fehlgeschlagen, Klartext Feld (einschließlich eines X-Symbols), Suchfeld (einschließlich eines suchsymbols), eines Lade Felds und eines deaktivierten Felds.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.

Formatieren von Hilfe Text und BeschriftungenFormatting help text and labels

Felder können Platzhaltertext enthalten, um ein Beispiel für die Art der erforderlichen Informationen anzugeben.Fields can contain placeholder text to give an example of the kind of information that is required. Sie können auch Bezeichnungen enthalten, die dem Benutzer mehr Kontext geben.They can also hold labels that give the user more context. Innerhalb eines Felds sollte Ihr Text immer linksbündig ausgerichtet sein.Within a field, your text should always be justified left. Wir verwenden auch hier in der Satz Verkleidung.We use sentence casing throughout here, as well.

Wir verwenden Segoe UI Regular bei 12 pt (Caption) und $App-Gray-02 für Bezeichnungen.We use Segoe UI Regular at 12 pt (caption) and $app-gray-02 for labels. Für Hilfetext verwenden wir Segoe UI Regular bei 14 pt (Base) und $App-Gray-02.For help text, we use Segoe UI Regular at 14 pt (base) and $app-gray-02.


FlyoutsFlyouts

Flyouts sind leichter als Dialogfelder und können schnell abgewiesen werden.Flyouts are more lightweight than dialogs and can be dismissed quickly. Sie können Schaltflächen, Felder und andere Komponenten enthalten.They can contain buttons, fields, and other components.

Größenanpassung und AuffüllungSizing and padding

Links und rechts neben dem Inhalt wird ein 16px-Abstand empfohlen.We recommend a 16px padding to the left and right of the content.

PlatzierungPlacement

Flyouts sind kontextbezogen und sollten oberhalb, unterhalb oder neben dem Element platziert werden, das es ausgelöst hat.Flyouts are contextual and should be placed above, below, or beside the element that triggered it.

ScrollenScrolling

Der Header bleibt an der richtigen Stelle, um dem Inhalt, in dem ein Bildlauf durchgeführt wird, Kontext zu geben.The header remains in place to give context to the content being scrolled.

MobilMobile

Felder sind Texteingabefelder, die Eingaben von Benutzern annehmen.Fields are text-entry boxes that accept input from users. Flyout-Menüs sind horizontale Popupfenster, die im oberen Bereich angezeigt werden und zum Anzeigen detaillierter Informationen zu einem Element verwendet werden können.Flyout menus are horizontal pop-up windows that appear from the top pane and can be used to show more detail about an item.

FeldsteuerelementeField Controls

Flyout-Menü ListensteuerelementeFlyout menu list controls