Jetpack Compose Glimmer의 버튼

적용 가능한 XR 기기

이 안내는 이러한 유형의 XR 기기용 환경을 구축하는 데 도움이 됩니다.

XR 기기 유형 알아보기 →

XR 기기 유형 알아보기 →

Jetpack Compose Glimmer에서 Button는 디스플레이 글라스 입력에 최적화된 대화형 구성요소로, 상태를 통해 명확한 시각적 피드백을 제공하여 사용자의 작업을 안내합니다.

버튼은 테두리, 깊이와 같은 물리적 속성을 자동으로 처리하는 Jetpack Compose Glimmer 표면 시스템을 기반으로 빌드됩니다.

표준 버튼에는 텍스트 라벨과 선택적 아이콘이 포함됩니다. 기본 또는 보조 작업에 사용할 수 있습니다. Jetpack Compose Glimmer에서는 아이콘 버튼, 전환 버튼과 같은 특수 버튼도 별도의 구성요소로 정의됩니다.

기본값

크게

분석

버튼은 컨테이너와 라벨로 구성되며, 선택적으로 선행 및 후행 아이콘이 포함될 수 있습니다.

크기

Jetpack Compose Glimmer 버튼은 두 가지 크기 변형을 지원합니다. 이는 최소 높이와 내부 패딩에 영향을 미칩니다.

주

Jetpack Compose Glimmer의 버튼은 상태를 전달하기 위해 모양을 변경합니다.

• 사용 설정됨: 대화형 버튼의 기본 상태입니다.
• 포커스: 포커스가 맞춰지면 버튼은 GlimmerTheme.depthEffectLevels.level1 및 포커스 테두리 강조 표시를 적용합니다.
• 눌림: 활성화되면 반투명 흰색 오버레이가 표면에 적용됩니다.
• 사용 중지됨: 버튼이 입력에 응답하지 않으며 시각적 모양이 조정됩니다.

버튼 기본값

표준 버튼에는 다음 기본값이 적용됩니다.

• 기본적으로 버튼은 GlimmerTheme.typography.bodySmall을 사용합니다. 버튼 내 텍스트는 간결하고 작업을 명확하게 설명해야 합니다.
• 버튼의 기본 모양은 GlimmerTheme.shapes.large입니다. 이 일관된 라운딩은 사용자가 디스플레이 글래스 인터페이스에서 버튼을 식별하는 데 도움이 됩니다.

예: 텍스트가 있는 버튼

다음 코드는 텍스트가 있는 표준 버튼을 만듭니다.

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}
ButtonSamples.kt

예: 선행 및 후행 아이콘이 있는 버튼

텍스트의 시작 부분 (leadingIcon 사용) 또는 끝부분 (trailingIcon 사용)에 아이콘을 추가하여 추가 컨텍스트를 제공할 수도 있습니다.

다음 코드는 선행 아이콘이 있는 버튼을 만듭니다.

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}
ButtonSamples.kt