组件

62 个带类型的 Vue wrapper，每个对应一个 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>用于输入颜色值的文本输入框，可选支持 alpha 通道。
• 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>带标签、占位符、校验错误和帮助文本的单行文本输入框。
• 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>将元素变为尺寸容器，使其子元素可以通过容器查询适配其宽度。
• 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>带项目符号的列表。

媒体与视觉

• SAvatar<s-avatar>显示个人或企业的图片，没有图片时显示其姓名首字母。
• SIcon<s-icon>按名称显示 Polaris 图标集中的图标。
• SImage<s-image>显示图片，可控制宽高比、适配方式、边框和懒加载。
• SThumbnail<s-thumbnail>商品或文件的小尺寸、固定大小预览图。

浮层

• SModal<s-modal>用于专注任务和确认操作的对话框浮层，可通过命令或方法调用打开。
• SPopover<s-popover>锚定在打开它的按钮上的浮动内容。

文字与内容

• SChip<s-chip>用于标签或属性的静态标记，可选择是否可移除。
• SHeading<s-heading>作为页面区块标题的标题文字。
• SNumber<s-number>显示已格式化的数字，并支持字体排版、色调和颜色样式。
• SParagraph<s-paragraph>一段正文文本。
• SText<s-text>支持色调、字重和强调样式的行内文本。
• STooltip<s-tooltip>在另一个元素被悬停或聚焦时出现的简短提示。