컴포넌트

버튼

버튼은 유저가 클릭 할 수 있는 요소를 제공하며 하나의 탭을 눌러 액션 또는 선택을 할 수 있습니다.

IMG_2260.PNG

⬆️ 맨위로 돌아가기


플로팅 버튼

플로팅 버튼(FAB)은 화면에 떠 있는 버튼으로 앱 UI의 기본 작업을 트리거하는 버튼입니다.

IMG_2262.PNG

⬆️ 맨위로 돌아가기


체크박스

체크박스는 복수 개를 선택할 수 있는 요소로, 특정 항목의 선택 여부를 표시합니다.

토스(앱)37.png

⬆️ 맨위로 돌아가기


라디오 버튼

라디오 버튼은 여러 항목 중 하나의 항목을 선택할 수 있는 요소로, 주로 원형 형태로 제공됩니다.

IMG_2303.PNG

⬆️ 맨위로 돌아가기


토글 스위치

토글은 두 가지 상태를 전환하는 요소로, 일반적으로 On/Off 상태에 사용됩니다.

IMG_2303.PNG

⬆️ 맨위로 돌아가기


슬라이더

슬라이더는 유저가 범위 내에서 값을 조절할 수 있는 컨텐츠를 시각적으로 표현합니다.

에이블리186.png

⬆️ 맨위로 돌아가기


페이지 컨트롤

페이지 컨트롤은 인디케이터로 이루어진 하나의 열이며, 각각의 인디케이터가 하나의 컨텐츠 페이지를 의미합니다.

쿠팡이츠06.png

⬆️ 맨위로 돌아가기


페이지네이션

페이지네이션은 여러 페이지를 표시하며, 특정 페이지 또는 다음/이전 페이지로 이동할 수 있습니다.

⬆️ 맨위로 돌아가기


스테퍼

스테퍼는 유저가 아이콘을 선택하여 범위 내에서 값을 증가 또는 감소시키는 요소입니다.

미소162.png

쿠팡이츠314.png

⬆️ 맨위로 돌아가기


날짜 선택기/날짜 피커

날짜 선택기/날짜 피커는 사용자가 특정 날짜 또는 날짜 범위를 선택할 수 있는 요소입니다.

미소142.png

⬆️ 맨위로 돌아가기


시간 선택기/시간 피커

시간 선택기/시간 피커는 사용자가 특정 시간 또는 시간 범위를 선택할 수 있는 요소입니다.

토스(웹)143.png

⬆️ 맨위로 돌아가기


색깔 선택기/색깔 피커

색깔 선택기/색깔 피커는 사용자가 특정 색깔을 선택할 수 있는 요소입니다.

에이블리180.png

⬆️ 맨위로 돌아가기


프로그레스 인디케이터

프로그레스 인디케이터는 프로세스의 전체 길이 또는 대기 시간을 표시하고, 현재 진행중인 위치를 나타냅니다.

토스(앱)1306.png

⬆️ 맨위로 돌아가기


로딩 스피너

로딩 스피너는 현재 로딩중인 상태를 표시합니다.

IMG_2222.PNG

⬆️ 맨위로 돌아가기


텍스트 필드

텍스트 필드는 사용자가 텍스트를 입력하거나 수정할 수 있는 영역입니다.

토스(앱)1233.png

⬆️ 맨위로 돌아가기


메뉴

메뉴는 선택할 수 있는 항목들의 리스트를 표시합니다.

젠리113.png

⬆️ 맨위로 돌아가기