“视图导航”微件

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

示例

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

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

用法说明

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

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

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

设置

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

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

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

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

  • 视图 - 通过选择以下选项之一来定义要在微件中显示的视图:
    • 自动 - 在此部分中包含所有视图的选项卡。
    • 自定义 - 在此部分中包含特定视图的选项卡。
  • 方向 - 水平或垂直显示选项卡。
  • 间距 - 定义每个选项卡之间的间距(以像素为单位)。
  • 对齐 - 确定选项卡文本的放置。 例如,如果选择水平 pill 样式,则选项卡名称与选项卡对齐:左边对齐或右边对齐或居中对齐。
  • 高级 - 覆盖应用程序的主题以更改微件的背景颜色并设置选项卡的三种状态的样式以在用户悬停在选项卡或选择选项卡时提供其视觉提示。 常规是无用户交互时的选项卡状态;选定是选项卡的用户选择,在链接的“部分”微件中显示相应的视图;悬停是用户指向选项卡时的状态。
    提示:

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

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

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

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

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

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

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

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

在本主题中
  1. 示例
  2. 用法说明
  3. 设置