Mashup Builder > 小组件 > 标准小组件 > 选项卡小组件 (可应用主题)
选项卡小组件 (可应用主题)
选项卡小组件可用于将混搭内容组织到单独的视图中。每个视图都是一个带有标签且可通过小组件属性定义的选项卡。在运行时,一次只能打开一个选项卡,当前处于活动状态的选项卡将以下划线突出显示。选项卡小组件是一个响应式小组件,该小组件的大小取决于其容器大小。可通过控制容器尺寸或使用小组件 WidthHeight 属性将小组件设置为固定宽度或高度。
* 
“选项卡”小组件可在平台中用作标准小组件,也可用作 web 组件 (可从 SDK 导入)。
可通过以下方法配置小组件:
指定选项卡及其标签的数量。
指定在运行时查看混搭期间打开的默认选项卡。
设置选项卡标签的最大宽度。
为选项卡容器启用和配置延迟加载。
在选项卡小组件中使用延迟加载
默认情况下,打开混搭后会加载小组件中的所有选项卡。在运行时触发混搭 Loaded 等事件后,会执行绑定至选项卡上小组件的服务。选项卡小组件包含多个涉及大量小组件的复杂可视化时,若于后台选项卡上执行服务并加载小组件,则可能会降低性能。可配置延迟加载以延迟加载不可见选项卡,待运行时需要此类选项卡时再予以加载,从而提高混搭和网络性能。在小组件上配置延迟加载时,请确保从延迟加载中排除默认选项卡,因为其会在混搭打开后即刻显示。要为小组件中的选项卡启用延迟加载,请执行以下步骤:
1. 在 Mashup Builder 中,选择小组件上的选项卡以显示其内容。
2. 选择选项卡上的容器。容器属性将在“属性”面板上列出。
3. “属性”面板上,将 LazyLoading 属性设置为 True。此外还会列出延迟加载的其他属性、服务和事件。
有关迟缓加载属性、服务和事件的详细信息,请参阅在混搭中使用延迟加载
4. 绑定容器 Loaded 事件以执行绑定至延迟加载容器内小组件的所有数据服务。
* 
避免使用混搭的 Loaded 事件来为延迟加载的容器执行服务。仅当选项卡处于打开状态或使用 LoadContainer 服务加载容器后,才会显示服务的返回数据。
5. 重复上述步骤,为小组件上的任意其他选项卡启用延迟加载。
6. 单击“保存”,然后单击“查看混搭”
在运行时打开选项卡后,会自动加载延迟加载的选项卡。为选项卡容器启用 EnableContainerUnload 属性后,容器将自动卸载以释放系统资源,并在其处于隐藏状态时提高性能。切换回已卸载的选项卡后,该选项卡将自动重新加载。可为选项卡延迟加载服务创建附加绑定,以使用混搭中的其他事件,例如按钮小组件的 Clicked 事件,手动加载和卸载内容。
小组件属性
* 
默认情况下,所有选项卡特定属性如 Tab1NameTab1ValueTab1VisibleTab1Disabled 在每个选项卡上均可用。例如,第一个选项卡的 Tab1Name 属性在第二个选项卡中作为 Tab2Name 属性出现,而在第三个选项卡中作为 Tab3Name 属性出现。
属性名称
说明
基本类型
默认值
是否可绑定? (Y/N)
是否可本地化? (Y/N)
SelectedTabValue
选定选项卡的值。
STRING
不可用
Y
N
Disabled
使用此属性可以禁用混搭中的小组件。小组件会显示在混搭中,但无法单击。
BOOLEAN
False
Y
N
SelectedTabName
选定选项卡的名称。
STRING
不可用
Y
N
CustomClass
用于定义要应用于小组件顶层 div 的 CSS 类。可以输入多个类,以空格作为分隔符。
STRING
不可用
Y
N
TabSequence
当用户按下 Tab 键时,内容将在其中突出显示的小组件序列。
NUMBER
不可用
N
N
NumberOfTabs
设置选项卡的总数。
您可以设置的选项卡的最大数量为 16,最小数量为 1。
NUMBER
2
N
N
DefaultTabNumber
用于选择要在首次加载混搭时在运行时显示的选项卡。对于所有后续混搭加载,将显示用户在运行时最后选择的选项卡。
NUMBER
不可用
Y
N
TabNameHeight
可用于设置选项卡名称区域的高度。要隐藏选项卡名称区域,请将此属性设置为 0。
NUMBER
34px
Y
N
Tab1Name
第一个选项卡的名称。
STRING
选项卡名称 1
Y
Y
Tab1Value
第一个选项卡的值。
STRING
选项卡值 1
Y
N
Tab1Visible
将第一个选项卡设置为可见。
BOOLEAN
True
Y
N
Tab1Disabled
使用此属性禁用混搭中的第一个选项卡。选项卡将显示在混搭中,但不能单击它。
BOOLEAN
False
Y
N
Tab2Name
第二个选项卡的名称。
STRING
选项卡名称 2
Y
Y
Tab2Value
第二个选项卡的值。
STRING
选项卡值 2
Y
N
Tab2Visible
将第二个选项卡设置为可见。
BOOLEAN
True
Y
N
Tab2Disabled
使用此属性禁用混搭中的第二个选项卡。选项卡将显示在混搭中,但不能单击它。
BOOLEAN
False
Y
N
SelectDefaultTab
此可绑定服务用于重新选择为此小组件配置的默认选项卡。
不适用
不适用
Y
N
ResetInputsToDefaultValue
将所有包含的小组件重置为其默认值。
不适用
不适用
Y
N
TabNameMaxWidth
设置选项卡名称的最大宽度。将在选项卡名称中截断多余字符。
NUMBER
不可用
Y
N
SwitchTabOnFocus
使用箭头键更改焦点时,将自动切换到焦点选项卡。
BOOLEAN
False
Y
N
这对您有帮助吗?