Button

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

Typ

Wygląd

Cel

Wypełnienie

Jednolite tło z kontrastującym tekstem.

Przyciski o wysokiej mocy sygnału. Służą one do wykonywania głównych działań w aplikacji, np. „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ę”.

Podwyższona

Wyróżnia się cieniem.

Pełni rolę podobną do przycisków tonalnych. Zwiększ wysokość, aby przycisk był jeszcze bardziej 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, 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 wypełniany 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 wypełniany 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

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

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 podniesionego używa funkcji kompozycyjnej ElevatedButton. Domyślnie ma on cień, który odzwierciedla efekt wypukłoś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:

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 zaimplementować komponent:

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

Implementacja wygląda tak:

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

Dodatkowe materiały