Schaltfläche

Schaltflächen sind grundlegende Komponenten, mit denen Nutzer eine definierte Aktion auslösen können. Es gibt fünf Arten von Schaltflächen. In der folgenden Tabelle wird die Darstellung der fünf Schaltflächentypen sowie ihre Verwendung beschrieben.

Typ	Darstellung	Zweck
Ausgefüllt	Einfarbiger Hintergrund mit kontrastierendem Text.	Hervorgehobene Schaltflächen. Diese beziehen sich auf primäre Aktionen in einer App, z. B. „Senden“ und „Speichern“. Der Schatteneffekt betont die Bedeutung der Schaltfläche.
Gefüllter Farbton	Die Hintergrundfarbe variiert je nach Oberfläche.	Auch für primäre oder wichtige Aktionen. Ausgefüllte Schaltflächen bieten Funktionen für das visuelle Gewicht und den Anzug, z. B. „In den Warenkorb“ und „Anmelden“.
Erhöht	Durch einen Schatten hebt sich das Bild von der Masse ab.	Entspricht einer ähnlichen Rolle wie bei den Tonwerten-Schaltflächen. Erhöhen Sie die Höhe, damit die Schaltfläche noch stärker hervorgehoben wird.
Umrissen	Es hat einen Rahmen ohne Füllung.	Schaltflächen mit mittlerer Betonung, die Aktionen enthalten, die wichtig, aber nicht primär sind. Sie lassen sich gut mit anderen Schaltflächen kombinieren, um alternative, sekundäre Aktionen wie „Abbrechen“ oder „Zurück“ anzuzeigen.
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 „Details ansehen“.

Die folgende Abbildung zeigt die fünf Arten von Schaltflächen in Material Design.

Abbildung 1: Die 5 Schaltflächenkomponenten:

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 als nicht verfügbar und inaktiv.
• colors: Eine Instanz von ButtonColors, die die in der Schaltfläche verwendeten Farben bestimmt.
• contentPadding: Der Abstand innerhalb der Schaltfläche.

Schaltfläche mit Füllung

Für die Komponente für die ausgefüllte Schaltfläche wird die einfache zusammensetzbare Funktion Button verwendet. Es ist standardmäßig mit einer Volltonfarbe gefüllt. Das folgende Snippet zeigt, wie die Komponente implementiert wird:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

Hinweis :Wenn Sie eine benutzerdefinierte Schaltfläche erstellen möchten, verwenden Sie die zusammensetzbare Funktion Button.

Diese Implementierung sieht so aus:

Abbildung 2: Eine ausgefüllte Schaltfläche.

Schaltfläche mit Füllung in Ton

Für die ausgefüllte Komponente „Tonalschaltfläche“ wird die zusammensetzbare Funktion FilledTonalButton verwendet. Standardmäßig wird es mit einem Tonwert gefüllt.

Das folgende Snippet veranschaulicht die Implementierung der Komponente:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Abbildung 3: Eine Schaltfläche in kräftigen Farben

Schaltfläche mit Umriss

Für die Komponente für die umrissene Schaltfläche wird die zusammensetzbare Funktion OutlinedButton verwendet. Sie wird standardmäßig mit einem Umriss dargestellt.

Das folgende Snippet veranschaulicht die Implementierung der Komponente:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Abbildung 4: Eine umrandete Schaltfläche.

Erhöhte Schaltfläche

Die Komponente für die Schaltfläche mit erweiterten Berechtigungen verwendet die zusammensetzbare Funktion ElevatedButton. Es hat einen Schatten, der standardmäßig den Höheneffekt darstellt. Beachten Sie, dass es sich im Wesentlichen um eine umrissene Schaltfläche mit einem Schatten handelt.

Das folgende Snippet veranschaulicht die Implementierung der Komponente:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Abbildung 5: Eine Schaltfläche mit erhöhten Rechten.

Schaltfläche „Text“

Die Komponente „Textschaltfläche“ verwendet die zusammensetzbare Funktion TextButton. Solange sie nicht angeklickt werden, erscheint sie nur als Text. Sie hat standardmäßig keine durchgehende Füllung oder einen Umriss.

Das folgende Snippet veranschaulicht die Implementierung der Komponente:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Abbildung 6: Eine Textschaltfläche.

Weitere Informationen

• Unverankerte Aktionsschaltfläche
• Material UI-Dokumentation