Tabs Module
A Dash component that lets you render pages with tabs - the Tabs component's children can be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold children components that will be that tab's content.
Types
| Type | Description |
A list of children or a property for this dash component |
|
|
• value (string) - The value of the currently selected Tab • className (string) - Appends a class to the Tabs container holding the individual Tab components. • content_className (string) - Appends a class to the Tab content container holding the children of the Tab that is selected. • parent_className (string) - Appends a class to the top-level parent container holding both the Tabs container and the content container. • style (record) - Appends (inline) styles to the Tabs container holding the individual Tab components. • parent_style (record) - Appends (inline) styles to the top-level parent container holding both the Tabs container and the content container. • content_style (record) - Appends (inline) styles to the tab content container holding the children of the Tab that is selected. • vertical (boolean; default false) - Renders the tabs vertically (on the side) • mobile_breakpoint (number; default 800) - Breakpoint at which tabs are rendered full width (can be 0 if you don't want full width tabs on mobile) • children (list with values of type: a list of or a singular dash component, string or number | a list of or a singular dash component, string or number) - Array that holds Tab components • colors (record with the fields: 'border: string (optional)', 'primary: string (optional)', 'background: string (optional)'; default { border: '#d6d6d6', primary: '#1975FA', background: '#f9f9f9', }) - Holds the colors used by the Tabs and Tab components. If you set these, you should specify colors for all properties, so: colors: { border: '#d6d6d6', primary: '#1975FA', background: '#f9f9f9' } • 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. |
|
|
A Dash component that lets you render pages with tabs - the Tabs component's children can be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold children components that will be that tab's content. |
Functions and values
| Function or value | Description |
|
A Dash component that lets you render pages with tabs - the Tabs component's children can be dcc.Tab components, which can hold a label that will be displayed as a tab, and can in turn hold children components that will be that tab's content. 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. • value (string) - The value of the currently selected Tab • className (string) - Appends a class to the Tabs container holding the individual Tab components. • content_className (string) - Appends a class to the Tab content container holding the children of the Tab that is selected. • parent_className (string) - Appends a class to the top-level parent container holding both the Tabs container and the content container. • style (record) - Appends (inline) styles to the Tabs container holding the individual Tab components. • parent_style (record) - Appends (inline) styles to the top-level parent container holding both the Tabs container and the content container. • content_style (record) - Appends (inline) styles to the tab content container holding the children of the Tab that is selected. • vertical (boolean; default false) - Renders the tabs vertically (on the side) • mobile_breakpoint (number; default 800) - Breakpoint at which tabs are rendered full width (can be 0 if you don't want full width tabs on mobile) • children (list with values of type: a list of or a singular dash component, string or number | a list of or a singular dash component, string or number) - Array that holds Tab components • colors (record with the fields: 'border: string (optional)', 'primary: string (optional)', 'background: string (optional)'; default { border: '#d6d6d6', primary: '#1975FA', background: '#f9f9f9', }) - Holds the colors used by the Tabs and Tab components. If you set these, you should specify colors for all properties, so: colors: { border: '#d6d6d6', primary: '#1975FA', background: '#f9f9f9' } • 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.
|