Um layout que cabe na tela

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: um menu lateral ao lado do conteúdo numa tela larga, acima dele num celular.

# Recipe: side by side on a wide screen, stacked on a narrow one.
paths:
  components: ./components

stack-below="md" coloca as caixas de um ui:hbox uma sobre a outra abaixo da largura md (768 px no navegador, 96 colunas num terminal). width fixa a caixa lateral, grow="true" dá o resto ao conteúdo, e hide-below="lg" deixa uma dica só para telas largas.

<q:component name="Inbox">
  <ui:window title="Inbox">
    <!-- Side by side from md up; below md (768 px) the boxes stack. -->
    <ui:hbox gap="lg" padding="lg" stack-below="md" id="main">
      <ui:vbox width="220" gap="sm" id="side">
        <ui:link to="/">Inbox (3)</ui:link>
        <ui:link to="/sent">Sent</ui:link>
        <!-- Only on wide screens: hidden below lg. -->
        <ui:text hide-below="lg">Tip: press / to search.</ui:text>
      </ui:vbox>

      <!-- grow takes the width the side box leaves. -->
      <ui:vbox gap="sm" grow="true">
        <ui:panel title="Welcome">
          <ui:text>The main content takes the rest of the width.</ui:text>
        </ui:panel>
        <ui:hbox gap="sm" justify="end">
          <ui:button>Archive</ui:button>
          <ui:button variant="primary">Reply</ui:button>
        </ui:hbox>
      </ui:vbox>
    </ui:hbox>
  </ui:window>
</q:component>

O quantum test lê o texto da página, não o layout, então confere o conteúdo:

<q:test name="both columns are on the page, side first" page="/">
  <test:visit />
  <test:expect text="Inbox (3) Sent" />
  <test:expect text="Welcome The main content takes the rest of the width." />
  <test:expect text="Archive Reply" />
</q:test>

tests/layout.test.q
  PASS  both columns are on the page, side first
1 passed, 0 failed

O empilhamento em si é conferido no console, onde um teste consegue medi-lo: com 80 colunas #main está empilhado, com 140 fica lado a lado e #side tem 220 / 8 = 27 colunas de largura (tests/docs/test_cookbook_console.py). A regra: UI-2.