添加选项卡面板.

Learn DXPR BuilderBuild pagesAdd contentLay-out

当您希望将多个相关内容块放在一处、一次只显示一个时，请使用 Tabs。最后会得到一行选项卡标签；访客点击标签查看其内容。本例构建每项服务一个选项卡的代理页面。对于问答，折叠面板通常读起来更好。

三个服务选项卡，标签为 Web design、Branding 和 Marketing，Web design 在其文本上方展开

添加选项卡面板

  1. 悬停列并点击 + 在其控制栏中，或 + 在空白列中间，以打开元素选择器。
  2. 在 Layout 选项卡，点击 Tabs。元素出现时带有一个选项卡，标记为 Title.
  3. 悬停选项卡面板并打开 More > Settings。在以下位置输入名称 Tab title 并点击 Save.
  4. 点击 + 在面板内以添加内容，例如 Text 元素。
  5. 要添加选项卡，悬停选项卡标签并点击 Add tab：Tabs 控制栏。新选项卡落在最前面，为其命名并以同样方式填充。

您会看到的内容

一排选项卡标签位于打开选项卡的内容上方。在预览和已发布页面上，点击标签显示该选项卡的内容并隐藏其余。每个选项卡有自己的元素，因此一个选项卡可带文本，另一个带一组卡片。屏幕窄于 768 像素时选项卡变成如折叠面板打开的堆叠标题。

设置选项卡

该 Tabs 元素有三个设置。从以下位置打开它们 More > Settings：Tabs 控制栏，悬停选项卡标签时出现。

设置 它的作用 默认值
Tab direction 标签位置：默认值 （内容上方），Left 或 Right 默认值
Style 标签外观：默认值 （标签下方有一条线），Modern （圆角卡片）或 Accordion （带分隔线的标题） 默认值
Mobile friendly 屏幕窄于 768 像素时将选项卡显示为折叠标题 On

每个选项卡在以下位置有自己的设置 More > Settings 在其面板上。Tab title 是标签文本。Tab description 是打开选项卡标签下方的可选短行。

管理选项卡

  • Reorder：将选项卡标签拖到标签中的新位置。其内容随之移动。
  • Rename：悬停选项卡的面板，打开 More > Settings，更改 Tab title 并点击 Save.
  • Remove：悬停选项卡的面板，打开 More 并选择 Delete。选项卡内的所有内容随之移除。

标签保持一到三个词，选项卡保持五个左右，以便标签排在一行。

如果您看不到它

  • 新选项卡在首而非在末。 Add tab 始终将新选项卡放在最前面。将其标签拖到想要的位置。
  • 设置仅显示 Tab title 和 Tab description。 您打开了一个选项卡的设置。悬停选项卡标签以便 Tabs 控制栏出现，然后打开 More > Settings 那里。
  • 手机上显示堆叠标题而非选项卡。 Mobile friendly 已打开，这是默认值。在以下位置关闭它 Tabs 在每种屏幕宽度保持选项卡的设置。
  • Tabs 在选择器的 Layout 选项卡中缺失。 DXPR Builder 用户资料省略它。管理员勾选 Tabs 在 Elements 在您的资料中，位于 /admin/dxpr_studio/dxpr_builder/profile.

接下来做什么？