DrawerList Properties
| Properties | Description |
|---|---|
data or children | (required) the data we want to fill the list with. Provide the data as a JSON string, array or object in these data structure. If you don't have to define a value, you can also send in a function which will be called once the user opens the DrawerList. |
value | (optional) define a preselected data entry (index). Should either be an index (integer) of the data array or a key – defined by selectedKey (the deprecated selected_key should not start with a number) inside an array item. Or if data is an object, use the object key as the value to define the selected item. Can be a string or integer. |
default_value | (optional) if you want to define only a startup value (integer) or have to handle a re-render without handling the state during the re-render by yourself, then using default_value is a good choice. Defaults to null. |
triangle_position | (optional) position of arrow icon/triangle inside the drawer-list. Set to left or right. Defaults to left if not set. |
direction | (optional) defines the direction of how the drawer-list shows the options list. Can be bottom or top. Defaults to auto. |
prevent_selection | (optional) If set to true, the DrawerList will then not make any permanent selection. Defaults to false. |
focusable | (optional) If set to true, the element is then focusable by assertive technologies. |
prevent_close | (optional) If set to true, the DrawerList will not close on any events. Defaults to false. |
keep_open | (optional) If set to true, the DrawerList will close on outside clicks, but not on selection. Defaults to false. |
independent_width | (optional) If set to true, the DrawerList will handle it's width and position handling independent to the parent/mother element. Defaults to false. |
fixed_position | (optional) If set to true, the DrawerList will be fixed in it's scroll position by using CSS position: fixed;. Defaults to false. |
enable_body_lock | (optional) If set to true, the HTML body will get locked from scrolling when the Dropdown is open. Defaults to false. |
skip_keysearch | (optional) If set to true, search items by the first key will be ignored. Defaults to false. |
ignore_events | (optional) If set to true, all keyboard and mouse events will be ignored. Defaults to false. |
align_drawer | (optional) use right to change the options alignment direction. Makes only sense to use in combination with prevent_selection or more_menu - or if a independent width is used. Defaults to left. |
list_class | (optional) define a HTML class that will be set on the list, beside dnb-drawer-list__list. |
portal_class | (optional) define a HTML class that will be set on the DOM portal beside dnb-drawer-list__portal__style. Can be useful to handle e.g. a custom z-index in relation to a header. |
scrollable | (optional) defines if the options list should be scrollable (the max-height is set by default to 50vh). Defaults to true. |
no_scroll_animation | (optional) to disable scrolling animation. Defaults to false. |
no_animation | (optional) to disable appear/disappear (show/hide) animation. Defaults to false. |
skip_portal | (optional) to disable the React Portal behavior. Defaults to false. |
min_height | (optional) defines if the minimum height (in rem) of the options list. Defaults to 10rem. |
max_height | (optional) defines if the maximum height (in rem) of the options list. Defaults to null, as this is set automatically by default. |
page_offset | (optional) defines if the available scrollable height. If scrolling not should change the height of the drawer-list, then set it to 0 (useful if the DrawerList is used in fixed positions on contrast to a scrollable page content). Defaults to window.pageYOffset. |
observer_element | (optional) set a HTML element, either as a selector or a DOM element. Can be used to send in an element which will be used to make the direction calculation on. |
cache_hash | (optional) set a cache_hash as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete is using this because of the huge data changes due to search and reorder. Defaults to null. |
wrapper_element | (optional) has to be a HTML Element, ideal a mother element, used to calculate sizes and distances. Also used for the "click outside" detection. Clicking on the wrapper_element will not be anymore triggered as an outside click. |
options_render | (optional) has to be a function, returning the items again. See example. This can be used to add additional options above the actual rendered list. |
| Space | (optional) spacing properties like top or bottom are supported. |