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">
</ph> Ein Beispiel für jede der fünf Schaltflächenkomponenten, wobei ihre einzigartigen Eigenschaften hervorgehoben sind.
Abbildung 1: Komponenten mit fünf Schaltflächen

API-Oberfläche

  • onClick: Die Funktion, die aufgerufen wird, wenn der Nutzer die Taste 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.

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")
    }
}
Button.kt

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> Eine gefüllte Schaltfläche mit lilafarbenem Hintergrund, auf der „gefüllt“ zu lesen ist.
Abbildung 2: Eine ausgefüllte Schaltfläche

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")
    }
}
Button.kt

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> Eine farbige Schaltfläche mit helllila Hintergrund, auf der „gefüllt“ steht.
Abbildung 3: Eine tonale Schaltfläche.

Schaltfläche mit Umriss

Für die umrandete Schaltflächenkomponente wird die zusammensetzbare Funktion OutlinedButton 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:

<ph type="x-smartling-placeholder">
</ph> Eine transparent umrandete Schaltfläche mit dunklem Rahmen, die den Text „Umriss“ enthält.
Abbildung 4: Eine umrissene Schaltfläche.

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")
    }
}
Button.kt

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> Eine Schaltfläche mit erhöhten Ebenen vor grauem Hintergrund, auf der „Erhoben“ zu lesen ist.
Abbildung 5: Eine Taste mit erhöhter Sichtbarkeit.

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")
    }
}
Button.kt

Diese Implementierung sieht so aus:

<ph type="x-smartling-placeholder">
</ph> Eine Textschaltfläche mit dem Text „Textschaltfläche“
Abbildung 6: Eine Textschaltfläche.

Weitere Informationen