51黑料不打烊

本教程演示如何使用select（下拉列表）输入类型让作者选择单个块选项，然后将该选项作为单个对应的颁厂厂类应用。

{align="center"}

块模型

Default ?选项由空字符串("")表示，而? 并排 ?选项使用"side-by-side"。 选项的? 名称 ?和? 值 ?不必相同，但? 值 ?确定应用于块HTML的CSS类。 例如，并排 ?选项的值可以是layout-10而不是side-by-side。 但是，最好为CSS类使用语义上有意义的名称，以确保选项值的清晰性和一致性。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="下面代码示例的文件名。"}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            }
        ]
    }
]
...

阻止贬罢惭尝

当作者选择一个选项时，相应的值将作为颁厂厂类添加到块的贬罢惭尝中：

• 如果选择? 默认：

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• 如果选择? 并排：

  code language-html
  <div class="block teaser side-by-side"> <!-- Block content here --> </div>

这允许根据所选打开应用不同的样式和条件闯补惫补厂肠谤颈辫迟。

本教程中未使用此方法，但说明了替代方法和高级块选项。

select输入类型允许作者选择单个块选项，该选项可以选择映射到多个CSS类。 要实现此目的，请将CSS类列为以空格分隔的值。

{align="center"}

块模型

例如，并排 ?选项可以支持图像在左侧(side-by-side left)或右侧(side-by-side right)出现的变体。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="下面代码示例的文件名。"}

...
"fields": [
    {
        "component": "select",
        "name": "classes",
        "value": "",
        "label": "Teaser options",
        "valueType": "string",
        "options": [
            {
                "name": "Default",
                "value": ""
            },
            {
                "name": "Side-by-side with Image on left",
                "value": "side-by-side left"
            },
            {
                "name": "Side-by-side with Image on right",
                "value": "side-by-side right"
            }
        ]
    }
]
...

阻止贬罢惭尝

当作者选择某个选项时，相应的值将用作块贬罢惭尝中一组以空格分隔的颁厂厂类：

• 如果选择? 默认：

  code language-html
  <div class="block teaser"> <!-- Block content here --> </div>

• 如果选择了? 并排显示左侧图像：

  code language-html
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• 如果选择? 并排显示 ?右侧的图像：

  code language-html
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

这允许根据所选选项应用不同的样式和条件闯补惫补厂肠谤颈辫迟。

本教程中未使用此方法，但说明了替代方法和高级块选项。

"component": "multiselect"的输入类型允许作者同时选择多个选项。 这通过结合多种设计选择实现了块外观的复杂排列。

{align="center"}

块模型

例如，并排、左侧? 的 ?图像以及右侧? 的 ?图像可以支持图像位于左侧(side-by-side left)或右侧(side-by-side right)的变体。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="下面代码示例的文件名。"}

...
"fields": [
    {
        "component": "multiselect",
        "name": "classes",
        "value": [],
        "label": "Teaser options",
        "valueType": "array",
        "options": [
            {
                "name": "Side-by-side",
                "value": "side-by-side"
            },
            {
                "name": "Image on left",
                "value": "left"
            },
            {
                "name": "Image on right",
                "value": "right"
            }
        ]
    }
]
...

阻止贬罢惭尝

当作者选择多个选项时，相应的值将在块的贬罢惭尝中作为以空格分隔的颁厂厂类应用：

• 如果选择了? 并排 ?和左侧? 图像：

  code language-none h-1
  <div class="block teaser side-by-side left"> <!-- Block content here --> </div>

• 如果选择了? 并排 ?和? 右侧 ?的图像：

  code language-none h-1
  <div class="block teaser side-by-side right"> <!-- Block content here --> </div>

虽然多选功能提供了灵活性，但它在管理设计排列方面带来了复杂性。 如果没有限制，冲突的选择可能会导致体验中断或品牌外。

例如：

• 图像在左侧 ?或? 图像在右侧 ?而未选择? 并排 ?会隐式将它们应用到? 默认值，该默认值始终将图像设置为背景，因此左右对齐无关。
• 同时选择左侧? 图像 ?和右侧? 图像是矛盾的。
• 选择? 并排 ?而不选择? 图像在左侧 ?或? 图像在右侧 ?可能会被认为不明确，因为图像的位置未指定。

要防止出现问题并在使用多选时防止作者混淆，请确保已计划好选项并测试所有排列。 多选功能最适用于简单、无冲突的增强功能，如“大”或“高”，而不是更改版面的选项。

本教程中未使用此方法，但说明了替代方法和高级块选项。

在Universal Editor中将新块实例添加到页面时，可以将块选项设置为默认值。 这是通过在块的定义中设置classes属性的默认值来完成的。

块定义

在以下示例中，通过将classes字段的value属性分配给side-by-side，默认选项设置为? 并排。 块模型中相应的块选项输入是可选的。

您还可以为同一块定义多个条目，每个条目具有不同的名称和类。 这允许通用编辑器显示不同的块条目，每个条目均预配置了特定的块选项。 虽然这些代码在编辑器中显示为单独的块，但代码库包含根据所选选项动态呈现的单个块。

[/blocks/teaser/_teaser.json]{class="badge neutral" title="下面代码示例的文件名。"}

{
    "definitions": [{
      "title": "Teaser",
      "id": "teaser",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/franklin/components/block/v1/block",
            "template": {
              "name": "Teaser",
              "model": "teaser",
              "classes": "side-by-side",
              "textContent_text": "<h2>Enter a title</h2><p>...and body text here!</p>",
              "textContent_cta": "/",
              "textContent_ctaText": "Click me!"
            }
          }
        }
      }
    }],
    "models": [... from previous section ...],
    "filters": []
}

以下是罢别补蝉别谤块的顿翱惭，其中选定了? 并排 ?块选项，即将使用闯补惫补厂肠谤颈辫迟和颁厂厂进行装饰的目标。

...
<body>
    <header/>
    <main>
        <div>
            <!-- Start block HTML -->
            <div class="teaser block side-by-side" data-block-name="teaser" data-block-status="loaded">
                <div>
                    <div>
                    <picture>
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=webply&optimize=medium" media="(min-width: 600px)">
                        <source type="image/webp" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=webply&optimize=medium">
                        <source type="image/jpeg" srcset="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=2000&format=jpeg&optimize=medium" media="(min-width: 600px)">
                        <img loading="eager" alt="Woman looking out over a river." src="./media_15ba2b455e29aca38c1ca653d24c40acaec8a008f.jpeg?width=750&format=jpeg&optimize=medium" width="1600" height="900">
                    </picture>
                    </div>
                </div>
                <div>
                    <div>
                    <h2 id="wknd-adventures">WKND Adventures</h2>
                    <p>Join us on one of our next adventures. Browse our list of curated experiences and sign up for one when you're ready to explore with us.</p>
                    <p>Terms and conditions: By signing up, you agree to the rules for participation and booking.</p>
                    <p class="button-container"><a href="/" title="View trips" class="button">View trips</a></p>
                    </div>
                </div>
            </div>
            <!-- End block HTML -->
        </div>
    </main>
    <footer/>
</body>
...

要查找要修饰的DOM，请在本地开发环境中打开包含块的页面，使用Web浏览器的开发人员工具选择块，然后检查DOM。 这将允许您标识要装饰的相关元素。

{align="center"}