Button

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 werden die das Erscheinungsbild jedes der fünf Schaltflächentypen und wo Sie .

Eingeben	Darstellung	Zweck
Ausgefüllt	Einfarbiger Hintergrund mit kontrastierendem Text.	Hervorgehobene Schaltflächen. Diese werden für primäre Aktionen in einer Anwendung verwendet, z. B. „Senden“ und „Speichern“. Der Schatteneffekt unterstreicht die Wichtigkeit der Schaltfläche.
Gefüllte Tonwerte	Die Hintergrundfarbe passt sich der Oberfläche an.	Auch für primäre oder wichtige Aktionen. Ausgefüllte Schaltflächen haben mehr visuelles Gewicht und eignen sich für Funktionen wie „In den Einkaufswagen“ und „Anmelden“.
Erhöht	Sie heben sich durch einen Schatten ab.	Sie haben eine ähnliche Funktion wie farbliche Schaltflächen. 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.	Weniger auffällige Schaltflächen, 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: Komponenten mit fünf Schaltflächen

API-Oberfläche

• onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer auf die Schaltfläche drückt.
• enabled: Ist dieser Parameter auf „false“ gesetzt, erscheint die Schaltfläche. nicht verfügbar und inaktiv sind.
• colors: Eine Instanz von ButtonColors, die bestimmt, welche Farben in auf die Schaltfläche.
• contentPadding: Der Abstand innerhalb der Schaltfläche.

Gefüllte Schaltfläche

Für die Komponente der ausgefüllten Schaltfläche wird die grundlegende zusammensetzbare Funktion Button verwendet. Standardmäßig ist es mit einer durchgehenden Farbe gefüllt. Das folgende Snippet zeigt, wie Sie Implementieren der Komponente:

@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

Gefüllte Schaltfläche mit Ton

Für die Komponente der ausgefüllten Tonschaltfläche wird die zusammensetzbare Funktion FilledTonalButton verwendet. Es ist standardmäßig mit einer Tonfarbe gefüllt.

Das folgende Snippet zeigt, wie die Komponente implementiert wird:

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

Diese Implementierung sieht so aus:

Abbildung 3: Eine tonale Schaltfläche.

Schaltfläche mit Umriss

Für die umrandete Schaltflächenkomponente wird das OutlinedButton-Element verwendet. 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")
    }
}
Button.kt

Diese Implementierung sieht so aus:

Abbildung 4: Eine Schaltfläche mit Umriss.

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 zeigt, wie die Komponente implementiert wird:

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

Diese Implementierung sieht so aus:

Abbildung 5: Eine Taste mit erhöhter Sichtbarkeit.

Schaltfläche „Text“

Für die Schaltfläche mit Text wird das TextButton-Element verwendet. Bis zum Drücken wird nur Text angezeigt. Sie hat standardmäßig keine durchgehende Füllung oder keinen Umriss.

Das folgende Snippet veranschaulicht, wie die Komponente implementiert wird:

@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-Dokumente