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 hành động đã xác định. Có 5 loại nút. Bảng này mô tả hình thức của từng loại trong số 5 loại nút, cũng như nơi bạn nên sử dụng chúng:
| Loại | Hình thức | Mục đích |
|---|---|---|
| Tô màu nền | Nền đồng màu với văn bản tương phản. | Nút nhấn mạnh. Đây là các nút dành cho hành động chính trong một ứ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. |
| Tô màu nền | Màu nền thay đổi để phù hợp với vùng hiển thị. | Cũng dành cho các hành động chính hoặc quan trọng. Nút tô màu nền mang lại trọng số trực quan cao hơn và phù hợp với các chức năng như "thêm vào giỏ hàng" và "Đăng nhập". |
| Lồi | Nổi bật bằng cách có bóng. | Phục vụ mục đích tương tự như nút có màu sắc. Tăng độ cao để nút xuất hiện nổi bật hơn nữa. |
| Đường viền | Có đường viền nhưng không tô màu nền. | Nút nhấn 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. Các nút này kết hợp tốt với các nút khác để biểu thị 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 mà không có nền hoặc đường viền. | Nút nhấn thấp, lý tưởng cho các hành động ít quan trọng hơn, chẳng hạn như đường 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 này minh hoạ 5 loại nút trong Material Design:
Vùng hiển thị API
onClick- Hàm mà hệ thống gọi khi người dùng nhấn nút.
enabled- Khi
false, tham số này khiến nút xuất hiện dưới dạng không dùng được và không hoạt động. colors- Một thực thể của
ButtonColorsxác định màu dùng trong nút. contentPadding- Phần đệ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, nút này được tô màu nền. Đoạn mã này cho biết cách triển khai thành phần:
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
Cách triển khai này xuất hiện như sau:
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 FilledTonalButton.
Theo mặc định, nút này được tô màu nền.
Đoạn mã này cho biết cách triển khai thành phần:
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
Cách triển khai này xuất hiện 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út này xuất hiện với đường viền.
Đoạn mã này cho biết cách triển khai thành phần:
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
Cách triển khai này xuất hiện như sau:
Nút lồi
Thành phần nút lồi sử dụng thành phần kết hợp ElevatedButton. Theo mặc định, nút này có bóng biểu thị hiệu ứng độ cao. Đây là nút được tô màu nền và có bóng.
Đoạn mã này cho biết cách triển khai thành phần:
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
Cách triển khai này xuất hiện 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. Nút này chỉ xuất hiện dưới dạng văn bản cho đến khi được nhấn. Theo mặc định, nút này không có đường viền hoặc màu nền.
Đoạn mã này cho biết cách triển khai thành phần:
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
Cách triển khai này xuất hiện như sau:
