Components
62 Vue wrapper có type, mỗi wrapper cho một Polaris web component, được chia nhóm giống tài liệu tham khảo của Shopify.
Hành động
- SButton<s-button>Kích hoạt một hành động hoặc điều hướng, có các biến thể primary, secondary, tertiary, icon và trạng thái loading.
- SButtonGroup<s-button-group>Sắp xếp một nhóm nút liên quan cạnh nhau, chẳng hạn một hành động chính và các hành động phụ của nó.
- SClickable<s-clickable>Biến bất kỳ nội dung nào thành nút hoặc liên kết có thể nhấp, mà không áp đặt kiểu dáng của nút.
- SClickableChip<s-clickable-chip>Một chip tương tác có thể nhấp, mở như liên kết hoặc gỡ bỏ — hữu ích cho bộ lọc và tag đã áp dụng.
- SLink<s-link>Một liên kết văn bản điều hướng đến trang hoặc URL khác, hoặc chạy một lệnh.
- SMenu<s-menu>Một danh sách hành động hiển thị trong overlay, được mở từ một nút.
- SPressButton<s-press-button>Một nút bật/tắt giữ trạng thái được nhấn hoặc không, dùng để bật và tắt một chế độ hoặc bộ lọc.
Phản hồi và trạng thái
- SBadge<s-badge>Một nhãn nhỏ cho biết trạng thái của một đối tượng, chẳng hạn đơn hàng, thanh toán hoặc giao hàng.
- SBanner<s-banner>Một thông báo nổi bật hiển thị thông tin quan trọng, cảnh báo hoặc lỗi ở đầu trang hoặc một section.
- SEmptyState<s-empty-state>Giải thích vì sao một màn hình chưa có nội dung và chỉ cho người bán hành động đầu tiên cần thực hiện.
- SProgress<s-progress>Một thanh tiến trình cho biết tác vụ đã tiến đến đâu so với giá trị tối đa.
- SSpinner<s-spinner>Một chỉ báo động cho biết nội dung hoặc một hành động đang tải.
Form
- SCheckbox<s-checkbox>Một checkbox đơn cho lựa chọn có/không, gắn với trạng thái checked qua v-model.
- SChoice<s-choice>Một tùy chọn bên trong choice list.
- SChoiceList<s-choice-list>Một nhóm radio button hoặc checkbox để chọn một hoặc nhiều tùy chọn.
- SColorField<s-color-field>Một ô nhập văn bản để nhập giá trị màu, có thể kèm kênh alpha.
- SColorPicker<s-color-picker>Một điều khiển trực quan để chọn màu.
- SDateField<s-date-field>Một ô nhập để nhập ngày.
- SDatePicker<s-date-picker>Một lịch để chọn một ngày hoặc một khoảng ngày.
- SDropZone<s-drop-zone>Một vùng tải tệp lên, nhận tệp bằng kéo thả hoặc từ hộp chọn tệp.
- SEmailField<s-email-field>Một ô nhập văn bản cho địa chỉ email.
- SMoneyField<s-money-field>Một ô nhập số cho số tiền.
- SNumberField<s-number-field>Một ô nhập số với giá trị tối thiểu, tối đa và bước nhảy tùy chọn.
- SOption<s-option>Một tùy chọn bên trong select.
- SOptionGroup<s-option-group>Nhóm các tùy chọn liên quan trong select dưới một nhãn chung.
- SPasswordField<s-password-field>Một ô nhập văn bản cho mật khẩu, che đi những gì được gõ.
- SSearchField<s-search-field>Một ô nhập văn bản cho truy vấn tìm kiếm.
- SSelect<s-select>Một dropdown để chọn một tùy chọn từ danh sách.
- SSwitch<s-switch>Một công tắc bật/tắt một thiết lập.
- STextArea<s-text-area>Một ô nhập văn bản nhiều dòng cho nội dung dài hơn như ghi chú hoặc mô tả.
- STextField<s-text-field>Một ô nhập văn bản một dòng với nhãn, placeholder, lỗi xác thực và văn bản trợ giúp.
- SUrlField<s-url-field>Một ô nhập văn bản cho địa chỉ web.
Bố cục và cấu trúc
- SBox<s-box>Một container chung cho padding, nền, viền, bo góc và kích thước.
- SDivider<s-divider>Một đường ngang hoặc dọc phân tách nội dung.
- SGrid<s-grid>Một container CSS grid để bố trí nội dung theo hàng và cột.
- SGridItem<s-grid-item>Một phần tử con của grid, có thể trải trên nhiều cột hoặc hàng.
- SListItem<s-list-item>Một mục bên trong danh sách có thứ tự hoặc không thứ tự.
- SOrderedList<s-ordered-list>Một danh sách đánh số.
- SPage<s-page>Bố cục trang cấp cao nhất, với tiêu đề, các hành động của trang và các vùng nội dung.
- SQueryContainer<s-query-container>Biến một phần tử thành size container để các phần tử con thích ứng theo chiều rộng của nó bằng container query.
- SScrollBox<s-scroll-box>Một container cuộn nội dung khi nội dung bị tràn.
- SSection<s-section>Nhóm các nội dung liên quan, với tiêu đề, tiêu đề phụ và các hành động tùy chọn.
- SStack<s-stack>Sắp xếp các phần tử con theo hàng hoặc cột với khoảng cách và căn chỉnh nhất quán.
- STable<s-table>Một bảng cho dữ liệu có cấu trúc, có phân trang, trạng thái loading và bố cục dạng danh sách trên màn hình nhỏ.
- STableBody<s-table-body>Phần thân của bảng, chứa các hàng dữ liệu.
- STableCell<s-table-cell>Một ô trong một hàng của bảng.
- STableHeader<s-table-header>Một tiêu đề cột trong bảng.
- STableHeaderRow<s-table-header-row>Hàng chứa các tiêu đề cột ở đầu bảng.
- STableRow<s-table-row>Một hàng dữ liệu trong bảng.
- SUnorderedList<s-unordered-list>Một danh sách gạch đầu dòng.
Hình ảnh và media
- SAvatar<s-avatar>Hiển thị ảnh của một người hoặc doanh nghiệp, hoặc chữ cái viết tắt tên khi không có ảnh.
- SIcon<s-icon>Hiển thị một icon từ bộ icon Polaris theo tên.
- SImage<s-image>Hiển thị hình ảnh, kiểm soát được tỉ lệ khung hình, cách co giãn, viền và lazy loading.
- SThumbnail<s-thumbnail>Một ảnh xem trước nhỏ, kích thước cố định, của một sản phẩm hoặc tệp.
Overlay
Chữ và nội dung
- SChip<s-chip>Một nhãn tĩnh cho tag hoặc thuộc tính, có thể gỡ bỏ.
- SHeading<s-heading>Một tiêu đề đặt tên cho một phần của trang.
- SNumber<s-number>Hiển thị một số bạn đã định dạng sẵn, với kiểu chữ, tone và màu sắc.
- SParagraph<s-paragraph>Một khối văn bản nội dung.
- SText<s-text>Văn bản inline với tone, độ đậm và kiểu nhấn mạnh.
- STooltip<s-tooltip>Một nhãn ngắn xuất hiện khi hover hoặc focus vào một phần tử khác.