pantoken-root / renderers/web-components/src / drilldown

متغير: drilldown

const drilldown: ElementDefinition

Alpha

<instui-drilldown> — قائمة متعددة المستويات وحافظة للحالة تعتمد على أنماط القوائم. كل مستوى هو [data-page="id"] في الـ light-DOM حيث تُستنسخ .items الداخلية إلى .instui-menu في الظِل؛ العنصر الذي يحمل data-goto="id" ينتقل إلى تلك الصفحة وتُعرض صفّ العودة المولّد (أو أي عنصر [data-back]) عند العودة. الـ light DOM هو مصدر البيانات فقط — بدون <slot> لا يتم عرضه، لذا تقوم CSS الخاصة بالـ shadow بتنسيق كل لوحة بالكامل. السمة active تعكس الصفحة الحالية ويمكن تعيينها للتنقل؛ وحدث navigate المتدفّق (detail.page) يُطلق عند كل حركة. يمكن قيادته من light DOM عبر أوامر Invoker: <button command="--goto" commandfor="dd-id" data-page="…"> ينزل و <button command="--back" commandfor="dd-id"> يعود.

Example

<instui-drilldown active="root">
  <div data-page="root">
    <div class="item" data-goto="settings">الإعدادات</div>
  </div>
  <div data-page="settings">
    <div class="item">الملف الشخصي</div>
  </div>
</instui-drilldown>