Abas

Tradução automática

Esta página foi traduzida automaticamente do inglês e ainda não foi revisada por um falante nativo; correções são bem-vindas no GitHub. Se algo não bater, vale o original em inglês. O código e os resultados são os mesmos do original, importados dos arquivos testados.

Tarefa: dividir uma página em seções, uma visível de cada vez.

yaml

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

Cada ui:tab é uma seção com um title; a primeira abre com a página. O conteúdo de todas as abas está na página, então uma aba escondida continua lá para a busca e para os testes.

xml

<q:component name="Settings">
  <q:set name="plan" value="Pro" />

  <ui:window title="Settings">
    <ui:vbox padding="lg">
      <!-- One ui:tab per section; the first one is open. -->
      <ui:tabpanel>
        <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: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>

xml

<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>

text

tests/tabs.test.q
  PASS  every tab has its title
  PASS  every tab's content is on the page
2 passed, 0 failed

ui:tabpanel faz parte do conjunto do Núcleo desenhado pelo navegador, pelo console e pela janela de desktop: UI-7.

Abas ​

Abas