Nút là các thành phần cơ bản cho phép người dùng kích hoạt một thao tác đã xác định. Có 5 loại nút. Bảng sau đây mô tả giao diện của từng loại nút trong số 5 loại nút, cũng như vị trí bạn nên sử dụng các nút đó.
Loại |
Diện mạo |
Mục đích |
|---|---|---|
Lấp đầy (filled) |
Nền đồng nhất có văn bản tương phản. |
Các nút có mức độ nhấn mạnh cao. Đây là các thao tác chính trong ứng dụng, chẳng hạn như "gửi" và "lưu". Hiệu ứng bóng đổ làm nổi bật tầm quan trọng của nút. |
Sắc độ được tô màu |
Màu nền thay đổi để phù hợp với vùng hiển thị. |
Ngoài ra, còn dành cho các hành động chính hoặc quan trọng. Các nút được tô màu nền sẽ tạo thêm trọng lượng trực quan và phù hợp với các chức năng như "thêm vào giỏ hàng" và "Đăng nhập". |
Hơi cao |
Nổi bật hơn nhờ có bóng đổ. |
Vừa với vai trò tương tự như các nút sắc độ. Tăng độ cao để làm cho nút xuất hiện nổi bật hơn nữa. |
Đường viền (outlined) |
Có đường viền không tô màu nền. |
Các nút có mức độ nhấn mạnh trung bình, chứa các hành động quan trọng nhưng không phải là hành động chính. Chúng kết hợp tốt với các nút khác để cho biết các hành động phụ thay thế như "Huỷ" hoặc "Quay lại". |
Văn bản |
Hiển thị văn bản không có nền hoặc đường viền. |
Nút ít nhấn mạnh, lý tưởng cho các thao tác ít quan trọng như liên kết điều hướng hoặc các chức năng phụ như "Tìm hiểu thêm" hoặc "Xem chi tiết". |
Hình ảnh sau đây minh hoạ 5 loại nút trong Material Design.
Nền tảng API
onClick: Hàm được gọi khi người dùng nhấn nút.enabled: Khi là false, tham số này sẽ khiến nút có vẻ như không hoạt động và không hoạt động.colors: Một thực thể củaButtonColorsxác định màu dùng trong nút.contentPadding: Khoảng đệm trong nút.
Nút được tô màu nền
Thành phần nút được tô màu nền sử dụng thành phần kết hợp Button cơ bản. Theo mặc định, khung này có một màu đồng nhất. Đoạn mã sau đây minh hoạ cách triển khai thành phần:
@Composable
fun FilledButtonExample(onClick: () -> Unit) {
Button(onClick = { onClick() }) {
Text("Filled")
}
}
Phương thức triển khai có dạng như sau:
Nút sắc độ được tô màu nền
Thành phần nút sắc độ màu sử dụng thành phần kết hợp FilledTonalButton.
Theo mặc định, màu này sẽ có nhiều sắc độ màu.
Đoạn mã sau đây minh hoạ cách triển khai thành phần:
@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
FilledTonalButton(onClick = { onClick() }) {
Text("Tonal")
}
}
Phương thức triển khai có dạng như sau:
Nút có đường viền
Thành phần nút có đường viền sử dụng thành phần kết hợp OutlinedButton. Theo mặc định, ô này sẽ có đường viền.
Đoạn mã sau đây minh hoạ cách triển khai thành phần:
@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
OutlinedButton(onClick = { onClick() }) {
Text("Outlined")
}
}
Phương thức triển khai có dạng như sau:
Nút nâng cao
Thành phần nút nâng cao sử dụng thành phần kết hợp ElevatedButton. Theo mặc định, lớp này có bóng thể hiện hiệu ứng độ cao. Lưu ý rằng về cơ bản, đó là một nút có đường viền và bóng đổ.
Đoạn mã sau đây minh hoạ cách triển khai thành phần:
@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
ElevatedButton(onClick = { onClick() }) {
Text("Elevated")
}
}
Phương thức triển khai có dạng như sau:
Nút văn bản
Thành phần nút văn bản sử dụng thành phần kết hợp TextButton. Cho đến khi được nhấn, màn hình sẽ chỉ xuất hiện ở dạng văn bản. Theo mặc định, mô tả không có màu nền hoặc đường viền liền mạch.
Đoạn mã sau đây minh hoạ cách triển khai thành phần:
@Composable
fun TextButtonExample(onClick: () -> Unit) {
TextButton(
onClick = { onClick() }
) {
Text("Text Button")
}
}
Phương thức triển khai có dạng như sau:
