Recolhível

Um recolhível é um único <details> — o mesmo elemento com que um acordeão é construído, sem nada da sua moldura. Usa-o para um detalhe opcional a meio de uma página; usa accordion() quando houver um conjunto deles.

Não precisa de script e, como o conteúdo fica no documento, é encontrável tanto pela procura na página do navegador como por um motor de busca.

Recolhível básico

Ver a configuração gerada

Tudo o que o sitelo escreve quando corres a construção sem um ficheiro de configuração teu.

collapsible({ trigger: 'Ver a configuração gerada' },
  text({ variant: 'small' }, 'Tudo o que o sitelo escreve quando corres a construção sem um ficheiro de configuração teu.'),
)

Aberto por predefinição

Porque é que isto existe

Porque uma página que esconde a explicação atrás de um clique é uma página que ninguém lê.

collapsible({ trigger: 'Porque é que isto existe', open: true },
  text({ variant: 'small' }, 'Porque uma página que esconde a explicação atrás de um clique é uma página que ninguém lê.'),
)

Conteúdo rico

Ver a saída completa
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Ver a saída completa' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

Dentro de outras coisas

Um recolhível assenta bem dentro de um cartão, de um alerta ou de uma célula de tabela.

Construção falhou

2 ligações partidas

Ver as ligações com problemas
  • /docs/old-routing
    ligado a partir de /docs
  • /blog/draft
    ligado a partir de /blog
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Construção falhou', subtitle: '2 ligações partidas' }),
    cardBody(
      collapsible({ trigger: 'Ver as ligações com problemas' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: 'ligado a partir de /docs' }),
          listItem({ title: '/blog/draft', description: 'ligado a partir de /blog' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Página lenta' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'Uma página demorou mais de 500 ms a renderizar.'),
      collapsible({ trigger: 'Ver os tempos' },
        text({ variant: 'small' }, '/examples/wordpress — 512 ms'),
      ),
    ),
  ),
)

O acionador

Fica-te por texto e ícones. Um <summary> já é interativo, por isso um botão ou uma ligação lá dentro aninha dois controlos onde existe uma só ação — a mesma regra que menu() segue.

Recolhível ou acordeão?

Uma revelação isolada: collapsible(). Um conjunto delas, com contorno e agrupadas, opcionalmente com só uma aberta de cada vez: accordion().

Props

PropTipoPredefiniçãoDescrição
triggerChild—O conteúdo do resumo. Só texto e ícones.
openbooleanfalseSe começa expandido.