Button
버튼은 사용자가 정의된 버튼을 트리거하도록 하는 기본 구성요소입니다. 있습니다. 버튼에는 5가지 유형이 있습니다. 다음 표에서는 각 5가지 버튼 유형의 모양과 있습니다.
유형 |
디자인 |
목적 |
---|---|---|
채워짐 |
대조되는 텍스트가 있는 단색 배경 |
높은 강조 버튼 애플리케이션의 기본 작업(예: '제출')에 사용됩니다. '저장'을 클릭합니다 그림자 효과는 버튼의 중요성을 강조합니다. |
채워진 색조 |
배경 색상은 표면에 따라 달라집니다. |
기본 작업이나 중요한 작업에도 사용할 수 있습니다. 채워진 버튼은 '장바구니에 추가'와 같은 시각적 무게감과 적합한 기능을 제공합니다. '로그인'을 클릭합니다. |
미열 |
그림자로 돋보이게 만들기 |
색조 버튼과 비슷한 역할을 합니다. 버튼이 더 눈에 띄게 표시되도록 고도를 높입니다. |
윤곽선 있음 |
채우기가 없는 테두리가 특징입니다. |
중간 중요도 버튼, 중요하지만 기본은 아닌 작업이 포함됩니다. 다른 버튼과 잘 짝을 지어 '취소'와 같은 대체 작업이나 보조 작업을 표시합니다. '뒤로' 버튼을 눌러도 됩니다. |
텍스트 |
배경이나 테두리 없이 텍스트를 표시합니다. |
낮은 강조 버튼. 탐색 링크와 같이 덜 중요한 작업이나 '자세히 알아보기'와 같은 보조 기능에 적합 또는 '세부정보 보기'를 클릭합니다. |
다음 이미지는 Material Design의 다섯 가지 버튼 유형을 보여줍니다.
API 노출 영역
onClick
: 사용자가 버튼을 누를 때 호출되는 함수입니다.enabled
: false인 경우 이 매개변수로 인해 버튼이 표시됩니다. 사용할 수 없습니다.colors
: 다음에서 사용되는 색상을 결정하는ButtonColors
의 인스턴스입니다. 버튼을 클릭합니다.contentPadding
: 버튼 내의 패딩입니다.
채워진 버튼
채워진 버튼 구성요소는 기본 Button
컴포저블을 사용합니다. 그것은
기본적으로 단색으로 채워집니다. 다음 스니펫은
구성요소를 구현해야 합니다.
@Composable fun FilledButtonExample(onClick: () -> Unit) { Button(onClick = { onClick() }) { Text("Filled") } }
이 구현은 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">!['채워짐'이라고 적힌 보라색 배경의 채워진 버튼](https://developer.android.com/static/develop/ui/compose/images/components/button-filled.png?authuser=4&hl=ko)
채워진 색조 버튼
채워진 색조 버튼 구성요소는 FilledTonalButton
컴포저블을 사용합니다.
기본적으로 색조 색상으로 채워집니다.
다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.
@Composable fun FilledTonalButtonExample(onClick: () -> Unit) { FilledTonalButton(onClick = { onClick() }) { Text("Tonal") } }
이 구현은 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">![연한 보라색 배경에 '채워짐'이라고 적힌 색조 버튼](https://developer.android.com/static/develop/ui/compose/images/components/button-tonal.png?authuser=4&hl=ko)
윤곽선이 있는 버튼
윤곽선이 표시된 버튼 구성요소는 OutlinedButton
컴포저블을 사용합니다. 그것은
기본적으로 윤곽선과 함께 표시됩니다.
다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.
@Composable fun OutlinedButtonExample(onClick: () -> Unit) { OutlinedButton(onClick = { onClick() }) { Text("Outlined") } }
이 구현은 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">![테두리가 어둡고 '윤곽선 있음'이라고 표시된 투명한 윤곽선 버튼](https://developer.android.com/static/develop/ui/compose/images/components/button-outlined.png?authuser=4&hl=ko)
돌출 버튼
승격된 버튼 구성요소는 ElevatedButton
컴포저블을 사용합니다. 여기에는 다음이 있습니다.
기본적으로 고도 효과를 나타내는 그림자. 참고:
기본적으로 그림자가 있는 윤곽선이 있는 버튼입니다.
다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.
@Composable fun ElevatedButtonExample(onClick: () -> Unit) { ElevatedButton(onClick = { onClick() }) { Text("Elevated") } }
이 구현은 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">![회색 배경에 '높음'이라고 적힌 돌출 버튼](https://developer.android.com/static/develop/ui/compose/images/components/button-elevated.png?authuser=4&hl=ko)
텍스트 버튼
텍스트 버튼 구성요소는 TextButton
컴포저블을 사용합니다. 누를 때까지,
텍스트로만 표시됩니다. 기본적으로 단색 채우기 또는 윤곽선이 없습니다.
다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.
@Composable fun TextButtonExample(onClick: () -> Unit) { TextButton( onClick = { onClick() } ) { Text("Text Button") } }
이 구현은 다음과 같이 표시됩니다.
<ph type="x-smartling-placeholder">!['텍스트 버튼'이라는 텍스트 버튼](https://developer.android.com/static/develop/ui/compose/images/components/button-text.png?authuser=4&hl=ko)