components
Functionalities Module
v.1.0.0 | SaturnUsage
1
import { FunctionalitiesModule } from '@kubit-ui-web/react-components';
Props
Let's delve into the versatility of the FunctionalitiesModule component by examining all its avalaible props.
FunctionalitiesModule UnControlled
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant |
| defaultOpen | Boolean | false | Default open state in actionBottomSheet when mobile and tablet |
| defaultSelectedValue | Number or String | - | Option selected inside the tab |
| onOpenClose | (value: Boolean) => void | - | Callback when opening or closing the actionBottomSheet |
| selectedValue | number, String, null | - | Option selected inside the tab |
| tabsContainerAriaLabel | String | - | Aria label for tabs container |
| tabsConfig | FunctionalitiesModuleTabsConfig | - | Config for tabs |
| sections | FunctionalitiesModuleSectionType | - | Array of sections with its options |
| hasTitleSection | Boolean | - | Boolean to show section title or not |
| trigger | FunctionalitiesModuleTriggerType | - | Button that opens and closes actionBottomSheet |
| actionBottomSheet | FunctionalitiesModuleActionBottomSheetType | - | ActionBottomSheet component |
| onOptionClick | (value: String, number) => void | - | Callback for when an option is clicked |
| dataTestId | String | - | Test id |
| ctv | FunctionalitiesModuleVariantStylesType | - | Modify styles for the default version of the component |
FunctionalitiesModule Controlled
| Property | Type | Default | Description |
|---|---|---|---|
variant Required | String | - | Variant |
| defaultOpen | Boolean | false | Default open state in actionBottomSheet when mobile and tablet |
| onOpenClose | (value: Boolean) => void | - | Callback when opening or closing the actionBottomSheet |
| tabsContainerAriaLabel | String | - | Aria label for tabs container |
| tabsConfig | FunctionalitiesModuleTabsConfig | - | Config for tabs |
| sections | FunctionalitiesModuleSectionType | - | Array of sections with its options |
| hasTitleSection | Boolean | - | Boolean to show section title or not |
| trigger | FunctionalitiesModuleTriggerType | - | Button that opens and closes actionBottomSheet |
| actionBottomSheet | FunctionalitiesModuleActionBottomSheetType | - | ActionBottomSheet component |
| onOptionClick | (value: String, number) => void | - | Callback for when an option is clicked |
| dataTestId | String | - | Test id |
| ctv | FunctionalitiesModuleVariantStylesType | - | Modify styles for the default version of the component |
| open | Boolean | false | Boolean to know if it is open or not |
| selectedValue | Number or String | - | Option selected inside the tab |