Button

Przyciski to podstawowe komponenty, które pozwalają użytkownikowi wywołać działania. 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 tekstem o kontrastującym kolorze;

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ę, aby dopasować się do powierzchni.

Również w przypadku działań głównych lub istotnych. 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 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 komponują się z innymi przyciskami, wskazując działania alternatywne, np. „Anuluj”. lub „Wstecz”.

Tekst

Wyświetla tekst bez tła i 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 interfejsie Material Design.

Przykład każdego z pięciu komponentów przycisku z wyróżnionymi ich unikalnymi cechami.
Rysunek 1. 5 przycisków.

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: odstęp wewnątrz przycisku.

Wypełniony przycisk

Komponent przycisku wypełnionego używa podstawowego elementu kompozycyjnego Button. Jest jest domyślnie wypełnione jednolitym kolorem. Ten fragment kodu pokazuje, jak zaimplementować komponent:

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

Implementacja wygląda tak:

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

Wypełniony przycisk tonalny

Komponent przycisku tonu wypełnionego używa funkcji kompozycyjnej 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

Komponent przycisku z listą elementów wykorzystuje element kompozycyjny 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 obrysem.

Przycisk podniesiony

Komponent przycisku podniesionego używa funkcji kompozycyjnej ElevatedButton. Zawiera cień, który domyślnie reprezentuje efekt wysokości. Pamiętaj, że jest to przycisk z obrysem i 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. Uniesiony przycisk.

Przycisk tekstowy

Komponent przycisku tekstowego korzysta z komponentu TextButton. Dopóki nie naciśniesz przycisku, jest wyświetlany tylko jako 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:

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

Dodatkowe materiały