Thẻ

Thành phần Card chứa nội dung và thao tác về một chủ đề đơn lẻ.

Cấu trúc

Mỗi thành phần thẻ chỉ chiếm một ô. Thẻ có thể chứa biểu tượng, hình ảnh hoặc nhãn có thể tuỳ chỉnh.

Theo mặc định, các thẻ có hình chữ nhật với các góc bo tròn trên nền màu chuyển sắc (gradient). Đặt chiều cao tối đa của thẻ là 60% để đảm bảo thẻ hiển thị đầy đủ trên màn hình vì màn hình tròn có thể cắt tới 20% phần trên cùng và dưới cùng của màn hình.

Thẻ tiêu đề

Sử dụng Thẻ tiêu đề để hiển thị thông tin trong một ứng dụng, chẳng hạn như một thông báo. Thẻ tiêu đề có bố cục 3 ô bao gồm tiêu đề, trường thời gian (không bắt buộc) và nội dung liên quan, có thể là hình ảnh hoặc văn bản.

Thẻ ứng dụng

Sử dụng Thẻ ứng dụng để hiển thị các thành phần tương tác của nhiều ứng dụng. Thẻ ứng dụng có bố cục 5 ô bao gồm biểu tượng ứng dụng, tên ứng dụng, thời gian diễn ra hoạt động, Tiêu đề của một số loại và nội dung có liên quan như hình ảnh hoặc văn bản.

Đề xuất thiết kế

Thẻ hình ảnh

Thẻ hình ảnh hiển thị nội dung liên quan đến một chủ đề kèm theo hình nền. Thẻ hình ảnh cũng có thể hiển thị hình ảnh một cách độc lập.

TitleCard(
    onClick = { ... },
    title = { Text("Workout") },
    backgroundPainter = CardDefaults.imageWithScrimBackgroundPainter(
        backgroundImagePainter = painterResource(id = R.drawable.backgroundimage)
    ),
    contentColor = MaterialTheme.colors.onSurface,
    titleColor = MaterialTheme.colors.onSurface
) {
    Text("12 songs · 1 Hour 32 mins")
}

Kích thước

Chiều rộng thẻ

Theo mặc định, các thẻ có chiều rộng tối đa của vùng chứa.

Chiều cao thẻ

Chiều cao thẻ có kích thước linh hoạt. Kích thước này là do nội dung của các thành phần quyết định.

Trên mặt đồng hồ hình tròn, các thẻ cao hơn 60% chiều cao của màn hình sẽ bị cắt bớt.