CSS: drawer-layout ​

.instui-drawer-layout — բաժանված դասավորություն՝ փակվող կողային տաշտով և գլխավոր սահող պարունակության պատյանով։

-placement-end և ստանդարտ (start) օգտագործում են flex-direction/inset-inline-* տրամաբանական հատկությունները, ոչ թե left/right՝ հետևաբար տաշտի կողմը ավտոմատաբար ենթարկվում է direction/dir="rtl"—ին՝ առանց առանձին RTL կանոնների։

Source: drawer-layout.css

Մուտքականություն ​

Երբ տաշտը ծառայում է որպես նավիգացիա, նշեք այն մատչելի վերնագրով կամ aria-label. Տվեք .content role="region" (InstUI-ի DrawerLayout բանաձևը) և անվանեք այն aria-label/aria-labelledby-ով, երբ միայն կոնտեքստը չի նույնացնում այն։

Օգտագործում ​

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

Օրինակներ ​

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

Կառուցվածք ​

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;

Մոդիֆիկատորներ ​

ՄոդիֆիկատորՆկարագիր
.-openՑույց տվեք տաշտը նույնիսկ երբ open հատկությունը բացակայում է։
.-placement-endՏաշտը տեղավորեք inline-end կողմում։
.-placement-startՏախտը տեղավորեք inline-start կողմում (ստանդարտ; սահմանում է այն արտահայտորեն)।
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Մասեր ​

ՄասՆկարագիր
.contentԳլխավոր պատյանը։
.trayԿողային վահանակը։

Անհատական հատկություններ ​

ԱռանձնահատկությունՏիպԸնթացիկՆկարագիր
--pantoken-bp-md——Թափանցման ռեժիմի լայնության շեմ (_ PTK_INLINE_CODE_0_, թեմված՝ արձագանքող օգտակարություններով)։

Բրաուզերի աջակցություն ​

  • drawer-layout.tray/drawer-layout.content անդամները անցում են կատարում overlay ռեժմին ավտոմատ՝ @container հարցումով երբ այս էլեմենտի inline-size-ը նվազում է տաշտի լայնությունից + --pantoken-bp-md։ @pantoken/interactions բխող վարքը նաև էլեկտրոնապես թռուցիկ է անում [should-overlay-tray]/.-should-overlay-tray (մեդրիչ վերակազմակերպում) և արտանետում overlaytraychange այն հավելվածների համար, որոնք պահանջում են փոփոխությունը որպես իրադարձություն։

Ենթակարողություններ ​

Ավելին կապված ​

  • tray — Ստանդալոն եզրային թաղված շերտ․ այս դասավորությունը պահում է տաշտն ու պարունակությունը նույն հոսքում։
  • context-view — Փոքրקומպակտ տեղաշարժված մակերես կոնտեքստային գործողությունների և մանրամասների համար։