样式控件​

样式控件是主题编辑器中的可视化配置工具，商家可通过点选、输入等交互方式，便捷修改配置的 CSS 样式值。支持多屏幕断点配置，实现移动端、PC 端等多设备适配，提升响应式设计效率。样式控件支持以下几种类型：

  • 排版控件
  • 边距控件
  • 尺寸控件

注意：未来将持续扩展更多的样式控件类型，以满足个性化设计需求，进一步提升主题定制的灵活性。

标准属性

以下是每个样式控件的标准属性。根据控件类型的不同，可能会有额外的专有属性。

属性描述是否必填
type控件类型是
id配置 id，用于访问配置值是
label配置标签，将呈现在主题编辑中是
default配置的默认值否
info配置的提示信息否

控件类型

排版控件

控件类型枚举值为 style.layout，输出一个配置元素对齐方式、换行、间距等的控件。

示例代码

{{#schema}}
{
  "name": "My Section",
  "settings": [
    {
      "type": "style.layout",	// 排版控件
      "id": "layout",
      "label": "Layout",
      "default": {
        "flex-direction": "row",
        "flex-wrap": "nowrap",
        "align-items": "flex-start",
        "justify-content": "space-between",
        "row-gap": "40px",
        "column-gap": "60px"
      }
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}
{{/schema}}

输出效果

支持的属性配置

属性描述值类型默认值
flex-direction排布方向row：水平排布
column：垂直排布		row
flex-wrap自动换行wrap：换行
no-wrap：不换行		no-wrap
align-items对齐方式flex-start：顶部对齐
flex-end：底部对齐
center：居中对齐
stretch：拉伸对齐		flex-start
justify-content展示位置flex-start：居左
center：居中
flex-end：居右
space-around：周围分布
space-between：两端分布
space-evenly：平均分布		flex-start
row-gap行间距px0px
column-gap列间距px0px

获取排版样式配置

任何包含 schema tag 的代码里都能添加排版样式控件，如 主题全局配置、组件配置、区块配置 等。然后，你就可以像下面的代码一样，访问排版样式控件的值：

{{ settings.layout }} 				// 主题全局排版样式配置
{{ section.settings.layout }} // 组件排版样式配置
{{ block.settings.layout }}		// 区块排版样式配置

为元素应用样式配置

通过 class_list filter，可以把样式配置应用到元素上，结合上面的 示例代码，以下是组件应用排版样式的示例：

<div class="my-section {{section.settings.layout | class_list()}}">	<!-- 应用排版样式 -->
  ...
</div>
{{#schema}}
{
  "name": "My Section",
  "settings": [
    {
      "type": "style.layout",
      "id": "layout",
      "label": "Layout",
      "default": {
        "flex-direction": "row",
        "flex-wrap": "nowrap",
        "align-items": "flex-start",
        "justify-content": "space-between",
        "row-gap": "40px",
        "column-gap": "60px"
      }
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}
{{/schema}}

边距控件

类型枚举值为 style.spacing，输出一个配置元素上下左右内边距的控件。

示例代码

{{#schema}}
{
  "name": "My Section",
  "settings": [
    {
      "type": "style.spacing",	// 边距控件
      "id": "spacing",
      "label": "Spacing",
      "default": {
        "padding-top": "40px",
        "padding-right": "0px",
        "padding-bottom": "40px",
        "padding-left": "0px"
      }
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}
{{/schema}}

输出效果

支持的属性配置

属性描述值类型默认值
padding-top
padding-block-start		上边距px0px
padding-right
padding-inline-end		右边距px0px
padding-bottom
padding-block-end		下边距px0px
padding-left
padding-inline-start		左边距px0px

获取边距样式配置

任何包含 schema tag 的代码里都能添加边距样式控件，如 主题全局配置、组件配置、区块配置 等。然后，你就可以像下面的代码一样，访问边距样式控件的值：

{{ settings.spacing }}          // 主题全局边距样式配置
{{ section.settings.spacing }}  // 组件边距样式配置
{{ block.settings.spacing }}    // 区块边距样式配置

为元素应用样式配置

通过 class_list filter，可以把样式配置应用到元素上，结合上面的 示例代码，以下是组件应用边距样式的示例：

<div class="my-section {{section.settings.spacing | class_list()}}">	<!-- 应用边距样式 -->
  ...
</div>
{{#schema}}
{
  "name": "My Section",
  "settings": [
    {
      "type": "style.spacing",
      "id": "spacing",
      "label": "Spacing",
      "default": {
        "padding-top": "40px",
        "padding-right": "0px",
        "padding-bottom": "40px",
        "padding-left": "0px"
      }
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}
{{/schema}}

尺寸控件

类型枚举值为 style.size，输出一个配置元素宽高的控件。

示例代码

{{#schema}}
{
  "name": "My Section",
  "settings": [
    {
      "type": "style.size",	// 尺寸控件
      "id": "size",
      "label": "Size",
      "default": {
        "width": "100%",
        "height": "auto"
      }
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}
{{/schema}}

输出效果

支持的属性配置

属性描述值类型默认值
width宽px, %, autoauto
height高px, %, autoauto

获取尺寸样式配置

任何包含 schema tag 的代码里都能添加尺寸样式控件，如 主题全局配置、组件配置、区块配置 等。然后，你就可以像下面的代码一样，访问尺寸样式控件的值：

{{ settings.size }}          // 主题全局尺寸样式配置
{{ section.settings.size }}  // 组件尺寸样式配置
{{ block.settings.size }}    // 区块尺寸样式配置

为元素应用尺寸样式配置

通过 class_list filter，可以把样式配置应用到元素上，结合上面的 示例代码，以下是组件应用尺寸样式的示例：

<div class="my-section {{section.settings.size | class_list()}}">	<!-- 应用尺寸样式 -->
  ...
</div>
{{#schema}}
{
  "name": "My Section",
  "settings": [
    {
      "type": "style.size",
      "id": "size",
      "label": "Size",
      "default": {
        "width": "100%",
        "height": "auto"
      }
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}
{{/schema}}

最佳实践

快速应用多种样式配置

当 schema 配置中同时存在多种类型的样式配置时，你可能会采取以下方式同时应用到元素上，如：

<div
  class="my-section
  {{section.settings.layout | class_list()}}	<!-- 应用排版样式 -->
  {{section.settings.spacing | class_list()}}	<!-- 应用边距样式 -->
  {{section.settings.size | class_list()}}		<!-- 应用尺寸样式 -->
">
  ...
</div>
{{#schema}}
{
  "name": "My Section",
  "settings": [
    {
      "type": "style.layout",
      ...
    },
    {
      "type": "style.spacing",
      ...
    },
    {
      "type": "style.size",
      ...
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}
{{/schema}}

但是，我们有提供一种更简易的方式，帮助开发者快速应用所有的样式配置到元素上，你只需要把整个 settings 传递给 class_list filter 就可以完成绑定，以下是一个组件应用全部样式配置的示例：

<div
  class="my-section
  {{section.settings | class_list()}}	<!-- 同时应用所有的 style 样式 -->
">
  ...
</div>
{{#schema}}
{
  "name": "My Section",
  "settings": [
    {
      "type": "style.layout",
      ...
    },
    {
      "type": "style.spacing",
      ...
    },
    {
      "type": "style.size",
      ...
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}
{{/schema}}

为特定断点设置特定样式值

样式控件支持根据不同断点存储不同的样式配置值。你可以通过在样式控件的 default 配置中添加 @media () 标记，来标识不同断点。以下是为移动端添加特定边距样式配置的示例：

<div class="my-section {{section.settings | class_list()}}">
  ...
</div>
{{#schema}}
{
  "name": "My Section",
  "settings": [
    {
      "type": "style.spacing",		// 边距控件
      "id": "spacing",
      "label": "Spacing",
      "default": {
        "padding-top": "40px",
        "padding-bottom": "20px",
        "@media (--mobile)": {		// 指定移动端断点配置
          "padding-top": "10px",
          "padding-bottom": "5px"
        }
      }
    }
  ],
  "presets": [
    {
      "name": "My Section"
    }
  ]
}
{{/schema}}

当页面切换到移动端断点时，元素的上下内边距会被分别设置为 10px 和 5px。

当然，你也可以通过可视化编辑器为不同的断点配置不同的样式值，下图是主题编辑器中，切换边距样式配置断点的入口示意：

注意：目前，主题只支持 --mobile 移动端断点，后续可能会支持 --tablet 平板端断点。

获取单个样式配置的单个属性值

一般而言，样式配置会应用于容器元素中，以更好地协调子元素间的展示效果。但在某些情况下，你可以通过 css_var filter 获取样式配置的某个属性值，以实现个性化的定制诉求。以下是子区块获取父区块样式配置值的案例：

在商品信息区块中，为了能让子区块多属性选择器可以拿到父区块商品信息排版样式 row-gap 值，在商品信息区块文件中，需要定义一个 CSS 变量，用于存储排版样式 row-gap 的值，代码示例如下：

<!-- sections/featured-product/blocks/product-info.html -->
<div
  class="product-detail__info product-detail__col {{block.settings | class_list()}}"
  style="
    --info-row-gap: {{block.settings.layout | css_var(`row-gap`)}};	// 把排版样式 row-gap 属性值赋值给 CSS 变量 --info-row-gap
  "
  {{{block.shopline_attributes}}}
>
  {{#blocks}}
    {{#block product=props.product /}}
  {{/blocks}}
</div>
{{#schema}}
{
  "name": "商品信息",
  "settings": [
    {
      "type": "style.layout",
      "id": "layout",
      "label": "排版",
      "default": {
        "flex-wrap": "nowrap",
        "flex-direction": "column",
        "row-gap": "20px",	// 排版样式 row-gap 属性
        "column-gap": "20px"
      }
    }
  ],
  "blocks": [
    ...
    {
      "type": "product/detail-variant-picker",	// 多属性选择器区块
      "limit": 1
    },
    ...
  ],
  "presets": [
    ...
  ]
}
{{/schema}}

这样，你就把排版样式 row-gap 属性的值存储在了 CSS 变量 --info-row-gap 中。这时，包含商品信息区块在内及其所有子元素，都可以使用该 CSS 变量。以下是多属性选择器区块使用父区块商品信息 CSS 变量的代码示例：

/** blocks/product/detail-variant-picker.css **/
.product-detail__variant-picker {
  display: flex;
  flex-direction: column;
  gap: var(--info-row-gap);	// 使用父区块商品信息中定义的 CSS 变量
}

注意：通过 CSS 变量存储的样式配置值，也会因为不同的断点，呈现出差异化。在不同屏幕尺寸下，这些基于断点设置的样式配置值，会动态体现在 CSS 变量中，从而适配手机、平板、电脑等设备。

这篇文章对你有帮助吗？
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
条款协议
隐私
条款
开发者协议
LinkedInEmail
LinkedInEmail
© Copyright 2013-2026 SHOPLINE Limited.