标签页

机器翻译

本页由英文原文机器翻译而来，尚未经过母语审校，欢迎在 GitHub 上提出修改。内容如有出入，以英文原文为准。

任务： 把页面分成几个部分，一次只显示一个。

# Recipe: sections of a page in tabs.
paths:
  components: ./components

每个 ui:tab 是一个带 title 的部分；第一个随页面一起打开。 所有标签页的内容都在页面上，所以隐藏的标签页对搜索和测试来说仍然存在。

<q:component name="Settings">
  <q:set name="plan" value="Pro" />
  <!-- ?tab=Plan opens the Plan tab; without it, the first one opens -->
  <q:set name="tab" value="{query.tab}" default="Profile" />

  <!-- after the action, the page comes back on the tab it was sent from -->
  <q:action name="renew" method="POST">
    <q:redirect url="/?tab=Plan" flash="Plan renewed." />
  </q:action>

  <ui:window title="Settings">
    <ui:vbox padding="lg">
      <q:if condition="flash">
        <ui:alert variant="success">{flash}</ui:alert>
      </q:if>
      <!-- One ui:tab per section; open names the one that opens. -->
      <ui:tabpanel open="{tab}">
        <ui:tab title="Profile">
          <ui:text>Name: Ana Lima</ui:text>
          <ui:text>E-mail: ana@example.com</ui:text>
        </ui:tab>
        <ui:tab title="Plan">
          <ui:text>Current plan: {plan}</ui:text>
          <ui:badge variant="success">active</ui:badge>
          <ui:button on-click="renew">Renew</ui:button>
        </ui:tab>
        <ui:tab title="Security">
          <ui:text>Two-step sign-in is off.</ui:text>
        </ui:tab>
      </ui:tabpanel>
    </ui:vbox>
  </ui:window>
</q:component>

<q:test name="every tab has its title" page="/">
  <test:visit />
  <test:expect text="Profile" />
  <test:expect text="Plan" />
  <test:expect text="Security" />
</q:test>

<q:test name="every tab's content is on the page" page="/">
  <test:visit />
  <test:expect text="Name: Ana Lima" />
  <test:expect text="Current plan: Pro" />
  <test:expect text="Two-step sign-in is off." />
</q:test>

<q:test name="renewing comes back on the Plan tab" page="/">
  <test:submit action="renew" />
  <test:expect status="302" redirect="/?tab=Plan" flash="Plan renewed." />
</q:test>

tests/tabs.test.q
  PASS  every tab has its title
  PASS  every tab's content is on the page
  PASS  renewing comes back on the Plan tab
3 passed, 0 failed

ui:tabpanel 属于浏览器、终端和桌面窗口都会绘制的核心层组件集： UI-7。