CSS: drawer-layout.content ​

.content — O painel de conteúdo principal que preenche o espaço restante ao lado da bandeja.

Quando o inline-size do elemento pai cair abaixo de 46em (largura da bandeja 16em + ponto de interrupção 30em), uma consulta @container no contêiner pantoken-drawer-layout do pai reduz automaticamente o min-inline-size deste membro para 0, correspondendo à sobrescrição manual [should-overlay-tray].

Acessibilidade ​

Mantenha role="region" (convenção DrawerLayout do InstUI) e nomeie-o com aria-label/aria-labelledby quando o contexto sozinho não o identificar.

Uso ​

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

Exemplos ​

html
<div class="instui-drawer-layout">
  <div class="content" role="region">
    <p class="instui-text">Conteúdo da bandeja</p>
  </div>
</div>

Estrutura ​

text
@scope (@component drawer-layout)
  .content
    ‹content›
flowchart TD subgraph sg0 ["@scope (@component drawer-layout)"] n1(".content"):::cssdoc-part n2[/"‹content›"/]:::cssdoc-slot end n1 --> n2 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Condições ​

TipoConsultaDescrição
containerpantoken-drawer-layout (max-width: 64em)—

Tokens consumidos ​

TokenTipoValor
--drawer-layout-content-min-inline-size<length>—
--pantoken-bp-md<length>48em

Relacionados ​