컴포넌트

전체 컴포넌트

용도별 컴포넌트 목록입니다.

입력

Autocomplete텍스트 입력에 추천 항목을 표시합니다.Button클릭하거나 키보드로 작업을 실행하는 버튼입니다.Checkbox Group여러 항목의 선택값을 배열로 관리합니다.Checkbox항목을 선택하거나 해제합니다.Combobox목록을 검색하고 항목을 선택합니다.Field입력 요소에 레이블과 설명, 오류 메시지를 연결합니다.Fieldset관련 입력을 하나의 그룹으로 묶습니다.Form입력값을 검증하고 제출합니다.Icon Button아이콘으로 작업을 실행합니다.Input한 줄의 텍스트를 입력합니다.Number Field숫자를 입력하거나 증감 버튼으로 조절합니다.OTP Field인증 코드를 분리된 입력 칸에 입력합니다.Radio Group라디오 항목의 선택 상태를 관리합니다.Radio여러 항목 중 하나를 선택합니다.Select검색 없이 목록에서 하나 또는 여러 값을 선택합니다.Slider범위 안에서 숫자를 조절합니다.Switch설정을 켜거나 끕니다.Textarea여러 줄의 텍스트를 입력합니다.

탐색

Accordion여러 항목의 내용을 접거나 펼칩니다.Breadcrumb현재 페이지의 상위 경로를 표시합니다.Collapsible하나의 영역을 접거나 펼칩니다.Menubar여러 메뉴를 가로로 배치합니다.Navigation Item아이콘과 레이블로 탐색 항목을 표시합니다.Navigation Menu하위 링크가 있는 탐색 메뉴를 표시합니다.Sidebar페이지 탐색 메뉴를 표시합니다.Tabs관련 콘텐츠를 전환합니다.Toggle Group관련 토글의 선택 상태를 관리합니다.Toggle버튼의 선택 상태를 전환합니다.Toolbar관련 작업을 도구 모음으로 표시합니다.

피드백

Alert Dialog작업을 실행하기 전에 확인을 받습니다.Context Menu요소의 작업 메뉴를 우클릭으로 엽니다.Dialog현재 화면 위에서 입력이나 작업을 수행합니다.Drawer화면 가장자리에서 패널을 엽니다.Menu버튼을 눌러 작업 목록을 엽니다.Popover기준 요소 옆에 내용이나 작업을 표시합니다.Preview Card링크에 대한 보조 정보를 표시합니다.Status Meter상태를 네 단계로 표시합니다.Toast작업 결과를 화면 아래 중앙에 잠시 표시합니다.Tooltip요소에 대한 짧은 설명을 표시합니다.

콘텐츠

Alert화면 안에 안내 메시지를 표시합니다.Avatar사용자 이미지나 대체 내용을 표시합니다.Badge상태나 개수를 표시합니다.Card프로젝트, 에셋, 관련 정보를 하나의 영역에 표시합니다.Carousel여러 항목을 가로로 탐색합니다.Chat대화 목록과 그룹 선택 패널을 표시합니다.Empty표시할 데이터가 없을 때 안내합니다.Icon이름과 크기로 아이콘을 지정합니다.List콘텐츠를 목록으로 표시합니다.Meter정해진 범위 안의 측정값을 표시합니다.Progress작업의 진행률을 표시합니다.Scroll Area지정한 영역 안에서 콘텐츠를 스크롤합니다.Separator콘텐츠 영역을 구분합니다.Skeleton로딩 중인 콘텐츠의 자리를 표시합니다.Table데이터를 행과 열로 표시합니다.Typography제목, 본문, 코드를 표시합니다.

설치

npm 패키지 또는 소스 복사로 PLY를 설치합니다.

Icon Button

아이콘으로 작업을 실행합니다.