“视图导航”微件

“视图导航”微件提供对“部分”微件中视图的交互访问。 当用户访问该部分中的视图时,将仅刷新该部分中的内容而不是整个页面,因此可提供更好的应用程序性能。

示例

使用此微件可支持以下应用程序设计要求:

  • 您可以在部分微件中创建相似内容的多个视图,以避免在应用程序中频繁滚动。包含“视图导航”微件,以便用户可以单击选项卡或按钮,或者拖动滑块来刷新部分内容和访问视图。

用法说明

该页面必须具有“部分”微件,您可将“视图导航”微件链接到该微件。 您必须将微件置于该部分之外;不得将“视图导航”微件嵌套在其相应的“部分”微件中。 例如,将微件置于部分的上方或下方(适用于水平选项卡)或部分的左侧或右侧(适用于垂直选项卡)。

添加“视图导航”微件时,快速样式窗口价格显示在微件旁,您可以在其中从各种样式中选择,包括标签、符号、滑块和导航按钮。 要稍后再次访问此窗口,单击微件工具条上的快速样式按钮 快速样式。)您还可以通过在高级设置中为微件的各种状态选择颜色和字体来配置自己的设计。

对于选项卡和符号样式,您可以加入该部分的所有视图或特定视图。 要指定视图的序列,请打开“部分”微件的配置面板,然后按照希望其在“视图导航”微件中显示的顺序拖动视图。 您也可以在部分微件的设置中编辑视图名称。

设置

“视图导航”微件包括以下设置:

  • 链接到 - 从页面中选择部分微件。

根据您选择的样式,可以配置不同的设置。

对于选项卡样式(默认、下划线和 Pill),可以配置以下设置:

  • 视图 - 通过选择以下选项之一来定义要在微件中显示的视图:
    • 自动 - 在此部分中包含所有视图的选项卡。
    • 自定义 - 在此部分中包含特定视图的选项卡。
  • 方向 - 水平或垂直显示选项卡。
  • 间距 - 定义每个选项卡之间的间距(以像素为单位)。
  • 对齐 - 确定选项卡文本的放置。 例如,如果选择水平 pill 样式,则选项卡名称与选项卡对齐:左边对齐或右边对齐或居中对齐。
  • 显示图标 - 显示每个视图的图标。 您可以在部分微件设置中更改每个视图的图标。
  • 显示文本 - 显示每个视图的标注。
    注:

    您必须开启显示图标和/或显示文本

  • 高级 - 覆盖应用程序的主题以更改微件的背景颜色并设置选项卡的三种状态的样式以在用户悬停在选项卡或选择选项卡时提供其视觉提示。 默认是无用户交互时的选项卡状态;选定是选项卡的用户选择,在链接的“部分”微件中显示相应的视图;悬停是用户指向选项卡时的状态。
    提示:

    要尝试这些选项,请单击构建器工具条上的实时视图

    • 文本 - 更改字体大小(以像素为单位)和颜色,并使用粗体、斜体、删除线和下划线格式设置选项卡样式。
    • 图标 - 打开显示图标时,您可以更改视图图标的大小(以像素为单位)和颜色。
    • 背景 - 选择选项卡的填充颜色。
    • 边框下划线 - 选择选项卡的边框颜色、样式(如虚线或点划线)和宽度(以像素为单位)。 (对于选项卡下划线样式,您仅可以选择边框颜色。)
    • 边框半径 - 更改半径大小(以像素或百分比为单位)以设置选项卡角的形状。

对于符号样式,您可以配置以下设置:

  • 视图 - 通过选择以下选项之一来定义要在微件中显示的视图:
    • 自动 - 在此部分中包含所有视图的符号。
    • 自定义 - 在此部分中包含特定视图的符号。
  • 方向 - 水平或垂直显示符号。
  • 间距 - 定义每个符号之间的间距(以像素为单位)。
  • 对齐 - 确定微件中符号的放置。 例如,如果选择垂直方向,则符号与微件容器对齐:左边对齐或右边对齐或居中对齐。
  • 工具提示 - 启用显示视图名称的悬停文本。
  • 符号 - 选择当前视图和其他视图的图标。
  • 高级 - 覆盖应用程序的主题并更改微件的背景颜色以及视图导航符号的三种状态的图标大小(以像素为单位)和颜色:默认选定悬停

对于滑块样式,您可以配置以下设置:

  • 缩略图控点 - 在滑块上包括控点(或旋钮)以显示沿轨道的进度。
  • 高级 - 覆盖应用程序的主题以更改微件的背景颜色和滑块的三种状态的颜色:
    • 活动 - 滑块轨道的已完成部分。
    • 缩略图 - 滑块轨道上的缩略图控点(或旋钮)。 您可以为缩略图选择填充颜色和边框颜色。
    • 非活动 - 滑块轨道的未完成部分。

对于箭头样式,您可以配置以下设置:

  • 方向 - 水平或垂直显示导航按钮和文本。
  • 步长 - 定义每次单击导航按钮时该部分向前和向后移动了多少。 默认值为 1。 可接受的输入值范围介于 0 到 1 之间。 要查看步骤效果,必须为对应的“部分”微件设置过渡动画
  • 上一个和下一个 - 输入文本并选择导航按钮的图标。
  • 高级 - 覆盖应用程序的主题以更改微件的背景颜色和分页字体颜色(对于箭头 1箭头 3 样式),以及导航按钮的三种状态:默认是无用户交互时的按钮状态;悬停是用户指向按钮时的按钮状态;禁用是当没有下一个或上一个视图时不可单击的按钮状态。
    • 文本 - 为导航按钮的文本选择字体大小(以像素为单位)、颜色和样式。
    • 图标 - 更改导航按钮的大小(以像素为单位)和颜色。
    • 背景 - 选择导航按钮的填充颜色。
    • 边框 - 选择按钮边框的颜色、样式和宽度(以像素为单位)。
    • 边框半径 - 更改半径大小(按像素或百分比)以使导航按钮的角变为圆角。

交互选项

此微件支持消息操作,可在微件设置的操作选项卡上配置这些操作。 消息操作可创建微件之间的自动交互。

“视图导航”微件支持视图更改按钮单击触发器。 例如,可以在用户使用“视图导航”微件更改视图时打开侧边栏微件。 为此,请在应用程序中添加两个微件。 在“视图导航”微件的设置中,单击添加触发器,选择视图更改,选择“侧边栏”微件作为目标,并选择打开侧边栏操作。