Skip to content

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.

 

html
<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">

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 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.

html
<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>

Egenskaper

NavnTypeArvet fraBeskrivelseReflected
testIdstring | undefined = undefined