Dropdown (Dash.NET)

Dash.NET

Documentation for 0.2.0-alpha.5

Dropdown Module

Namespace: Dash.NET.DCC
Assembly: Dash.NET.dll

Types

Type	Description
Attr	A list of children or a property for this dash component
Dropdown	Dropdown is an interactive dropdown element for selecting one or more items. The values and labels of the dropdown items are specified in the `options` property and the selected item(s) are specified with the `value` property. Use a dropdown when you have many options (more than 5) or when you are constrained for space. Otherwise, you can use RadioItems or a Checklist, which have the benefit of showing the users all of the items at once.
DropdownValue	string \| number \| list with values of type: string \| number
Prop	• options (list with values of type: record with the fields: 'label: string \| number (required)', 'value: string \| number (required)', 'disabled: boolean (optional)', 'title: string (optional)') - An array of options {label: [string\|number], value: [string\|number]}, an optional disabled field can be used for each option • value (string \| number \| list with values of type: string \| number) - The value of the input. If `multi` is false (the default) then value is just a string that corresponds to the values provided in the `options` property. If `multi` is true, then multiple values can be selected at once, and `value` is an array of items with values corresponding to those in the `options` prop. • optionHeight (number; default 35) - height of each option. Can be increased when label lengths would wrap around • className (string) - className of the dropdown element • clearable (boolean; default true) - Whether or not the dropdown is "clearable", that is, whether or not a small "x" appears on the right of the dropdown that removes the selected value. • disabled (boolean; default false) - If true, this dropdown is disabled and the selection cannot be changed. • multi (boolean; default false) - If true, the user can select multiple values • placeholder (string) - The grey, default text shown when no option is selected • searchable (boolean; default true) - Whether to enable the searching feature or not • search_value (string) - The value typed in the DropDown for searching. • style (record) - Defines CSS styles which will override styles previously set. • loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer • persistence (boolean \| string \| number) - Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. • persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. • persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

Functions and values

Function or value Description

Function or value	Description
`Dropdown.dropdown id attrs` Full Usage: `Dropdown.dropdown id attrs` Parameters: id : `string` attrs : `Attr list` Returns: `DashComponent`	Dropdown is an interactive dropdown element for selecting one or more items. The values and labels of the dropdown items are specified in the `options` property and the selected item(s) are specified with the `value` property. Use a dropdown when you have many options (more than 5) or when you are constrained for space. Otherwise, you can use RadioItems or a Checklist, which have the benefit of showing the users all of the items at once. Properties: • id (string) - The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app. • options (list with values of type: record with the fields: 'label: string \| number (required)', 'value: string \| number (required)', 'disabled: boolean (optional)', 'title: string (optional)') - An array of options {label: [string\|number], value: [string\|number]}, an optional disabled field can be used for each option • value (string \| number \| list with values of type: string \| number) - The value of the input. If `multi` is false (the default) then value is just a string that corresponds to the values provided in the `options` property. If `multi` is true, then multiple values can be selected at once, and `value` is an array of items with values corresponding to those in the `options` prop. • optionHeight (number; default 35) - height of each option. Can be increased when label lengths would wrap around • className (string) - className of the dropdown element • clearable (boolean; default true) - Whether or not the dropdown is "clearable", that is, whether or not a small "x" appears on the right of the dropdown that removes the selected value. • disabled (boolean; default false) - If true, this dropdown is disabled and the selection cannot be changed. • multi (boolean; default false) - If true, the user can select multiple values • placeholder (string) - The grey, default text shown when no option is selected • searchable (boolean; default true) - Whether to enable the searching feature or not • search_value (string) - The value typed in the DropDown for searching. • style (record) - Defines CSS styles which will override styles previously set. • loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer • persistence (boolean \| string \| number) - Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. • persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. • persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit. id : `string` attrs : `Attr list` Returns: `DashComponent`


                
                  
                    
                      Dropdown.dropdown id attrs

Full Usage: Dropdown.dropdown id attrs

Parameters:

id : string

attrs : Attr list

Returns: DashComponent

Dropdown is an interactive dropdown element for selecting one or more items. The values and labels of the dropdown items are specified in the `options` property and the selected item(s) are specified with the `value` property. Use a dropdown when you have many options (more than 5) or when you are constrained for space. Otherwise, you can use RadioItems or a Checklist, which have the benefit of showing the users all of the items at once. Properties: • id (string) - The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app. • options (list with values of type: record with the fields: 'label: string | number (required)', 'value: string | number (required)', 'disabled: boolean (optional)', 'title: string (optional)') - An array of options {label: [string|number], value: [string|number]}, an optional disabled field can be used for each option • value (string | number | list with values of type: string | number) - The value of the input. If `multi` is false (the default) then value is just a string that corresponds to the values provided in the `options` property. If `multi` is true, then multiple values can be selected at once, and `value` is an array of items with values corresponding to those in the `options` prop. • optionHeight (number; default 35) - height of each option. Can be increased when label lengths would wrap around • className (string) - className of the dropdown element • clearable (boolean; default true) - Whether or not the dropdown is "clearable", that is, whether or not a small "x" appears on the right of the dropdown that removes the selected value. • disabled (boolean; default false) - If true, this dropdown is disabled and the selection cannot be changed. • multi (boolean; default false) - If true, the user can select multiple values • placeholder (string) - The grey, default text shown when no option is selected • searchable (boolean; default true) - Whether to enable the searching feature or not • search_value (string) - The value typed in the DropDown for searching. • style (record) - Defines CSS styles which will override styles previously set. • loading_state (record with the fields: 'is_loading: boolean (optional)', 'prop_name: string (optional)', 'component_name: string (optional)') - Object that holds the loading state object coming from dash-renderer • persistence (boolean | string | number) - Used to allow user interactions in this component to be persisted when the component - or the page - is refreshed. If `persisted` is truthy and hasn't changed from its previous value, a `value` that the user has changed while using the app will keep that change, as long as the new `value` also matches what was given originally. Used in conjunction with `persistence_type`. • persisted_props (list with values of type: value equal to: 'value'; default ['value']) - Properties whose user interactions will persist after refreshing the component or the page. Since only `value` is allowed this prop can normally be ignored. • persistence_type (value equal to: 'local', 'session', 'memory'; default local) - Where persisted user changes will be stored: memory: only kept in memory, reset on page refresh. local: window.localStorage, data is kept after the browser quit. session: window.sessionStorage, data is cleared once the browser quit.

id : string
attrs : Attr list

Returns: DashComponent