Przycisk

Przyciski to podstawowe komponenty, które umożliwiają użytkownikowi wywołanie zdefiniowanego działania. Jest 5 typów przycisków. W tabeli poniżej opisujemy, jak wygląda każdy z 5 typów przycisków oraz gdzie należy ich używać.

Typ	Wygląd	Cel
Wypełnienie	Jednolite tło z kontrastującym tekstem.	Przyciski z dużym naciskiem. Służą one do wykonywania głównych czynności w aplikacji, takich jak „prześlij” czy „zapisz”. Efekt cienia podkreśla znaczenie przycisku.
Wypełniony ton	Kolor tła różni się w zależności od powierzchni.	Także w przypadku głównych lub ważnych działań. Wypełnione przyciski mają bardziej wizualny charakter i funkcje takie jak „Dodaj do koszyka” czy „Zaloguj się”.
Podwyższona	Wyróżnij się dzięki cieniowi.	Pełni rolę podobną do przycisków tonalnych. Zwiększ wysokość, aby przycisk był bardziej widoczny.
Z konturem	Zawiera obramowanie bez wypełnienia.	Przyciski z średnim naciskiem zawierające czynności, które są ważne, ale nie są główne. Można je połączyć z innymi przyciskami wskazującymi alternatywne działania, takie jak „Anuluj” lub „Wstecz”.
Tekst	Wyświetla tekst bez tła ani obramowania.	Przyciski z niewielkim naciskiem, idealny do wykonywania mniej ważnych działań, takich jak linki nawigacyjne, lub funkcji dodatkowych, takich jak „Więcej informacji” czy „Wyświetl szczegóły”.

Na ilustracji poniżej pokazano 5 typów przycisków w stylu Material Design.

Rysunek 1. 5 komponentów.

Interfejs API

• onClick: funkcja wywoływana po naciśnięciu przycisku przez użytkownika.
• enabled: jeśli ma wartość Fałsz, ten parametr sprawia, że przycisk wydaje się niedostępny i nieaktywny.
• colors: wystąpienie ButtonColors, które określa kolory używane w przycisku.
• contentPadding: dopełnienie przycisku.

Wypełniony przycisk

Komponent Wypełniony przycisk używa podstawowego elementu kompozycyjnego Button. Domyślnie jest ono wypełnione jednolitym kolorem. Ten fragment kodu pokazuje, jak wdrożyć komponent:

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

Uwaga: jeśli chcesz utworzyć przycisk niestandardowy, użyj funkcji kompozycyjnej Button.

Implementacja wygląda tak:

Rysunek 2. Wypełniony przycisk.

Przycisk wypełnienia tonu

Komponent wypełnienia przycisku tonalnego korzysta z funkcji kompozycyjnej FilledTonalButton. Domyślnie jest ono wypełnione kolorem tonalnym.

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

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

Implementacja wygląda tak:

Rysunek 3. Przycisk tonalny.

Przycisk z konturem

Komponent przycisku z zaznaczonym tekstem korzysta z funkcji kompozycyjnej OutlinedButton. Domyślnie wyświetla się z obramowaniem.

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

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

Implementacja wygląda tak:

Rysunek 4. Przycisk z kontekstem.

Przycisk podniesiony

Komponent Przycisk z podwyższonym poziomem używa funkcji kompozycyjnej ElevatedButton. Ma cień, który domyślnie reprezentuje efekt wysokości. Zasadniczo jest to przycisk z konturem 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:

Rysunek 5. Przycisk podwyższony –

Przycisk tekstowy

Komponent przycisk tekstowy korzysta z funkcji kompozycyjnej TextButton. Dopóki go nie klikniesz, będzie się wyświetlać jako tekst. Domyślnie nie ma pełnego wypełnienia ani konturu.

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:

Rysunek 6. Przycisk tekstowy.

Dodatkowe materiały

• Pływający przycisk polecenia
• Dokumentacja Material UI