nve-drawer
Bruk denne hvor du trenger en skuff, enten for hele siden eller mer lokalisert inne i en boks.
Arvet fra SlDrawer.
Feil / oppgaver / PR
Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-drawer.
html
<div>
<nve-button>Åpne</nve-button>
<nve-drawer label="Skuff" class="drawer-overview">
Lorem ipsum dolor sit amet
</nve-drawer>
</div>
<script>
const drawer = document.querySelector('.drawer-overview');
const openButton = drawer.previousElementSibling;
openButton.addEventListener('click', () => drawer.show());
</script>Default er at skuffen åpner seg på høyre side.
Eksempler
Slots
Vi har 3 slots pluss hoved innholdet vi kan endre på
labelheader-actionsfooter
Label slotten kan også brukes som et attributt på nve-drawer <nve-drawer label="Skuff">
html
<div>
<nve-button>Åpne</nve-button>
<nve-drawer placement="end" class="drawer-slot">
<div slot="label">Dette er label slot'en</div>
<div slot="header-actions">
<nve-button id="dialogBtn" variant="text"><nve-icon name="warning"></nve-icon></nve-button>
</div>
Lorem ipsum dolor sit amet
<div slot="footer">Her er footer slot'en</div>
</nve-drawer>
<nve-dialog id="dialog" label="Ett eksempel"> <p>Dette er et eksempel</p> </nve-dialog>
</div>
<script>
const drawer = document.querySelector('.drawer-slot');
const openButton = drawer.previousElementSibling;
openButton.addEventListener('click', () => drawer.show());
document.getElementById('dialogBtn').addEventListener('click', () => document.getElementById('dialog').show());
</script>Åpne fra venstre side
Bruk placement="start" for å åpne skuffen fra venstre side
html
<div>
<nve-button>Åpne</nve-button>
<nve-drawer label="Skuff" placement="start" class="drawer-placement-start">
Lorem ipsum dolor sit amet
</nve-drawer>
</div>
<script>
const drawer = document.querySelector('.drawer-placement-start');
const openButton = drawer.previousElementSibling;
openButton.addEventListener('click', () => drawer.show());
</script>Åpne fra toppen
Bruk placement="top" for å åpne skuffen fra toppen
html
<div>
<nve-button>Åpne</nve-button>
<nve-drawer label="Skuff" placement="top" class="drawer-placement-top">
Lorem ipsum dolor sit amet
</nve-drawer>
</div>
<script>
const drawer = document.querySelector('.drawer-placement-top');
const openButton = drawer.previousElementSibling;
openButton.addEventListener('click', () => drawer.show());
</script>Åpne fra bunn
Bruk placement="bottom" for å åpne skuffen fra bunn av siden
html
<div>
<nve-button>Åpne</nve-button>
<nve-drawer label="Skuff" placement="bottom" class="drawer-placement-bottom">
Lorem ipsum dolor sit amet
</nve-drawer>
</div>
<script>
const drawer = document.querySelector('.drawer-placement-bottom');
const openButton = drawer.previousElementSibling;
openButton.addEventListener('click', () => drawer.show());
</script>Bundet til et element
Som standard glir skuffer ut av sin inneholdende blokk, som vanligvis er visningsporten. For å få en skuff til å gli ut av et overordnet element, legg til attributtet contained til skuffen og bruk "position: relative" på det overordnede elementet.
I motsetning til vanlige skuffer, er ikke inneholdte skuffer modale. Dette betyr at de ikke viser et overlegg, de fanger ikke fokus, og de kan ikke lukkes med Escape. Dette er med vilje for å tillate brukere å samhandle med elementer utenfor skuffen.
html
<div
style="position: relative; border: solid 2px var(--sl-panel-border-color); height: 300px; padding: 1rem; margin-bottom: 1rem;"
>
<nve-drawer label="Skuff" contained class="drawer-contained" style="--size: 50%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-drawer>
</div>
<nve-button>Åpne</nve-button>
<script>
const drawer = document.querySelector('.drawer-contained');
const openButton = drawer.parentElement.nextElementSibling;
openButton.addEventListener('click', () => (drawer.open = !drawer.open));
</script>Et vanlig scenario
Dette er et vanlig scenario for bruk av skuffen der vi har en knapp for å åpne skuffen, label, innhold og to knapper i footeren. I eksemplet under har vi lagt til litt ekstra tekst for å vise hvordan skuffen oppfører seg når vi har for mye innhold samt hvordan det ser ut med to knapper i footer. Man bør styre unna å benytte lukkeknapp i footer da skuffen har en egen lukkeknapp i headeren.
html
<div>
<nve-button>Åpne</nve-button>
<nve-drawer label="Tittel" class="drawer-utfyllende-eksempel">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus velit a est placerat, in cursus urna varius. Pellentesque vestibulum enim in velit hendrerit feugiat. Morbi dapibus est lacus, nec blandit tortor feugiat et. Nulla tempus orci eget felis tempus interdum. Maecenas quis risus et sem ullamcorper pharetra. In hac habitasse platea dictumst. Integer a risus tincidunt, posuere nisi id, interdum augue. Pellentesque sagittis vulputate orci, vitae commodo elit porta ac. In laoreet eget diam aliquet pretium. Sed vel arcu commodo, auctor ex in, accumsan nisl. Maecenas varius, magna quis dignissim porta, dolor justo ullamcorper dui, non mollis augue nunc quis mi. Quisque in porttitor ligula. Vestibulum at ullamcorper nibh. In nisi quam, scelerisque at purus sit amet, congue molestie lectus. Curabitur dapibus rutrum mauris et luctus. Nulla efficitur, erat tincidunt posuere sagittis, sem massa tempus sem, id convallis magna augue eget libero. Morbi justo quam, imperdiet at porttitor blandit, semper et lectus. Pellentesque consectetur turpis eget libero pulvinar, id vehicula lorem dignissim. Proin nec mi bibendum, sagittis sapien at, fringilla arcu. Quisque pellentesque velit lectus, in sagittis odio auctor ut. Donec faucibus, nunc a interdum faucibus, purus nisi bibendum mi, non cursus enim libero sit amet nibh. Donec feugiat justo quis odio gravida, non mattis magna vehicula. Donec sagittis tincidunt diam quis porta. Nulla feugiat, est ut pharetra tempus, nibh turpis sollicitudin lacus, et pharetra elit orci elementum diam. Sed id egestas quam, sit amet tristique lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Mauris eget lorem tempus, maximus lacus vel, sagittis felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer rhoncus nisl arcu, ut interdum nunc efficitur non. Etiam semper imperdiet suscipit. Nunc vehicula scelerisque tempus. Phasellus pharetra dignissim finibus. Vestibulum suscipit tortor eget magna feugiat consequat. Pellentesque eleifend neque vel lobortis consequat. Nam tellus leo, rutrum quis nunc sed, laoreet mattis lacus. Praesent euismod libero sit amet sapien volutpat rutrum. Aenean eget tempor magna. Vestibulum quis magna in erat facilisis convallis. Cras sit amet velit quis velit vehicula malesuada pharetra et nisi. Suspendisse potenti. Sed maximus id nunc sed rutrum. Integer in sapien vitae metus ultricies tempus nec dignissim elit. Etiam posuere, quam et accumsan vehicula, massa lectus iaculis augue, nec ultrices diam turpis ac tellus. Fusce tincidunt mi et quam pulvinar, vitae scelerisque ex efficitur. Fusce vel ligula a ipsum facilisis lacinia.
<nve-button variant="info" slot="footer"> Button text
<nve-icon slot="suffix" name="grid_guides">
</nve-button>
<nve-button variant="primary" slot="footer"> Button text
<nve-icon slot="suffix" name="grid_guides">
</nve-button>
</nve-drawer>
</div>
<script>
const drawer = document.querySelector('.drawer-utfyllende-eksempel');
const openButton = drawer.previousElementSibling;
openButton.addEventListener('click', () => drawer.show());
</script>Spor
| Navn | Beskrivelse |
|---|---|
| (standard) | The drawer's main content. |
| label | The drawer's label. Alternatively, you can use the `label` attribute. |
| header-actions | Optional actions to add to the header. Works best with `<sl-icon-button>`. |
| footer | The drawer's footer, usually one or more buttons representing various options. |
Hendelser
| Navn | Arvet fra | Beskrivelse |
|---|---|---|
| sl-show | SlDrawer | Emitted when the drawer opens. |
| sl-after-show | SlDrawer | Emitted after the drawer opens and all animations are complete. |
| sl-hide | SlDrawer | Emitted when the drawer closes. |
| sl-after-hide | SlDrawer | Emitted after the drawer closes and all animations are complete. |
| sl-initial-focus | SlDrawer | Emitted when the drawer opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input. |
| sl-request-close | SlDrawer | Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in destructive behavior such as data loss. |
Egenskaper
| Navn | Type | Arvet fra | Beskrivelse | Reflected |
|---|---|---|---|---|
| testId | string | undefined = undefined | |||
| modal | = new Modal(this) | SlDrawer | Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third-party modals spawned from an active Shoelace modal, call `modal.activateExternal()` when the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Shoelace's focus trapping. | |
| drawer | HTMLElement | SlDrawer | ||
| panel | HTMLElement | SlDrawer | ||
| overlay | HTMLElement | SlDrawer | ||
| open | boolean = false | SlDrawer | Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state. | |
| label | string = '' | SlDrawer | The drawer's label as displayed in the header. You should always include a relevant label even when using `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. | |
| placement | 'top' | 'end' | 'bottom' | 'start' = 'end' | SlDrawer | The direction from which the drawer will open. | |
| contained | boolean = false | SlDrawer | By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of its parent element, set this attribute and add `position: relative` to the parent. | |
| noHeader | boolean = false | SlDrawer | Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the drawer. |
Metoder
| Navn | Parametre | Returtype | Arvet fra | Beskrivelse |
|---|---|---|---|---|
| handleOpenChange | SlDrawer | |||
| handleNoModalChange | SlDrawer | |||
| show | SlDrawer | Shows the drawer. | ||
| hide | SlDrawer | Hides the drawer |
Deler
| Navn | Beskrivelse |
|---|---|
| base | The component's base wrapper. |
| overlay | The overlay that covers the screen behind the drawer. |
| panel | The drawer's panel (where the drawer and its content are rendered). |
| header | The drawer's header. This element wraps the title and header actions. |
| header-actions | Optional actions to add to the header. Works best with `<sl-icon-button>`. |
| title | The drawer's title. |
| close-button | The close button, an `<sl-icon-button>`. |
| close-button__base | The close button's exported `base` part. |
| body | The drawer's body. |
| footer | The drawer's footer. |
Spesifikke CSS-variabler for komponent
| Navn | Beskrivelse |
|---|---|
| --size | The preferred size of the drawer. This will be applied to the drawer's width or height depending on its `placement`. Note that the drawer will shrink to accommodate smaller screens. |
| --header-spacing | The amount of padding to use for the header. |
| --body-spacing | The amount of padding to use for the body. |
| --footer-spacing | The amount of padding to use for the footer. |