Button

Przyciski to podstawowe komponenty, które umożliwiają użytkownikowi wywołanie określonego działania. Dostępnych jest 5 typó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ą one przeznaczone do podstawowych działań w aplikacji, takich jak „prześlij” i „zapisz”. Efekt cienia podkreśla znaczenie przycisku.

Tonalny wypełniony

Kolor tła zmienia się w zależności od powierzchni.

Również w przypadku działań głównych lub znaczących. Wypełnione przyciski zapewniają więcej widocznych funkcji, takich jak „dodaj do koszyka” czy „Zaloguj się”.

Podwyższona

wyróżnia się cieniem;

pełnią podobną funkcję co przyciski tonalne. Zwiększ wysokość, aby przycisk był jeszcze lepiej widoczny.

Kontur

Ma obramowanie bez wypełnienia.

przyciski o średnim stopniu natężenia, które zawierają ważne, ale nie główne działania; Dobrze pasują do innych przycisków, aby wskazać alternatywne działania, takie jak „Anuluj” lub „Wstecz”.

Tekst

Wyświetla tekst bez tła ani obramowania.

przyciski o niskim stopniu natężenia, idealne do mniej ważnych działań, takich jak linki nawigacyjne lub funkcje dodatkowe, np. „Więcej informacji” czy „Wyświetl szczegóły”;

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

Przykłady wszystkich 5 komponentów przycisku z wyróżnieniem ich unikalnych cech
Rysunek 1. 5 komponentów przycisku.

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: wystąpienie klasy ButtonColors, które określa kolory użyte w przycisku.
  • contentPadding: wypełnienie przycisku.

Wypełniony przycisk

Komponent wypełnionego przycisku korzysta z podstawowego komponentu Button. Domyślnie jest ona wypełniona jednolitym kolorem. Ten fragment kodu pokazuje, jak zaimplementować komponent:

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

Ta implementacja wygląda tak:

Wypełniony przycisk na fioletowym tle z napisem „Wypełniony”.
Rysunek 2. Wypełniony przycisk.

Wypełniony przycisk tonalny

Wypełniony tonalny komponent przycisku używa komponentu FilledTonalButton. Domyślnie jest on wypełniony kolorem tonalnym.

Ten fragment kodu pokazuje, jak zaimplementować komponent:

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

Implementacja wygląda tak:

Przycisk tonalny na jasnofioletowym tle z napisem „filled” (wypełniony).
Rysunek 3. Przycisk tonalny.

Przycisk z konturem

Zarysowany komponent przycisku używa komponentu OutlinedButton. Domyślnie jest ona wyświetlana z obrysem.

Ten fragment kodu pokazuje, jak zaimplementować komponent:

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

Ta implementacja wygląda tak:

Przezroczysty przycisk z konturem i ciemną obwódką z napisem „Outlined” (Obrys).
Rysunek 4. Przycisk z konturem.

Przycisk podniesiony

Komponent przycisku wyższego poziomu korzysta z komponentu ElevatedButton. Domyślnie ma on cień, który odzwierciedla efekt wypukłości. Jest to w podstawie obrysowany przycisk z cieniem.

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

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

Ta implementacja wygląda tak:

Podniesiony przycisk na szarym tle z napisem „Elevated” (Podniesiony).
Rysunek 5. Podniesiony przycisk.

Przycisk tekstowy

Komponent przycisku tekstowego używa funkcji kompozycyjnej TextButton. Dopóki nie zostanie wciśnięty, będzie widoczny tylko jako tekst. Domyślnie nie ma jednolitej wypełnienia ani obrysu.

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

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

Ta implementacja wygląda tak:

Przycisk tekstowy z napisem „Przycisk tekstowy”
Rysunek 6. Przycisk tekstowy.

Dodatkowe materiały