data | string | object | function | (required) The data we want to fill the list with. Provide the data as a JSON string, array, or object in the specified 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 | string or number | (optional) Define a preselected data entry (index) or key inside an array item. Can be a string or integer. |
default_value | number | (optional) Define a startup value or handle a re-render without handling the state during the re-render by yourself. Defaults to null. |
triangle_position | string | (optional) Position of the arrow icon/triangle inside the drawer-list. Set to 'left' or 'right'. Defaults to 'left' if not set. |
direction | string | (optional) Defines the direction of how the drawer-list shows the options list. Can be 'bottom' or 'top'. Defaults to 'auto'. |
label_direction | string | (optional) The direction of the label. If set to 'horizontal', the label will be positioned horizontally next to the input element. If set to 'vertical', the label will be positioned vertically above the input element. |
prevent_selection | boolean | (optional) If set to true, the DrawerList will then not make any permanent selection. |
focusable | boolean | (optional) If set to true, the element is then focusable by assertive technologies. |
prevent_close | boolean | (optional) If set to true, the DrawerList will not close on any events. |
keep_open | boolean | (optional) If set to true, the DrawerList will close on outside clicks, but not on selection. |
independent_width | boolean | (optional) If set to true, the DrawerList will handle its width and position independently of the parent/mother element. |
fixed_position | boolean | (optional) If set to true, the DrawerList will be fixed in its scroll position by using CSS position: fixed;. |
enable_body_lock | boolean | (optional) If set to true, the HTML body will get locked from scrolling when the Dropdown is open. |
skip_keysearch | boolean | (optional) If set to true, search items by the first key will be ignored. |
ignore_events | boolean | (optional) If set to true, all keyboard and mouse events will be ignored. |
align_drawer | string | (optional) Use 'right' to change the options alignment direction. Makes only sense to use in combination with prevent_selection or more_menu - or if an independent width is used. |
list_class | string | (optional) Define an HTML class that will be set on the list, beside dnb-drawer-list__list. |
portal_class | string | (optional) Define an 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 | boolean | (optional) Defines if the options list should be scrollable (the max-height is set by default to 50vh). |
no_scroll_animation | boolean | (optional) To disable scrolling animation. |
no_animation | boolean | (optional) To disable appear/disappear (show/hide) animation. |
skip_portal | boolean | (optional) To disable the React Portal behavior. |
min_height | string | (optional) Defines the minimum height (in rem) of the options list. |
max_height | string | (optional) Defines the maximum height (in rem) of the options list. |
page_offset | string | (optional) Defines the available scrollable height. If scrolling should not 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). |
observer_element | string | (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 | string | (optional) Set a cache_hash as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete are using this because of the huge data changes due to search and reorder. |
wrapper_element | HTMLElement | (optional) Has to be an HTML Element, ideally a mother element, used to calculate sizes and distances. Also used for the 'click outside' detection. Clicking on the wrapper_element will not trigger an outside click. |
options_render | function | (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 | string or object | (optional) Spacing properties like top or bottom are supported. |