Przycisk

Przyciski to podstawowe komponenty, które pozwalają użytkownikowi wywołać zdefiniowane działanie. Istnieje pięć rodzajów przycisków. W tabeli poniżej opisujemy wygląd każdego z 5 typów przycisków oraz miejsca, w których należy ich używać.

Typ	Wygląd	Cel
Wypełnienie	Jednolite tło z kontrastującym tekstem.	Przyciski z dużą wyróżnieniem. Służą one do wykonywania głównych działań w aplikacji, np. „prześlij” i „zapisz”. Efekt cienia podkreśla znaczenie przycisku.
Tonal wypełniony	Kolor tła zmienia się w zależności od powierzchni.	Także w przypadku głównych lub ważnych działań. Wypełnione przyciski zapewniają bardziej widoczne funkcje, takie jak „dodaj do koszyka” czy „Zaloguj się”.
Podwyższona	Wyróżnia się cieniem.	Pełni rolę podobną do przycisków tonalnych. Zwiększ wysokość, aby przycisk był jeszcze lepiej widoczny.
Kontur	Zawiera obramowanie bez wypełnienia.	Przyciski ze średnim naciskiem zawierające działania, które są ważne, ale nie są główne. Dobrze komponują się z innymi przyciskami, które wskazują działania alternatywne, takie jak „Anuluj” lub „Wstecz”.
Tekst	Wyświetla tekst bez tła i obramowania.	Przyciski z małymi literami, które idealnie nadają się do wykonywania mniej istotnych działań, takich jak linki nawigacyjne lub korzystanie z funkcji drugorzędnych, takich jak „Więcej informacji” czy „Wyświetl szczegóły”.

Ilustracja poniżej przedstawia 5 typów przycisków w interfejsie Material Design.

Interfejs API

• onClick: funkcja wywoływana, gdy użytkownik naciśnie przycisk.
• enabled: jeśli ma wartość false (fałsz), ten parametr sprawia, że przycisk jest niedostępny lub nieaktywny.
• colors: instancja ButtonColors, która określa kolory przycisku.
• contentPadding: dopełnienie w obrębie przycisku.

Wypełniony przycisk

Komponent przycisku wypełnionego używa podstawowego elementu kompozycyjnego Button. Domyślnie jest wypełniany jednolitym kolorem. Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Wypełniony przycisk tonalny

Komponent przycisku tonu wypełnionego używa funkcji kompozycyjnej FilledTonalButton. Domyślnie jest wypełniany kolorem tonalnym.

Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przycisk z konturem

Komponent przycisku z listą elementów wykorzystuje element kompozycyjny OutlinedButton. Domyślnie jest on wyświetlany z obramowaniem.

Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przycisk podniesiony

Komponent przycisku podniesionego używa funkcji kompozycyjnej ElevatedButton. Ma on cień, który domyślnie reprezentuje efekt wysokości. Zwróć uwagę, że jest to przycisk z obrysem i cieniem.

Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Przycisk tekstowy

Komponent przycisku tekstowego używa funkcji kompozycyjnej TextButton. Dopóki nie naciśniesz przycisku, będzie on wyświetlany jako zwykły tekst. Domyślnie nie ma wypełnienia ani konturów.

Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Implementacja wygląda tak:

Dodatkowe materiały

• Pływający przycisk polecenia
• Dokumentacja interfejsu Material Design