跳转至

Tabs（选项卡(Tabs)）

The Tabs widget displays configurable tabs that trigger Workshop events to navigate throughout pages and overlays of a module.

Tabs widget example

Configuration options

The following outlines the configuration settings for the Tabs widget:

  • Tabs

  • Add item: Add a new tab. Once created, select the box containing the tab to configure.

    • Label: Set the label for the tab.
    • On click
    • Add event: Add a Workshop Event that is triggered when the tab is selected.
    • Icon: Add an icon to be displayed to the left of the tab label.
    • Badge: Display a badge to the right of the tab label. By default, no badge will be displayed for a tab. If a builder chooses to display a badge on a tab, they may choose to either display text via a string variable or a numeric value via a number variable.
    • Conditional visibility: When toggled on, allows the value of a set boolean variable to control when the tab is either enabled/disabled or visible/hidden.
    • Boolean variable: Set a boolean variable to control when the tab is enabled, disabled, or hidden.
    • Disabled: If selected, the tab will be enabled when the set boolean variable’s value is true, and will be disabled when the set boolean variable’s value is false.
    • Hidden: If selected, the tab will be visible when the set boolean variable’s value is true and hidden when the set boolean variable’s value is false.

  • Display & Formatting

  • Design: Select a styling preset to be applied to all configured tabs in the widget. Choose from Outline, Block, Prominent, or Grouped.

Tabs widget design presets

  • Outline
    • Size: Set the size for the tabs' display values to either default or large.
  • Block
    • Minimal styling: Toggle on to enable minimal block styling on tabs; this setting lightens the Active color (see below) used for active tabs.
    • Size: Set the sizing for the tabs’ display values. Sizing options include Default or Large.
  • Prominent
    • Width: Set the width of the widget.
    • Size: Set the size for the tabs' display values to either default or large.

  • Grouped

    • Size: Set the size for the tabs' display values to either small, default, or large.

  • Active color: * Set the tab color for the active tab.

  • Tab Height: Set a predefined section header height for the Tab widget.

  • Custom: Set the height of tabs in the widget by entering a custom pixel value.

  • Auto: Choose to have the height of the tabs auto-configured to the height of its container.

    • Fill: When toggled on, the height of tabs in the widget will be set to the height of the widget.

  • Direction

  • Horizontal: Displays tabs in the widget in a horizontal orientation.
  • Vertical: Displays tabs in the widget in a vertical orientation.
    • Alignment
    • Left: Left-align all tabs in the widget.
    • Center: Center-align all tabs in the widget.

Selection state

The Tabs widget does not hold its own selection state. Instead, selection state is derived from events configured for the widget. Switch to tab and Switch to page events that lead to no layout state change will be used to determine the selected tab. A default selected tab or page may be configured by setting a string variable to the tab or page name in the Variable-backed tab selection field of a tabbed section or in the Variable-backed page selection field in the settings panel.

Note that adding a Tabs widget to a module will not result in the generation of Switch to tab or Switch to page events. See switch to tab and switch to page for more information on how to generate these events for use in a Tabs widget.

No layout state change events

Events that do not change the layout state - that is, they lead to "no layout state change" - are layout events configured to switch to the selected tab or page that matches the current layout state. For example, a tab with a Switch to Tab A event configured will show as selected if the current layout state has Tab A selected.

Limitations

  • If multiple layout events are configured, the tab with the most "no layout state change" events will be the selected tab, preferring the earliest tab in the case of a tie.
  • Set variable value events are not currently used to check for selected tab state.
  • If using a variable-backed selected tab, you may use Switch to tab events, which will update the selected tab variable state in addition to setting the selected tab state.
  • If using a variable-backed selected page, you will need to use a Set variable value event in addition to a Switch to page event, as page change events do not automatically update the selected page variable value.

中文翻译

选项卡(Tabs)

选项卡(Tabs) 组件可显示可配置的选项卡，触发工作坊(Workshop)事件以在模块的页面和覆盖层之间导航。

选项卡组件示例

配置选项

以下是选项卡组件的配置设置说明：

  • 选项卡(Tabs)

  • 添加项目(Add item): 添加新选项卡。创建后，选择包含该选项卡的框进行配置。

    • 标签(Label): 设置选项卡的标签。
    • 点击时(On click)
    • 添加事件(Add event): 添加在选择选项卡时触发的工作坊事件(Workshop Event)。
    • 图标(Icon): 添加显示在选项卡标签左侧的图标。
    • 徽章(Badge): 在选项卡标签右侧显示徽章。默认情况下，选项卡不显示徽章。如果构建者选择在选项卡上显示徽章，可以选择通过字符串变量显示文本，或通过数字变量显示数值。
    • 条件可见性(Conditional visibility): 启用后，允许通过设置的布尔变量控制选项卡的启用/禁用或可见/隐藏状态。
    • 布尔变量(Boolean variable): 设置布尔变量以控制选项卡的启用、禁用或隐藏状态。
    • 禁用(Disabled): 如果选中，当设置的布尔变量值为真(true)时选项卡启用，值为假(false)时禁用。
    • 隐藏(Hidden): 如果选中，当设置的布尔变量值为真(true)时选项卡可见，值为假(false)时隐藏。

  • 显示与格式(Display & Formatting)

  • 设计(Design): 选择应用于组件中所有已配置选项卡的样式预设。可从轮廓(Outline)、块状(Block)、突出(Prominent) 或分组(Grouped) 中选择。

选项卡组件设计预设

  • 轮廓(Outline)
    • 大小(Size): 将选项卡显示值的大小设置为默认(default)或大(large)。
  • 块状(Block)
    • 最小样式(Minimal styling): 启用后，对选项卡应用最小块状样式；此设置会淡化用于活动选项卡的活动颜色(Active color)（见下文）。
    • 大小(Size): 设置选项卡显示值的尺寸。尺寸选项包括默认(Default) 或大(Large)。
  • 突出(Prominent)
    • 宽度(Width): 设置组件的宽度。
    • 大小(Size): 将选项卡显示值的大小设置为默认(default)或大(large)。

  • 分组(Grouped)

    • 大小(Size): 将选项卡显示值的大小设置为小(small)、默认(default)或大(large)。

  • 活动颜色(Active color): 设置活动选项卡的选项卡颜色。

  • 选项卡高度(Tab Height): 为选项卡组件设置预定义的节标题高度。

  • 自定义(Custom): 通过输入自定义像素值设置组件中选项卡的高度。

  • 自动(Auto): 选择让选项卡的高度自动配置为其容器的高度。

    • 填充(Fill): 启用后，组件中选项卡的高度将设置为组件的高度。

  • 方向(Direction)

  • 水平(Horizontal): 在组件中以水平方向显示选项卡。
  • 垂直(Vertical): 在组件中以垂直方向显示选项卡。
    • 对齐(Alignment)
    • 左对齐(Left): 将组件中的所有选项卡左对齐。
    • 居中对齐(Center): 将组件中的所有选项卡居中对齐。

选择状态(Selection state)

选项卡组件不持有自身的选择状态。相反，选择状态源自为组件配置的事件。导致无布局状态变化的切换到选项卡(Switch to tab) 和切换到页面(Switch to page) 事件将用于确定选中的选项卡。可以通过在选项卡式部分的变量支持的选项卡选择(Variable-backed tab selection) 字段或设置面板中的变量支持的页面选择(Variable-backed page selection) 字段中，将字符串变量设置为选项卡或页面名称来配置默认选中的选项卡或页面。

请注意，向模块添加选项卡组件不会自动生成切换到选项卡(Switch to tab) 或切换到页面(Switch to page) 事件。有关如何生成这些事件以在选项卡组件中使用的更多信息，请参见切换到选项卡和切换到页面。

无布局状态变化事件(No layout state change events)

不改变布局状态的事件——即导致"无布局状态变化"的事件——是配置为切换到与当前布局状态匹配的选中选项卡或页面的布局事件。例如，配置了切换到选项卡A(Switch to Tab A)事件的选项卡，如果当前布局状态选中了选项卡A，则会显示为选中状态。

限制(Limitations)

  • 如果配置了多个布局事件，具有最多"无布局状态变化事件"的选项卡将被选为选中选项卡，在平局情况下优先选择最早的选项卡。
  • 设置变量值(Set variable value) 事件目前不用于检查选中选项卡状态。
  • 如果使用变量支持的选中选项卡，可以使用切换到选项卡(Switch to tab) 事件，该事件除了设置选中选项卡状态外，还会更新选中选项卡的变量状态。
  • 如果使用变量支持的选中页面，除了切换到页面(Switch to page) 事件外，还需要使用设置变量值(Set variable value) 事件，因为页面更改事件不会自动更新选中页面的变量值。