Un diseño que se adapta a la pantalla

Traducción automática

Esta página se tradujo automáticamente del inglés y todavía no la revisó un hablante nativo; las correcciones son bienvenidas en GitHub. Si algo no coincide, vale el original en inglés.

Tarea: un menú lateral junto al contenido en una pantalla ancha, y encima de él en un teléfono.

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

stack-below="md" pone las cajas de un ui:hbox una encima de otra por debajo del ancho md (768 px en el navegador, 96 columnas en una terminal). width fija la caja lateral, grow="true" le da el resto al contenido, y hide-below="lg" deja una ayuda solo para pantallas anchas.

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

quantum test lee el texto de la página, no su diseño, así que verifica el contenido:

<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

El apilado en sí se verifica en la consola, donde una prueba puede medirlo: con 80 columnas #main está apilado, con 140 está lado a lado y #side tiene 220 / 8 = 27 columnas de ancho (tests/docs/test_cookbook_console.py). La regla: UI-2.