menu
0.11.5
Expander
Component that groups together content in an expanded box.
Module
import '@capitec/omni-components/expander';
content_copy 
import { OmniExpander } from "@capitec/omni-components-react/expander";
content_copy
Source
Packages
Interactive
Disabled
Button Alignment
Expanded
Expand Icon
Header Icon
Interactive Disabled Button Alignment Expanded Expand Icon Header Icon

Properties

Name Attribute Type Description
label label  
string | undefined
 Expander component label.
expanded expanded  
boolean | undefined
 Indicator if the expander is expanded.
disabled disabled  
boolean | undefined
 Indicator if the expander is disabled.
buttonAlignment button-alignment  
'left' | 'right'
 Indicate where the Expander button should be positioned
dir dir  
string
 Used to set the base direction of text for display
lang lang  
string
 Used to identify the language of text content on the web

Events

Name Type Description
expand 
CustomEvent
 Dispatched when the expander is expanded.
collapse 
CustomEvent
 Dispatched when the expander is collapsed.

Slots

Name Description 
loading_indicator
 Used to define content that is displayed while async rendering is awaiting, or when renderLoading() is implicitly called 
[Default Slot]
 Content to render inside the expander once expanded. 
expand-icon
 Replaces the expand icon by default this will be the omni-chevron-down-icon. 
header-icon
 Replaces the icon in the header which is usually placed on the opposite end of the expand icon.

Theme Variables

Name Description 
--omni-theme-primary-color
 Theme primary color. 
--omni-theme-primary-hover-color
 Theme primary hover color. 
--omni-theme-primary-active-color
 Theme primary active color. 
--omni-theme-accent-color
 Theme accent color. 
--omni-theme-accent-hover-color
 Theme accent hover color. 
--omni-theme-accent-active-color
 Theme accent active color. 
--omni-theme-background-color
 Theme background color. 
--omni-theme-background-hover-color
 Theme background hover color. 
--omni-theme-background-active-color
 Theme background active color. 
--omni-theme-font-color
 Theme font color. 
--omni-theme-disabled-border-color
 Theme disabled border color. 
--omni-theme-disabled-background-color
 Theme disabled background color. 
--omni-theme-error-font-color
 Theme disabled background color. 
--omni-theme-error-border-color
 Theme error border color. 
--omni-theme-hint-font-color
 Theme hint font color. 
--omni-theme-inactive-color
 Theme inactive color. 
--omni-theme-box-shadow-color
 Theme inactive color. 
--omni-theme-font-family
 Theme font family. 
--omni-theme-font-size
 Theme font size. 
--omni-theme-font-weight
 Theme font weight. 
--omni-theme-border-radius
 Theme border radius. 
--omni-theme-border-width
 Theme border width. 
--omni-theme-box-shadow
 Theme box shadow.

Component Variables

Name Description 
--omni-expander-header-min-height
 Expander component minimum height. 
--omni-expander-header-max-height
 Expander component maximum height. 
--omni-expander-width
 Expander component width. 
--omni-expander-background
 Expander component background. 
--omni-expander-expanded-height
 Expander component expanded height. 
--omni-expander-header-width
 Expander header width. 
--omni-expander-header-height
 Expander header height. 
--omni-expander-header-padding
 Expander header padding. 
--omni-expander-header-border-top
 Expander header border top. 
--omni-expander-header-hover-background
 Expander header hover background. 
--omni-expander-header-label-font-color
 Expander header label font color. 
--omni-expander-header-label-font-size
 Expander header label font size. 
--omni-expander-header-label-font-weight
 Expander header label font weight. 
--omni-expander-header-disabled-background
 Expander header disabled background. 
--omni-expander-content-width
 Expander content width. 
--omni-expander-content-height
 Expander content height. 
--omni-expander-content-border
 Expander content border. 
--omni-expander-content-padding
 Expander content padding. 
--omni-expander-content-closed-padding-top
 Expander content closed top padding. 
--omni-expander-content-closed-padding-bottom
 Expander content closed bottom padding. 
--omni-expander-content-expanded-border-bottom
 Bottom border of the expander content. 
--omni-expander-header-icon-container-padding
 Expander header icon container padding. 
--omni-expander-header-icon-slot-width
 Expander header icon slot width. 
--omni-expander-header-icon-slot-height
 Expander header icon slot height. 
--omni-expander-expand-icon-container-padding
 Expander expand icon container padding. 
--omni-expander-expand-icon-width
 Expander expand icon width. 
--omni-expander-expand-icon-height
 Expander expand icon height. 
--omni-expander-expand-icon-color
 Expander expand icon color. 
--omni-expander-expanding-container-padding-top
 Expander expanding content top padding. 
--omni-expander-expanding-container-padding-bottom
 Expander expanding content bottom padding.