nve-drawer

Bruk denne hvor du trenger en skuff, enten for hele siden eller mer lokalisert inne i en boks.

Arvet fra SlDrawer.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

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.

 

<div>
  <nve-button>Åpne</nve-button>
  <nve-drawer label="Skuff" class="drawer-overview">
    Lorem ipsum dolor sit amet
    <nve-button variant="primary" slot="footer"> Lukk </nve-button>
  </nve-drawer>
</div>

<script>
  const drawer = document.querySelector('.drawer-overview');
  const openButton = drawer.previousElementSibling;
  const closeButton = drawer.querySelector('nve-button[variant="primary"]');
  openButton.addEventListener('click', () => drawer.show());
  closeButton.addEventListener('click', () => drawer.hide());
</script>

Default er at skuffen åpner seg på høyre side.

Eksempler

Slots

Vi har 3 slots pluss hoved innholdet vi kan endre på

• label
• header-actions
• footer

Label slotten kan også brukes som et attributt på nve-drawer <nve-drawer label="Skuff">

<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

<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

<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

<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 placement="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.

<div
  style="position: relative; border: solid 2px var(--sl-panel-border-color); height: 300px; padding: 1rem; margin-bottom: 1rem;"
>
  <sl-drawer label="Skuff" contained class="drawer-contained" style="--size: 50%;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </sl-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>

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.