# Shopify Polaris Web 组件使用 Polaris Web 组件为 **Shopify 应用程序主页** 表面构建 UI 时，请使用此技能。 ## 何时使用 * 构建应用程序主页（Shopify Admin iframe 之外的应用程序界面） * 使用 `s-*` 自定义元素创建 UI * 使用 s-section、s-stack、s-box 设计布局 * 为 App Home 构建表单、模式或列表 **重要**：App Home 使用 **Polaris Web 组件**（`s-*` 元素），而不是 Polaris React (`@shopify/polaris`)。这些是不同的技术。 ## Polaris React 与 Web 组件特色 |北极星反应 |北极星网络组件 ---|---|--- 用于 |嵌入式管理应用程序 |应用程序主页表面进口| `@shopify/北极星` |不导入（原生元素）语法 | `<按钮>` | `` 框架|反应组件 |自定义 HTML 元素 ## 核心组件 ### 页面结构

### 带堆栈的布局

项目 1

项目 2

取消

保存

标题操作

### 部分（卡片状容器）对带有可选标题的分组内容使用“s-section”：

配置您的小部件外观。

简单内容块

### Box（通用布局容器）使用 `s-box` 进行填充、边框和间距 - 不适用于卡片：

填充内容

带边框的内容

上边距内容 **规则** ：对卡片式容器使用 `s-section`，仅对布局/间距使用 `s-box`。 ### 按钮

保存设置

取消

删除

不可用保存 <脚本> document.getElementById('save-btn').addEventListener('click', handleSave); ### 文字

大标题中等标题小标题

默认正文

小正文文本

静音文本错误文本成功文本 ### 横幅

这是一条信息性消息。

出了点问题。请重试。

设置保存成功！

您的试用期将在 3 天后结束。

### 链接转到设置

文档 ### 表单元素

<选项值=“en”>英语 <选项值=“es”>西班牙语 ## 常见模式 ### 设置页面

<选项值=“光”>轻 <选项值=“暗”>深色

取消

保存 ### 空状态

尚无广告活动创建您的第一个营销活动以开始。创建营销活动

### 包含操作的列表

欢迎系列活动 • 已发送 1,234 条编辑

废弃的购物车已暂停 • 已发送 567 编辑 ## TypeScript 支持在`tsconfig.json`中添加 s-* 组件的类型： { “编译器选项”：{ “类型”：[“@shopify/北极星类型”] } } ## 最佳实践 1. **对卡片使用 s-section** \- 不是 s-box 2. **仅使用 s-box 进行布局** \- 填充、边框、间距 3. __Prefer s-_ over custom divs_* - 仅当 s-* 无法实现布局时才使用 div 4. **使用语义结构** \- s-page > s-section > content 5. **一致的间距** \- 使用间隙道具，而不是手动边距 6. **检查文档** \- 组件有许多此处未显示的道具 ## 何时使用自定义样式仅在以下情况下使用普通的“div”和内联样式： * 用户明确请求 * 尝试了 s-* 组件后，无法达到所需的布局 * 对于 Polaris 不支持的非常具体的视觉效果 ## 参考文献 * [Polaris Web 组件]() * [使用 Polaris 组件]() * [应用程序主页概述]() * [组件参考]()

应用程序 Shopify Polaris Web 组件

包含技能