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 podajemy, w jakich sytuacjach należy ich używać.

Typ

Wygląd

Cel

Wypełnienie

jednolite tło z tekstem o kontrastującym kolorze;

Przyciski o wysokiej mocy sygnału. 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ę, aby dopasować się do powierzchni.

Również w przypadku działań głównych lub znaczących. Wypełnione przyciski mają większą wagę wizualną i są odpowiednie do funkcji takich jak „dodaj do koszyka” i „Zaloguj się”.

Wysoka

wyróżnia się cieniem;

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

Kontur

zawiera 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, przycisk jest niedostępny i 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 „filled”
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

Ta 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ą ramką z napisem „Outlined” (Obrys).
Rysunek 4. Przycisk z konturem.

Przycisk podniesiony

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

Ten fragment kodu pokazuje, jak zaimplementować 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 korzysta z komponentu TextButton. Dopóki nie zostanie naciśnięty, będzie widoczny tylko jako tekst. Domyślnie nie ma jednolitej wypełnienia ani obrysu.

Ten fragment kodu pokazuje, jak zaimplementować 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