Drawer with nested lists

[Kestami]

Hi, hopefully this is the right place to ask a question, I couldn't find another means of asking!

Is it possible to create a drawer that has nested lists in it?

• item a
• item b

• item b.1

• item b.2

• item c

Thanks in advance!

[elf-mouse]

Hi @Kestami ,

<ui-list-group>
  <ui-list-group-subheader>List Title 1</ui-list-group-subheader>
  <ui-nav>
    <ui-nav-item v-for="i in 3" :key="i">Item 1-{{ i }}</ui-nav-item>
  </ui-nav>

  <ui-list-divider></ui-list-divider>

  <ui-list-group-subheader>List Title 2</ui-list-group-subheader>
  <ui-nav>
    <ui-nav-item v-for="i in 3" :key="i">Item 2-{{ i }}</ui-nav-item>
  </ui-nav>
</ui-list-group>

See List docs for detail

[Kestami]

@elf-mouse Thanks : ) using the above and the docs, managed to tweak it to something that works. For some reason when using ui-list-group as above I was getting an error when my drawer expanded saying it required at least one child that was focusable. I changed iu-list-group to just ui-list and it seemed to fix it!

[elf-mouse]

Hi @Kestami,

About "Uncaught Error: FocusTrap: Element must have at least one focusable child."

It's Google MDC drawer component focus management standard.

A simple solution, add one link, like this:

<ui-drawer type="modal">
  <ui-drawer-header>
    <ui-drawer-title>
      <a>Title</a>
    </ui-drawer-title>
  </ui-drawer-header>
  <ui-drawer-content>
    ...
  </ui-drawer-content>
</ui-drawer>