CSS: drawer-layout

.instui-drawer-layout — Um layout dividido com uma gaveta lateral recolhível e um painel de conteúdo primário rolável.

-placement-end e o padrão (start) usam propriedades lógicas flex-direction/inset-inline-*, não left/right, então o lado da gaveta segue direction/dir="rtl" automaticamente — não são necessárias regras RTL separadas.

Source: drawer-layout.css

Acessibilidade

Quando a gaveta funciona como navegação, rotule-a com um cabeçalho acessível ou aria-label. Dê a .content role="region" (convenção DrawerLayout do InstUI) e nomeie-a com aria-label/aria-labelledby quando o contexto por si só não a identificar.

Uso

@import "@pantoken/components/components.css";
@import "@pantoken/components/drawer-layout.css";

Exemplos

<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigation</aside>
  <main class="content" role="region">Main content</main>
</div>

Estrutura

.instui-drawer-layout
  drawer-layout.tray (component)
  drawer-layout.content (component)

flowchart TD n0[".instui-drawer-layout"]:::cssdoc-root n1(["drawer-layout.tray"]):::cssdoc-component n2(["drawer-layout.content"]):::cssdoc-component n0 --> n1 n0 --> n2 click n1 "/api/css/drawer-layout.tray.md" click n2 "/api/css/drawer-layout.content.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Modificadores

Modificador	Descrição
.-open	Mostrar a gaveta mesmo quando o atributo open estiver ausente.
.-placement-end	Ancorar a gaveta no lado inline-end.
.-placement-start	Ancorar a gaveta no lado inline-start (padrão; define explicitamente).
.-should-overlay-tray	Interaction — Render the tray as an overlay instead of shrinking content inline.

Partes

Parte	Descrição
.content	O painel principal.
.tray	O painel lateral.

Propriedades personalizadas

Propriedade	Tipo	Padrão	Descrição
--pantoken-bp-md	—	—	Limiar de largura para o modo sobreposição (30em, tematizado via utilitários responsivos).

Compatibilidade com navegadores

• Os membros drawer-layout.tray/drawer-layout.content mudam para o modo sobreposição automaticamente via uma consulta @container quando o inline-size deste elemento ficar abaixo de tray-width + --pantoken-bp-md. O comportamento @pantoken/interactions também alterna [should-overlay-tray]/.-should-overlay-tray (uma substituição manual) e emite overlaytraychange para apps que precisam da mudança como evento.

Subcomponentes

• drawer-layout.content
• drawer-layout.tray
• tray

Relacionados

• tray — Uma sobreposição de borda independente; este layout mantém a gaveta e o conteúdo no mesmo fluxo.
• context-view — Uma superfície ancorada menor para ações contextuais e detalhes.