pantoken / renderers/web-components/src / drilldown

Változó: drilldown

const drilldown: ElementDefinition

Alfa

<instui-drilldown> — egy állapotú, többszintű menü a menüstílusok felett. Minden szint egy könnyű DOM [data-page="id"], amelynek belső .item-eit egy árnyék .instui-menu-ba klónozzák; egy data-goto="id"-val rendelkező elem ereszkedik az adott oldalra, és egy szintetizált Vissza sor (vagy bármely [data-back] elem) visszatér. A könnyű DOM csak az adatforrás — <slot> nélkül soha nem jelenik meg, így az árnyék CSS teljes mértékben stílusozza az egyes paneleket. A active attribútum az aktuális oldalt tükrözi, és beállítható a navigációhoz; a buborékzó navigate esemény (detail.page) minden mozdulatnál kiváltódik. Vezérelhető a könnyű DOM-ból az Invoker Commands-on keresztül: a <button command="--goto" commandfor="dd-id" data-page="…"> ereszkedik és a <button command="--back" commandfor="dd-id"> visszatér.

Példa

<instui-drilldown active="root">
  <div data-page="root">
    <div class="item" data-goto="settings">Settings</div>
  </div>
  <div data-page="settings">
    <div class="item">Profile</div>
  </div>
</instui-drilldown>

Settings

Profile