Details

Details provide collapsible content sections that can be expanded or hidden by the reader. Useful for explanations, optional information, or progressive disclosure. Collapsing behavior can be disabled to create a static block.

Properties Copied

title Copied

string optional
The title shown in the summary section.

icon Copied

string optional
The icon displayed next to the title. Uses Scalar icon format. Defaults to line/arrow-chevron-right.

interactivity Copied

string optional
Controls whether the component is interactive (details) or static (div).
Use "none" to render a non-collapsible container.

open Copied

boolean optional
If true, the section starts expanded. The default behavior is for the section to start in a collapsed state.

Examples Copied

Basic Collapsible Section Copied

<scalar-detail title="More Info">

Here is some additional content.
</scalar-detail>

:::scalar-detail{title="More Info"}
Here is some additional content.
:::

Open by Default Copied

<scalar-detail title="Default Open" open>

The section is open by default.
</scalar-detail>

:::scalar-detail{title="Default Open" open='true'}
The section is open by default.
:::

With Custom Icon Copied

<scalar-detail title="Custom Icon" icon="airplane">

Using a custom icon.
</scalar-detail>

:::scalar-detail{title="Custom Icon" icon="airplane"}
Using a custom icon.
:::

Non-interactive Block Copied

<scalar-detail title="Non-Interactive">

These do not collapse when clicked.
</scalar-detail>

:::scalar-detail{title="Non-Interactive" interactivity="none" }
These do not collapse when clicked.
:::

Nested Copied

<scalar-detail title="Nested, Outer" >

Outer details content.
<scalar-detail title="Nested, Inner" >

Inner details content.
</scalar-detail>
</scalar-detail>

::::scalar-detail{title="Nested, Outer" }
With directives, the parent must have at least 1 more `:` than the elements it wraps.

:::scalar-detail{title="Non-Interactive" }
Inner details content.
:::
::::