Button
Schaltflächen sind grundlegende Komponenten, mit denen Nutzer eine bestimmte Aktion ausführen. Es gibt fünf Arten von Schaltflächen. In der folgenden Tabelle werden die das Erscheinungsbild jedes der fünf Schaltflächentypen und wo Sie .
Typ |
Darstellung |
Zweck |
---|---|---|
Ausgefüllt |
Einfarbiger Hintergrund mit kontrastierendem Text. |
Hervorgehobene Schaltflächen. Sie gelten für primäre Aktionen in einer Anwendung, z. B. „Senden“. und klicken Sie auf „Speichern“. Der Schatteneffekt unterstreicht die Bedeutung der Schaltfläche. |
Gefüllte Tonwerte |
Die Hintergrundfarbe variiert je nach Oberfläche. |
Auch für primäre oder wichtige Aktionen. Ausgefüllte Schaltflächen bieten mehr visuelles Gewicht und Anzugfunktionen wie „In den Warenkorb“. und "Anmelden". |
Erhöht |
Hat einen Schatten, hebt sich von der Masse ab. |
Entspricht einer ähnlichen Funktion wie Tontasten. Wenn Sie die Elevation erhöhen, erscheint die Schaltfläche noch besser. |
Umrissen |
Das Element hat einen Rahmen ohne Füllung. |
Schaltflächen mit mittlerer Betonung, die Aktionen enthalten, die wichtig, aber nicht primär sind. Sie passen gut zu anderen Schaltflächen, um alternative, sekundäre Aktionen wie „Abbrechen“ anzuzeigen. oder „Zurück“. |
Text |
Zeigt Text ohne Hintergrund oder Rahmen an. |
Schaltflächen mit geringer Betonung, ideal für weniger wichtige Aktionen wie Navigationslinks oder sekundäre Funktionen wie „Weitere Informationen“ oder auf „Details ansehen“. |
Das folgende Bild zeigt die fünf Arten von Schaltflächen in Material Design.
<ph type="x-smartling-placeholder">API-Oberfläche
onClick
: Die Funktion, die aufgerufen wird, wenn der Nutzer die Taste drückt.enabled
: Wenn dieser Parameter auf „false“ gesetzt ist, erscheint die Schaltfläche. nicht verfügbar und inaktiv sind.colors
: Eine Instanz vonButtonColors
, die bestimmt, welche Farben in auf die Schaltfläche.contentPadding
: der Abstand innerhalb der Schaltfläche.
Schaltfläche mit Füllung
Für die Komponente der ausgefüllten Schaltfläche wird die grundlegende zusammensetzbare Funktion Button
verwendet. Es ist
mit einer Volltonfarbe gefüllt. Das folgende Snippet zeigt, wie Sie
Implementieren der Komponente:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">Schaltfläche mit ausgefülltem Ton
Für die Komponente der ausgefüllten Tonschaltfläche wird die zusammensetzbare Funktion FilledTonalButton
verwendet.
Standardmäßig wird eine Tonfarbe angezeigt.
Das folgende Snippet veranschaulicht, wie die Komponente implementiert wird:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">Schaltfläche mit Umriss
Die umrissene Schaltflächenkomponente verwendet die zusammensetzbare Funktion OutlinedButton
. Es
wird standardmäßig mit einem Umriss angezeigt.
Das folgende Snippet veranschaulicht, wie die Komponente implementiert wird:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">Erhöhte Schaltfläche
Für die Komponente „Schaltfläche mit erhöhten Angaben“ wird die zusammensetzbare Funktion ElevatedButton
verwendet. Sie enthält
einen Schatten, der standardmäßig den Höheneffekt darstellt. Beachten Sie, dass dies
im Grunde eine umrissene Schaltfläche mit einem Schatten.
Das folgende Snippet veranschaulicht, wie die Komponente implementiert wird:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">Schaltfläche „Text“
Für die Komponente „Textschaltfläche“ wird die zusammensetzbare Funktion TextButton
verwendet. Bis Sie auf diese Schaltfläche klicken,
erscheint es nur als Text. Sie hat nicht standardmäßig eine durchgehende Füllung oder einen durchgehenden Umriss.
Das folgende Snippet veranschaulicht, wie die Komponente implementiert wird:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Diese Implementierung sieht so aus:
<ph type="x-smartling-placeholder">