CSS: drawer-layout ​

.instui-drawer-layout — Leagan amach roinnte le tráid taobh inchoigeartaithe agus painéal ábhair príomhúil is féidir a scriobhú (scroll).

-placement-end agus an réamhshocrú (tús) úsáideann an dá flex-direction/inset-inline-* maoin loighciúla, ní left/right, mar sin leanann taobh an tráid direction/dir="rtl" go huathoibríoch — níl riail RTL ar leith ag teastáil.

Source: drawer-layout.css

Inrochtaineacht ​

Nuair a bhíonn an tráid mar nascleanúint, lipéadaigh é le ceannacht inacmhainne nó le aria-label. Tabhair do .content role="region" (réamh-nós DrawerLayout InstUI) agus ainmniu é le aria-label/aria-labelledby nuair nach ndéantar é a aithint go soiléir ón gcomhthéacs amháin.

Úsáid ​

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

Samplaí ​

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

Struchtúr ​

text
.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;

Modhnóirí ​

ModhnóirCur síos
.-openTaispeáin an tráid fiú nuair nach bhfuil an tréith open i láthair.
.-placement-endSocrú an tráid ar an taobh deiridh inlíne.
.-placement-startSocrú an tráid ar an taobh tosaigh inlíne (réamhshocrú; socraíonn sé é go sainráite).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Codanna ​

CuidCur síos
.contentAn phríomh-phainéal.
.trayAn painéal taobh.

Airíonna saincheaptha ​

AiríCineálRéamhshocraitheCur síos
--pantoken-bp-md——Teorainn leithead don mhód osclaíochta (30em, téamáilte trí uirlisí freagartha).

Tacaíocht bhrabhsálaí ​

  • Athraíonn baill drawer-layout.tray/drawer-layout.content go huathoibríoch go dtí an mód osclaíochta trí cheist @container nuair a thiteann méid inlíne an eilimint seo faoi leithead an tráid + --pantoken-bp-md. Ina theannta sin, déanann iompar @pantoken/interactions comhroghnú [should-overlay-tray]/.-should-overlay-tray (srianta láimhe) agus gintear overlaytraychange do aipeanna a bhfuil gá acu an t-athrú sin a fháil mar imeacht.

Fo-chomhpháirteanna ​

Gaolmhar ​

  • tray — Osclaíthaipe teorann neamhspleách; coinníonn an leagan amach seo an tráid agus an t-ábhar sa sreabhadh céanna.
  • context-view — Dromchla anchrach níos lú le gníomhartha comhthéacsacha agus le sonraí.