Button

버튼은 사용자가 정의된 버튼을 트리거하도록 하는 기본 구성요소입니다. 있습니다. 버튼에는 5가지 유형이 있습니다. 다음 표에서는 각 5가지 버튼 유형의 모양과 있습니다.

유형

디자인

목적

채워짐

대조되는 텍스트가 있는 단색 배경

높은 강조 버튼 애플리케이션의 기본 작업(예: '제출')에 사용됩니다. '저장'을 클릭합니다 그림자 효과는 버튼의 중요성을 강조합니다.

채워진 색조

배경 색상은 표면에 따라 달라집니다.

기본 작업이나 중요한 작업에도 사용할 수 있습니다. 채워진 버튼은 '장바구니에 추가'와 같은 시각적 무게감과 적합한 기능을 제공합니다. '로그인'을 클릭합니다.

미열

그림자로 돋보이게 만들기

색조 버튼과 비슷한 역할을 합니다. 버튼이 더 눈에 띄게 표시되도록 고도를 높입니다.

윤곽선 있음

채우기가 없는 테두리가 특징입니다.

중간 중요도 버튼, 중요하지만 기본은 아닌 작업이 포함됩니다. 다른 버튼과 잘 짝을 지어 '취소'와 같은 대체 작업이나 보조 작업을 표시합니다. '뒤로' 버튼을 눌러도 됩니다.

텍스트

배경이나 테두리 없이 텍스트를 표시합니다.

낮은 강조 버튼. 탐색 링크와 같이 덜 중요한 작업이나 '자세히 알아보기'와 같은 보조 기능에 적합 또는 '세부정보 보기'를 클릭합니다.

다음 이미지는 Material Design의 다섯 가지 버튼 유형을 보여줍니다.

고유한 특성이 강조 표시된 5가지 버튼 구성요소의 각 예
그림 1. 다섯 가지 버튼 구성요소

API 노출 영역

  • onClick: 사용자가 버튼을 누를 때 호출되는 함수입니다.
  • enabled: false인 경우 이 매개변수로 인해 버튼이 표시됩니다. 사용할 수 없습니다.
  • colors: 다음에서 사용되는 색상을 결정하는 ButtonColors의 인스턴스입니다. 버튼을 클릭합니다.
  • contentPadding: 버튼 내의 패딩입니다.

채워진 버튼

채워진 버튼 구성요소는 기본 Button 컴포저블을 사용합니다. 그것은 기본적으로 단색으로 채워집니다. 다음 스니펫은 구성요소를 구현해야 합니다.

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}

이 구현은 다음과 같이 표시됩니다.

<ph type="x-smartling-placeholder">
</ph> &#39;채워짐&#39;이라고 적힌 보라색 배경의 채워진 버튼
그림 2. 채워진 버튼

채워진 색조 버튼

채워진 색조 버튼 구성요소는 FilledTonalButton 컴포저블을 사용합니다. 기본적으로 색조 색상으로 채워집니다.

다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}

이 구현은 다음과 같이 표시됩니다.

<ph type="x-smartling-placeholder">
</ph> 연한 보라색 배경에 &#39;채워짐&#39;이라고 적힌 색조 버튼
그림 3. 색조 버튼

윤곽선이 있는 버튼

윤곽선이 표시된 버튼 구성요소는 OutlinedButton 컴포저블을 사용합니다. 그것은 기본적으로 윤곽선과 함께 표시됩니다.

다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}

이 구현은 다음과 같이 표시됩니다.

<ph type="x-smartling-placeholder">
</ph> 테두리가 어둡고 &#39;윤곽선 있음&#39;이라고 표시된 투명한 윤곽선 버튼
그림 4. 윤곽선이 표시된 버튼

돌출 버튼

승격된 버튼 구성요소는 ElevatedButton 컴포저블을 사용합니다. 여기에는 다음이 있습니다. 기본적으로 고도 효과를 나타내는 그림자. 참고: 기본적으로 그림자가 있는 윤곽선이 있는 버튼입니다.

다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}

이 구현은 다음과 같이 표시됩니다.

<ph type="x-smartling-placeholder">
</ph> 회색 배경에 &#39;높음&#39;이라고 적힌 돌출 버튼
그림 5. 돌출 버튼

텍스트 버튼

텍스트 버튼 구성요소는 TextButton 컴포저블을 사용합니다. 누를 때까지, 텍스트로만 표시됩니다. 기본적으로 단색 채우기 또는 윤곽선이 없습니다.

다음 스니펫은 구성요소를 구현하는 방법을 보여줍니다.

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}

이 구현은 다음과 같이 표시됩니다.

<ph type="x-smartling-placeholder">
</ph> &#39;텍스트 버튼&#39;이라는 텍스트 버튼
그림 6. 텍스트 버튼

추가 리소스