컴포넌트

명령을 실행하거나 다음 단계로 이동하는 기본 액션입니다.

설정을 켜거나 끄는 두 가지 상태의 입력 요소입니다.

연속적인 범위에서 값을 조절합니다.

서로 배타적인 선택지 중 하나를 선택합니다.

여러 선택지에서 원하는 항목을 각각 선택하거나 해제합니다.

미리 정의된 선택지 중 하나를 선택합니다.

현재 작업에 필요한 도구를 모읍니다.

사용자가 텍스트를 입력하고 수정하는 필드입니다.

키워드로 원하는 항목을 찾습니다.

비밀번호를 입력하고 필요할 때 표시 여부를 바꿉니다.

전화번호를 읽기 쉬운 형식으로 입력합니다.

인증을 위한 일회용 숫자 코드를 입력합니다.

정해진 범위 안에서 수량을 늘리거나 줄입니다.

일정을 위해 날짜를 선택합니다.

오전·오후, 시, 분을 각각 조절해 시간을 선택합니다.

음성을 녹음하고 다시 듣습니다.

손가락이나 마우스로 서명을 작성합니다.

파일을 끌어 놓거나 찾아 선택합니다.

관련 정보와 액션을 하나의 주제로 묶습니다.

이미지를 배경으로 사용하고 하단에 제목과 태그를 배치합니다.

관련 항목을 세로 목록으로 정리합니다.

같은 속성을 가진 데이터를 행과 열로 비교합니다.

콘텐츠를 일정한 열과 간격으로 배치합니다.

이미지 모음을 비교하고 크게 확인합니다.

여러 이미지를 한 영역에서 순서대로 탐색합니다.

영역의 너비가 변하면 콘텐츠도 같은 비율로 늘어나거나 줄어듭니다.

현재 흐름 안에서 상세 영역을 펼쳐 아래 콘텐츠를 밀어냅니다. 아코디언이나 추가 입력 영역에 사용합니다.

패널이 공간을 차지하면 기존 콘텐츠의 폭이 줄어듭니다. 화면을 덮지 않고 메뉴나 보조 작업을 함께 보여줍니다.

선택한 요소 가까이에 보조 정보를 엽니다.

현재 페이지에서 짧은 편집 작업을 처리합니다.

화면 아래에서 보조 작업이나 선택지를 엽니다.

화면 옆에서 상세 정보와 보조 작업을 제공합니다.

방금 수행한 작업의 결과를 잠시 알려줍니다.

현재 작업을 막지 않고 화면 한쪽에서 사용자의 판단을 요청합니다.

같은 맥락의 화면을 탭으로 전환합니다.

같은 맥락의 콘텐츠 패널을 전환합니다.

조건을 선택해 표시할 결과를 좁힙니다.

주요 화면 사이의 이동을 제공합니다.

현재 위치와 상위 경로를 보여줍니다.

문서의 제목 위계를 보여주고 원하는 섹션으로 이동합니다.

관련 내용을 필요한 때 펼쳐 확인합니다.

폴더와 하위 항목의 계층을 탐색합니다.

이미지 캐러셀에서 현재 위치와 전체 이미지 수를 점으로 표시합니다.

여러 페이지로 나뉜 결과를 탐색합니다.

콘텐츠의 주제나 적용된 조건을 표시합니다.

상태나 짧은 보조 정보를 표시합니다.

시스템 응답을 기다리는 동안 로딩 상태를 표시합니다.

콘텐츠를 불러오는 동안 실제 요소의 형태와 위치를 미리 보여줍니다.

작업이 얼마나 진행되었는지 비율로 표시합니다.

사람이나 팀을 작은 시각 요소로 식별합니다.

여러 참여자를 묶어 보여줍니다.

목표 달성 비율을 원형으로 표시합니다.

일별 진행과 챌린지 달성을 표시합니다.

날짜별 활동량을 작은 칸으로 표시합니다.

여러 단계로 이루어진 과정의 현재 위치를 표시합니다.

시간 순서에 따라 사건과 진행 상황을 살펴봅니다.