Skip to content

DrawerList

Description

The DrawerList component is a fragment inside other components.

It is used e.g. in the Dropdown.

Data structure

// as array
const data = [
// Every data item can, beside "content" - contain what ever
{
// (optional) can be what ever
selected_key: 'key_0',
// (optional) is show insted of "content", once selected
selected_value: 'Item 1 Value',
// Item content as a string or array
content: 'Item 1 Content'
},
// more items ...
{
selected_key: 'key_1',
content: ['Item 2 Value', 'Item 2 Content']
},
{
selected_key: 'key_2',
selected_value: 'Item 3 Value',
content: ['Item 3 Content A', 'Item 3 Content B']
},
{
selected_key: 'key_3',
selected_value: 'Item 4 Value',
content: ['Item 4 Content A', <>Custom Component</>]
}
]
// as object
const data = {
a: 'A',
b: 'B'
}

Demos

Default DrawerList, triggered by a ToggleButton

DrawerList list - only to vissualize

  • Brukskonto - Kari Nordmann
  • 1234 56 78902Sparekonto - Ole Nordmann
  • 1134 56 78962Feriekonto - Kari Nordmann med et kjempelangt etternavnsen
  • 1534 96 48901Oppussing - Ole Nordmann

Default DrawerList

Custom event and link on single item

Using List and Items markup

NB: By using this method you lose currently a lot of the core functionality like keyboard support and other accessibility features.