kopia lustrzana https://github.com/shoelace-style/shoelace
66 wiersze
2.3 KiB
Markdown
66 wiersze
2.3 KiB
Markdown
|
# Details
|
||
|
|
|
||
|
|
[component-header:sl-details]
|
||
|
|
|
||
|
|
Details show a brief summary and expand to show additional content.
|
||
|
|
|
||
|
|
```html preview
|
||
|
|
<sl-details summary="Toggle Me">
|
||
|
|
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>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Examples
|
||
|
|
|
||
|
|
### Disabled
|
||
|
|
|
||
|
|
Use the `disable` attribute to prevent the details from expanding.
|
||
|
|
|
||
|
|
```html preview
|
||
|
|
<sl-details summary="Disabled" disabled>
|
||
|
|
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>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Grouping Details
|
||
|
|
|
||
|
|
Details are designed to function independently, but you can simulate a group or "accordion" where only one is shown at a time by listening for the `slShow` event.
|
||
|
|
|
||
|
|
```html preview
|
||
|
|
<div class="details-group-example">
|
||
|
|
<sl-details summary="First" open>
|
||
|
|
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="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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const container = document.querySelector('.details-group-example');
|
||
|
|
|
||
|
|
// Close all other details when one is shown
|
||
|
|
container.addEventListener('slShow', event => {
|
||
|
|
[...container.querySelectorAll('sl-details')].map(details => (details.open = event.target === details));
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.details-group-example sl-details:not(:last-of-type) {
|
||
|
|
margin-bottom: var(--sl-spacing-xx-small);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
```
|
||
|
|
|
||
|
|
[component-metadata:sl-details]
|