kopia lustrzana https://github.com/shoelace-style/shoelace
88 wiersze
3.1 KiB
Markdown
88 wiersze
3.1 KiB
Markdown
<!-- cspell:dictionaries lorem-ipsum -->
|
|
|
|
# Details
|
|
|
|
[component-header:sl-details]
|
|
|
|
```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>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlDetails } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<SlDetails 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.
|
|
</SlDetails>
|
|
);
|
|
```
|
|
|
|
## 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>
|
|
```
|
|
|
|
```jsx react
|
|
import { SlDetails } from '@shoelace-style/shoelace/dist/react';
|
|
|
|
const App = () => (
|
|
<SlDetails 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.
|
|
</SlDetails>
|
|
);
|
|
```
|
|
|
|
### 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 `sl-show` 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('sl-show', 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-2x-small);
|
|
}
|
|
</style>
|
|
```
|
|
|
|
[component-metadata:sl-details]
|