CSS: drawer-layout ​

.instui-drawer-layout — He tatauranga wehe me tētahi karu taha e taea te tōkia, me tētahi pane ihirangi matua e taea te kauhau.

-placement-end me te taunoa (tīmatanga) e whakamahi ana i ngā rawa arorau flex-direction/inset-inline-*, kāore i te left/right, nō reira ka ū te taha o te karu ki direction/dir="rtl" āwhina āunoa — kāore he ture RTL motuhake e hiahiatia.

Source: drawer-layout.css

Wātea mō te katoa ​

A, ina mahi te karu hei aratohu, tapaina me tētahi taitara قابل-ikotahi (accessible heading) rānei aria-label. Homai .content role="region" (tūāhua DrawerLayout o InstUI) ka tapaina mā aria-label/aria-labelledby mēnā kāore te horopaki anake e tautohu i tōna ingoa.

Ngā Whakamahi ​

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

Ngā tauira ​

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

Hanganga ​

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;

Ngā Kaitī ​

KaiwhakatikatikaWhakamārama
.-openWhakaaturia te karu ahakoa kāore te āhuatanga open i te wātea.
.-placement-endTūhia te karu ki te taha mutunga-ā-ipurangi (inline-end).
.-placement-startTūhia te karu ki te taha tīmatanga-ā-ipurangi (inline-start) (te taunoa; whakaūhia ēnei tautuhinga).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Wāhanga ​

WāhangaWhakamārama
.contentTe pane matua.
.trayTe panui taha.

Ngā taonga ritenga ​

RawaMomoTaunoaWhakamārama
--pantoken-bp-md——Te whārite whānui mō te aratau uhi (overlay) (30em, ātathemehia mā ngā taputapu urupare).

Tautoko pūtirotiro ​

  • Ka hurihia āunoa ngā mema drawer-layout.tray/drawer-layout.content ki te aratau uhi mā te pātai @container mēnā ka iti haere te rahi-ipurangi o tēnei tūemi ki raro i te whānui-karu + --pantoken-bp-md. Ka huri anō te whanonga @pantoken/interactions i te [should-overlay-tray]/.-should-overlay-tray (he whakakāinga ā-ringa) ā, ka whakaputa i overlaytraychange mō ngā taupānga e hiahiatia ana te whakarerekētanga hei kaupapa (event).

Ngā wāhanga-iti ​

Hono ​

  • tray — He uhi taha motuhake; ka mau tonu tēnei tatauranga i te karu me te ihirangi i roto i te rōpū kotahi.
  • context-view — He mata whakanoho iti mō ngā mahi horopaki me ngā taipitopito.