<Details> Component
<Details> is a foldable content widget. Supports customization of themes, sizes, and other variants.
Here the demo:
Installing <Details> Component
There are 2 ways to install <Details> component into your react app project:
- Install the Specific Package of
<Details>Component - Install the Whole Reusable-UI Component Pack, including the
<Details>Component
expanded Property
Expands/Collapses the <Details>.
The possible values are:
undefinedtruefalse
Here the preview:
Show code
defaultExpanded Property
Defines the initial expanded state when the <Details> is first loaded.
The possible values are:
undefinedtruefalse
onExpandedChange Property
Sets a callback function to be called when the user opens/closes the <Details>.
The callback function parameters:
event: ExpandedChangeEvent
lazy Property
Determines whenever the <Details>'s children should be rendered or not when the <Details expanded={false}>.
The possible values are:
undefinedfalsetrue
Variant Properties
The alternative appearances of the <Details> layout without changing the <Details>'s functionality.
detailsStyle Property
Sets the alternative appearances of the <Details>.
The possible values are:
undefined'regular''content'
Here the preview:
Show code
size Property
Defines the alternative size of the <Details>.
The possible values are:
undefined'sm''md''lg'
Here the preview:
Show code
theme Property
Defines the contextual theme of the <Details>.
The possible values are:
undefined'primary''secondary''success''info''warning''danger''light''dark'
Here the preview:
Show code
gradient Property
Activates a 3D mode of the <Details>.
The possible values are:
undefined'inherit'truefalse
Here the preview:
Show code
outlined Property
Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Details>.
The possible values are:
undefined'inherit'truefalse
Here the preview:
Show code
mild Property
Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Details>.
The possible values are:
undefined'inherit'truefalse
Here the preview:
Show code
Component Properties
Overwrites the internal (sub) components used as the composition of <Details> component.
buttonComponent Property
Overwrites the internal <Button> component used as the composition of <Details> component.
<Details buttonComponent={
<MyCustomButton />
} />buttonRef Property
Gets the DOM reference of the internal <Button> component used as the composition of <Details> component.
<Details buttonRef={fooButtonRef} /><Details buttonComponent={
<Button elmRef={fooButtonRef} />
} />buttonOrientation Property
Sets the orientation of the internal <Button> component used as the composition of <Details> component.
<Details buttonOrientation='inline' /><Details buttonComponent={
<Button orientation='inline' />
} />buttonStyle Property
Sets the alternative appearances of the <Button>.
The possible values are:
undefined'regular''link''ghost'
buttonChildren Property
Defines the nested element of the internal <Button> component used as the composition of <Details> component.
<Details buttonChildren={
<span>Hello World</span>
} /><Details buttonComponent={
<Button>
<span>Hello World</span>
</Button>
} />toggleButtonComponent Property
Overwrites the internal <ToggleButton> component used as the composition of <Details> component.
<Details toggleButtonComponent={
<MyCustomToggleButton />
} />bodyComponent Property
Overwrites the internal <Basic> component used as the composition of <Details> component.
<Details bodyComponent={
<MyCustomBasic />
} />Inherited Properties
Because <Details> is made from <Basic>, so all properties from <Basic> are inherited.
Variables
There are several variables of <Details> you can customize. Changing the variables affects all <Details> instance and other components that depend on <Details>.
Here the exposed variables:
- Layouts
togglerDisplayThe display mode to apply to the
<Details>'s<ToggleButton>.togglerTextAlignThe text alignment to apply to the
<Details>'s<ToggleButton>.
- Backgrounds, Foregrounds, Borders, & Rings
borderStyleThe shape of border (stroke).
borderWidthThe thickness of border (stroke).
borderColorThe un-themed color of border (stroke).
borderRadiusThe default rounded corner radius.
borderRadiusSmThe rounded corner radius when
size='sm'.borderRadiusLgThe rounded corner radius when
size='lg'.
The example of accessing, modifying, & adding variables:
Show code