Componentes reutilizáveis

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: escrever um card uma vez e usá-lo em qualquer página, com conteúdo diferente.

yaml

# Recipe: a reusable component with props and a slot, kept out of the URLs.
paths:
  components: ./components

Um componente também é um arquivo .q. Os q:param dele são as props, e o q:slot é onde entra o conteúdo de quem o chama. Guarde-o numa pasta cujo nome começa com _: ele pode ser importado e nunca responde a uma URL.

xml

<q:component name="Card">
  <!-- Props are q:params; the caller's content goes where q:slot is. -->
  <q:param name="title" type="string" required="true" />
  <q:param name="tone" type="string" default="plain" />

  <section class="card card-{tone}">
    <h2>{title}</h2>
    <div class="card-body">
      <q:slot />
    </div>
  </section>
</q:component>

O q:import traz o componente para a página, e <Card> o usa. Cada atributo é uma prop, e o conteúdo entre as tags preenche o slot, calculado com as variáveis da página:

xml

<q:component name="Dashboard">
  <!-- from="_shared": a folder whose name starts with _ is never a page. -->
  <q:import component="Card" from="_shared" />
  <q:set name="open" type="number" value="4" />

  <html>
  <body>
    <Card title="Open tickets">
      <p>{open} waiting for an answer.</p>
    </Card>
    <Card title="Warning" tone="alert">
      <p>The mail server is slow today.</p>
    </Card>
  </body>
  </html>
</q:component>

xml

<q:test name="each card has its title and the page's content" page="/">
  <test:visit />
  <test:expect text="Open tickets 4 waiting for an answer." />
  <test:expect text="Warning The mail server is slow today." />
</q:test>

<q:test name="a component in a _ folder is not a page" page="/_shared/Card">
  <test:visit />
  <test:expect status="404" />
</q:test>

text

tests/cards.test.q
  PASS  each card has its title and the page's content
  PASS  a component in a _ folder is not a page
2 passed, 0 failed

Veja COMP-1, COMP-3 e ROUTE-3.

Componentes reutilizáveis ​

Componentes reutilizáveis