컴포넌트
타입이 지정된 Vue wrapper 62개로, 각각 하나의 Polaris web component에 대응하며 Shopify 레퍼런스와 같은 방식으로 분류되어 있습니다.
액션
- SButton<s-button>작업을 실행하거나 다른 곳으로 이동하는 버튼으로, primary, secondary, tertiary 변형과 아이콘, 로딩 상태를 지원합니다.
- SButtonGroup<s-button-group>기본 작업과 보조 작업처럼 서로 관련된 버튼을 한데 묶어 배치합니다.
- SClickable<s-clickable>버튼 스타일을 강제하지 않고 어떤 콘텐츠든 버튼이나 링크처럼 클릭할 수 있게 만듭니다.
- SClickableChip<s-clickable-chip>클릭하거나 링크로 이동하거나 제거할 수 있는 인터랙티브 칩으로, 필터와 적용된 태그에 유용합니다.
- SLink<s-link>다른 페이지나 URL로 이동하거나 명령을 실행하는 텍스트 링크입니다.
- SMenu<s-menu>버튼에서 열리며 오버레이에 표시되는 작업 목록입니다.
- SPressButton<s-press-button>눌린 상태 또는 눌리지 않은 상태를 유지하는 토글 버튼으로, 모드나 필터를 켜고 끌 때 사용합니다.
피드백 및 상태
- SBadge<s-badge>주문, 결제, 주문 처리 같은 객체의 상태를 보여 주는 작은 라벨입니다.
- SBanner<s-banner>페이지나 섹션 상단에 중요한 정보, 경고, 오류를 눈에 띄게 표시하는 메시지입니다.
- SEmptyState<s-empty-state>화면에 아직 콘텐츠가 없는 이유를 설명하고 판매자가 해야 할 첫 작업을 안내합니다.
- SProgress<s-progress>작업이 최댓값을 향해 얼마나 진행되었는지 보여 주는 진행률 표시줄입니다.
- SSpinner<s-spinner>콘텐츠나 작업이 로딩 중임을 나타내는 애니메이션 표시기입니다.
폼
- SCheckbox<s-checkbox>예/아니요 선택을 위한 단일 체크박스로, v-model로 체크 상태에 바인딩됩니다.
- SChoice<s-choice>선택 목록 안의 옵션 하나입니다.
- SChoiceList<s-choice-list>하나 또는 여러 옵션을 고르기 위한 라디오 버튼 또는 체크박스 그룹입니다.
- SColorField<s-color-field>색상 값을 입력하는 텍스트 입력 필드로, 알파 채널을 선택적으로 지원합니다.
- SColorPicker<s-color-picker>색상을 선택하는 시각적 컨트롤입니다.
- SDateField<s-date-field>날짜를 입력하는 입력 필드입니다.
- SDatePicker<s-date-picker>단일 날짜나 날짜 범위를 선택하는 캘린더입니다.
- SDropZone<s-drop-zone>드래그 앤 드롭이나 파일 선택기로 파일을 받는 파일 업로드 영역입니다.
- SEmailField<s-email-field>이메일 주소를 입력하는 텍스트 입력 필드입니다.
- SMoneyField<s-money-field>금액을 입력하는 숫자 입력 필드입니다.
- SNumberField<s-number-field>최솟값, 최댓값, 증감 단위를 선택적으로 지정할 수 있는 숫자 입력 필드입니다.
- SOption<s-option>셀렉트 안의 옵션 하나입니다.
- SOptionGroup<s-option-group>셀렉트 안의 관련 옵션을 공통 라벨 아래에 묶습니다.
- SPasswordField<s-password-field>입력한 내용을 가려 주는 비밀번호용 텍스트 입력 필드입니다.
- SSearchField<s-search-field>검색어를 입력하는 텍스트 입력 필드입니다.
- SSelect<s-select>목록에서 옵션 하나를 고르는 드롭다운입니다.
- SSwitch<s-switch>설정을 켜고 끄는 토글 스위치입니다.
- STextArea<s-text-area>메모나 설명처럼 긴 내용을 위한 여러 줄 텍스트 입력 필드입니다.
- STextField<s-text-field>라벨, placeholder, 유효성 검사 오류, 도움말 텍스트를 갖춘 한 줄 텍스트 입력 필드입니다.
- SUrlField<s-url-field>웹 주소를 입력하는 텍스트 입력 필드입니다.
레이아웃 및 구조
- SBox<s-box>패딩, 배경, 테두리, 모서리 둥글기, 크기를 지정하는 범용 컨테이너입니다.
- SDivider<s-divider>콘텐츠를 구분하는 가로선 또는 세로선입니다.
- SGrid<s-grid>콘텐츠를 행과 열로 배치하는 CSS grid 컨테이너입니다.
- SGridItem<s-grid-item>여러 열이나 행에 걸칠 수 있는 grid의 자식 요소입니다.
- SListItem<s-list-item>순서 있는 목록 또는 순서 없는 목록 안의 항목 하나입니다.
- SOrderedList<s-ordered-list>번호가 매겨진 목록입니다.
- SPage<s-page>제목, 페이지 작업, 콘텐츠 영역을 갖춘 최상위 페이지 레이아웃입니다.
- SQueryContainer<s-query-container>요소를 크기 컨테이너로 만들어 자식 요소가 container query로 너비에 맞게 조정되도록 합니다.
- SScrollBox<s-scroll-box>콘텐츠가 넘칠 때 스크롤되는 컨테이너입니다.
- SSection<s-section>관련 콘텐츠를 묶으며, 제목, 부제목, 작업을 선택적으로 포함할 수 있습니다.
- SStack<s-stack>자식 요소를 일관된 간격과 정렬로 가로 또는 세로로 배치합니다.
- STable<s-table>구조화된 데이터를 위한 테이블로, 페이지네이션, 로딩 상태, 작은 화면용 목록 레이아웃을 선택적으로 지원합니다.
- STableBody<s-table-body>데이터 행을 담는 테이블 본문입니다.
- STableCell<s-table-cell>테이블 행 안의 셀 하나입니다.
- STableHeader<s-table-header>테이블의 열 헤더 하나입니다.
- STableHeaderRow<s-table-header-row>테이블 상단의 열 헤더 행입니다.
- STableRow<s-table-row>테이블의 데이터 행 하나입니다.
- SUnorderedList<s-unordered-list>글머리 기호 목록입니다.