Button

Przyciski to podstawowe komponenty, które umożliwiają użytkownikowi uruchomienie określonego działania. Istnieje 5 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łniony

jednolite tło z kontrastującym tekstem,

przyciski o wysokim kontraście; Są one przeznaczone do głównych działań w aplikacji, takich jak „prześlij” i „zapisz”. Efekt cienia podkreśla znaczenie przycisku.

Wypełniony tonalny

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

Dotyczy to też działań głównych lub istotnych. Przyciski wypełnione mają większą wagę wizualną i pasują do funkcji takich jak „Dodaj do koszyka” i „Zaloguj się”.

Wysoka

Wyróżnia się cieniem.

Pełnią podobną funkcję jak przyciski tonalne. Zwiększ poziom, aby przycisk był jeszcze bardziej widoczny.

Kontur

Zawiera obramowanie bez wypełnienia.

Przyciski o średnim znaczeniu, które zawierają ważne, ale nie główne działania. Dobrze komponują się z innymi przyciskami, wskazując alternatywne działania dodatkowe, takie jak „Anuluj” lub „Wstecz”.

Tekst

Wyświetla tekst bez tła i obramowania.

Przyciski o niskim priorytecie, idealne do mniej istotnych działań, takich jak linki nawigacyjne czy funkcje dodatkowe, np. „Więcej informacji” lub „Wyświetl szczegóły”.

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

Przykłady każdego z 5 komponentów przycisków z wyróżnionymi unikalnymi cechami.
Rysunek 1. 5 komponentów przycisków.

Powierzchnia interfejsu API

  • onClick: funkcja wywoływana, gdy użytkownik naciśnie przycisk.
  • enabled: gdy ma wartość false, ten parametr powoduje, że przycisk jest niedostępny i nieaktywny.
  • colors: instancja ButtonColors, która określa kolory używane w przycisku.
  • contentPadding: odstęp wewnątrz przycisku.

Wypełniony przycisk

Komponent wypełnionego przycisku korzysta z podstawowego komponentu Button. Domyślnie jest wypełniony jednolitym kolorem. Poniższy 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 z fioletowym tłem z napisem „wypełniony”.
Rysunek 2. Wypełniony przycisk.

Wypełniony przycisk tonalny

Komponent wypełnionego przycisku tonalnego korzysta z funkcji kompozycyjnej FilledTonalButton. Domyślnie jest wypełniony kolorem tonalnym.

Poniższy fragment kodu pokazuje, jak wdrożyć ten 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

Komponent przycisku z obramowaniem korzysta z funkcji kompozycyjnej OutlinedButton. Domyślnie jest on otoczony konturem.

Poniższy fragment kodu pokazuje, jak wdrożyć ten komponent:

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

Ta implementacja wygląda tak:

Przezroczysty przycisk z konturem i ciemnym obramowaniem z tekstem „Outlined”.
Rysunek 4. Przycisk z konturem.

Przycisk podniesiony

Komponent podniesionego przycisku korzysta z funkcji kompozycyjnej ElevatedButton. Domyślnie ma cień, który reprezentuje efekt wysokości. Pamiętaj, że jest to w zasadzie przycisk z obramowaniem i cieniem.

Poniższy fragment kodu pokazuje, jak wdrożyć ten komponent:

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

Ta implementacja wygląda tak:

Przycisk podniesiony z szarym tłem z napisem „Podniesiony”.
Rysunek 5. Przycisk podniesiony.

Przycisk tekstowy

Komponent przycisku tekstowego korzysta z funkcji kompozycyjnej TextButton. Dopóki nie zostanie naciśnięty, będzie wyświetlany tylko jako tekst. Domyślnie nie ma wypełnienia ani obrysu.

Poniższy fragment kodu pokazuje, jak wdrożyć ten 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