<Details> Component

detailsStyle Property

Sets the alternative appearances of the <Details>.

The possible values are:

• undefined
• 'regular'
• 'content'

Here the preview:

Preview

Show Details

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium et ipsam, architecto cupiditate recusandae

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium

Show Details

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium et ipsam, architecto cupiditate recusandae

Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium

size Property

Defines the alternative size of the <Details>.

The possible values are:

• undefined
• 'sm'
• 'md'
• 'lg'

Here the preview:

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:

gradient Property

Activates a 3D mode of the <Details>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <Details>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <Details>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

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 />
} />