Button

Przyciski to podstawowe komponenty, które pozwalają użytkownikowi wywołać działania. Istnieje pięć rodzajów przycisków. W tej tabeli opisano wygląd każdego z pięciu przycisków oraz miejsca ich stosowania .

Typ

Wygląd

Cel

Wypełnienie

Jednolite tło z kontrastującym tekstem.

Przyciski z dużą wyróżnieniem. Służą one do wykonywania głównych działań w aplikacji, np. „prześlij”. i „zapisz”. Efekt cienia podkreśla znaczenie przycisku.

Tonal wypełniony

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

Także w przypadku głównych lub ważnych działań. Wypełnione przyciski zapewniają bardziej wizualną widoczność funkcji, dzięki którym można dopasować wagę i rozmiar, np. „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 ze średnim naciskiem zawierające działania, które są ważne, ale nie są główne. 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 z małym naciskiem, idealne do mniej ważnych działań, takich jak linki nawigacyjne lub korzystanie z funkcji drugorzędnych, takich jak „Więcej informacji”. lub „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 (fałsz), ten parametr powoduje wyświetlenie przycisku. niedostępne i nieaktywne.
  • colors: wystąpienie ButtonColors, które określa kolory używane w: kliknij przycisk.
  • contentPadding: dopełnienie w obrębie 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 zaimplementuj komponent:

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

Implementacja wygląda tak:

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

Wypełniony przycisk tonalny

Komponent wypełnienia przycisku tonalnego używa funkcji kompozycyjnej FilledTonalButton. Domyślnie jest wypełniany kolorem tonalnym.

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

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

Implementacja wygląda tak:

Przycisk tonalny na jasnofioletowym tle z napisem „Wypełniony”.
Rysunek 3. Przycisk tona.

Przycisk z konturem

Komponent przycisku z listą elementów wykorzystuje element kompozycyjny OutlinedButton. it jest domyślnie wyświetlany z obrysem.

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

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

Implementacja wygląda tak:

Przycisk z przezroczystym konturem w ciemnym obramowaniu i napisem „Obramowanie”.
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 wdrożyć komponent:

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

Implementacja wygląda tak:

Uniesiony przycisk na szarym tle z napisem „Podwyższone”.
Rysunek 5. Uniesiony przycisk.

Przycisk tekstowy

Komponent przycisku tekstowego używa funkcji kompozycyjnej 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")
    }
}

Implementacja wygląda tak:

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

Dodatkowe materiały