Details Group
<sl-details-group> | SlDetailsGroup
Details groups can be used to group related details into sections.
<sl-details-group> <sl-details summary="Summary 1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Summary 2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Summary 3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Summary 4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> </sl-details-group>
Examples
Compact Variant
Details group with compact variant and multi-expand.
<sl-details-group variant="compact" multi-expand> <sl-details summary="First"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sl-dropdown slot="actions-dropdown"> <sl-icon-button slot="trigger" name="ellipsis"></sl-icon-button> <sl-menu> <sl-menu-item value="delete">Delete</sl-menu-item> <sl-menu-item value="duplicate">Duplicate</sl-menu-item> <sl-menu-item value="disabled" disabled>Disabled</sl-menu-item> </sl-menu> </sl-dropdown> </sl-details> <sl-details summary="Second"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> </sl-details-group>
Details group with compact variant without multi-expand.
<sl-details-group variant="compact"> <sl-details summary="First"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sl-dropdown slot="actions-dropdown"> <sl-icon-button slot="trigger" name="ellipsis"></sl-icon-button> <sl-menu> <sl-menu-item value="delete">Delete</sl-menu-item> <sl-menu-item value="duplicate">Duplicate</sl-menu-item> <sl-menu-item value="disabled" disabled>Disabled</sl-menu-item> </sl-menu> </sl-dropdown> </sl-details> <sl-details summary="Second"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Last"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> </sl-details-group>
Roomy Variant
Details group with roomy variant and multi-expand.
<sl-details-group variant="roomy" multi-expand> <sl-details summary="First"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sl-dropdown slot="actions-dropdown"> <sl-icon-button slot="trigger" name="ellipsis"></sl-icon-button> <sl-menu> <sl-menu-item value="delete">Delete</sl-menu-item> <sl-menu-item value="duplicate">Duplicate</sl-menu-item> <sl-menu-item value="disabled" disabled>Disabled</sl-menu-item> </sl-menu> </sl-dropdown> </sl-details> <sl-details summary="Second"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> </sl-details-group>
Change roomy gap with --roomy-gap.
<sl-details-group class="change-gap" variant="roomy" multi-expand> <sl-details summary="First"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sl-dropdown slot="actions-dropdown"> <sl-icon-button slot="trigger" name="ellipsis"></sl-icon-button> <sl-menu> <sl-menu-item value="delete">Delete</sl-menu-item> <sl-menu-item value="duplicate">Duplicate</sl-menu-item> <sl-menu-item value="disabled" disabled>Disabled</sl-menu-item> </sl-menu> </sl-dropdown> </sl-details> <sl-details summary="Second"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Third"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> </sl-details-group> <style> .change-gap { --roomy-gap: 50px; } </style>
Details group with roomy variant without multi-expand.
<sl-details-group variant="roomy"> <sl-details summary="First"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sl-dropdown slot="actions-dropdown"> <sl-icon-button slot="trigger" name="ellipsis"></sl-icon-button> <sl-menu> <sl-menu-item value="delete">Delete</sl-menu-item> <sl-menu-item value="duplicate">Duplicate</sl-menu-item> <sl-menu-item value="disabled" disabled>Disabled</sl-menu-item> </sl-menu> </sl-dropdown> </sl-details> <sl-details summary="Second"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Last"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> </sl-details-group>
Checkbox variant
Checkbox variant for details with compact.
<sl-details-group> <sl-details summary="Toggle Me" class="details-with-checkbox" summary-icon-position="left" disable-rotate> <sl-checkbox slot="expand-icon"></sl-checkbox> <sl-checkbox checked slot="collapse-icon"></sl-checkbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Toggle Me" class="details-with-checkbox" summary-icon-position="left" disable-rotate> <sl-checkbox slot="expand-icon"></sl-checkbox> <sl-checkbox checked slot="collapse-icon"></sl-checkbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Toggle Me" class="details-with-checkbox" summary-icon-position="left" disable-rotate> <sl-checkbox slot="expand-icon"></sl-checkbox> <sl-checkbox checked slot="collapse-icon"></sl-checkbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sl-dropdown slot="actions-dropdown"> <sl-icon-button slot="trigger" name="ellipsis"></sl-icon-button> <sl-menu> <sl-menu-item value="delete">Delete</sl-menu-item> <sl-menu-item value="duplicate">Duplicate</sl-menu-item> <sl-menu-item value="disabled" disabled>Disabled</sl-menu-item> </sl-menu> </sl-dropdown> </sl-details> </sl-details-group> <style> .details-with-checkbox sl-checkbox::part(form-control) { display: flex; align-items: center; } .details-with-checkbox sl-checkbox::part(label) { margin-inline-start: 0 !important; } </style>
Checkbox variant for details with roomy and multi-expand.
<sl-details-group variant="roomy" multi-expand> <sl-details summary="Toggle Me" class="details-with-checkbox" summary-icon-position="left" disable-rotate open> <sl-checkbox slot="expand-icon"></sl-checkbox> <sl-checkbox checked slot="collapse-icon"></sl-checkbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Toggle Me" class="details-with-checkbox" summary-icon-position="left" disable-rotate> <sl-checkbox slot="expand-icon"></sl-checkbox> <sl-checkbox checked slot="collapse-icon"></sl-checkbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </sl-details> <sl-details summary="Toggle Me" class="details-with-checkbox" summary-icon-position="left" disable-rotate> <sl-checkbox slot="expand-icon"></sl-checkbox> <sl-checkbox checked slot="collapse-icon"></sl-checkbox> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <sl-dropdown slot="actions-dropdown"> <sl-icon-button slot="trigger" name="ellipsis"></sl-icon-button> <sl-menu> <sl-menu-item value="delete">Delete</sl-menu-item> <sl-menu-item value="duplicate">Duplicate</sl-menu-item> <sl-menu-item value="disabled" disabled>Disabled</sl-menu-item> </sl-menu> </sl-dropdown> </sl-details> </sl-details-group> <style> .details-with-checkbox sl-checkbox::part(form-control) { display: flex; align-items: center; } .details-with-checkbox sl-checkbox::part(label) { margin-inline-start: 0 !important; } </style>
[component-metadata:sl-details-group]
Slots
| Name | Description |
|---|---|
| (default) | One or more <sl-details> elements to display in the details group. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
variant
|
Variant of the details group. Either compact or roomy |
'compact' | 'roomy'
|
'compact'
|
|
multiExpand
multi-expand
|
Allow multiple details to be expanded at once |
boolean
|
false
|
|
label
|
The label for the details group. For accessibility. |
string
|
''
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
Learn more about customizing CSS parts.