이 페이지는 Cloud Translation API를 통해 번역되었습니다.

칩

Chip 구성요소는 입력이나 속성, 작업을 나타내는 대화형 압축 요소입니다.

분석

칩에는 텍스트 라벨 최대 2개와 선택적 아이콘이 포함될 수 있습니다. 적어도 텍스트 라벨이나 아이콘 하나는 제공해야 합니다. 텍스트 라벨이 너무 길면 칩이 텍스트를 자를 수 있습니다. 기본 라벨은 보조 라벨이 있는 경우 텍스트 한 줄이지만 보조 라벨이 없으면 최대 텍스트 두 줄입니다.

A. 기본 라벨
B. 보조 라벨(선택사항)
C. 아이콘(선택사항)
D. 컨테이너

디자인 권장사항

이미지 칩

이미지 칩에는 선택한 이미지와 관련된 작업이 포함됩니다. 이미지 칩은 좀 더 구체적인 디자인과 분위기를 전달하는 데 효과적입니다.

Chip(
    ...
    label = {
        Text(
            text = "Summer Mix",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
         )
    },
    colors = ChipDefaults.imageBackgroundChipColors(
        backgroundImagePainter = painterResource(id = R.drawable.clouds)
    )
)

아바타 칩

선택한 아바타와 관련된 작업에 아바타 칩을 사용합니다. 아바타 칩에는 연락처 ID 사진과 같이 아바타를 더 쉽게 인식되도록 하는 데 사용되는 아이콘도 포함될 수 있습니다. 아바타 아이콘은 32x32dp입니다.

Chip(
    ...
    label = {
        Text(text = "Mark Castle")
    },
    icon = {
        Icon(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = null,
            modifier = Modifier.size(ChipDefaults.LargeIconSize)
                .wrapContentSize(align = Alignment.Center)
        )
    }
)

계층 구조

다양한 색상 채우기를 사용하여 칩 계층 구조를 표시합니다. 주요 작업을 위해 눈에 잘 띄는 단일 칩을 포함하도록 각 화면을 설계합니다.

높은 강조
페이지의 주요 작업에 높은 강조 칩을 사용합니다. 높은 강조 칩을 채울 때는 기본 색상을 사용하세요.

중간 강조
주요 작업보다 덜 중요한 작업에는 중간 강조 칩을 사용합니다. 중간 강조 칩을 채울 때는 보조 색상을 사용하세요.

또는 맞춤 OutlinedChip 구성요소를 사용합니다. 윤곽선이 있는 칩에는 투명한 배경, 불투명도 60%의 기본 변형 색상 스트로크, 기본 색상 콘텐츠가 있습니다.

낮은 강조
낮은 강조 칩은 투명색 채우기와 텍스트 라벨만 있습니다. 낮은 강조 칩을 사용하여 기본 또는 보조 칩과의 하위 관계를 나타낼 수 있습니다.

크기

기본 칩

아이콘: 24dp
높이: 52dp

압축 칩

아이콘: 20dp
높이: 32dp
탭 가능 영역: 48dp

사용

설정의 표준 칩과 운동 앱의 이미지 칩과 같은 칩 사용 예를 참고하세요.

칩

분석

디자인 권장사항

관련 구성요소

계층 구조

크기

사용