nve-accordion-item

Viser et kort sammendrag og utvides for å vise ekstra innhold. Kan brukes som en selvstendig komponent eller som en del av nve-accordion.

Arvet fra SlDetails.

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

 

<nve-accordion-item summary="Vis mer tekst">
  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.
</nve-accordion-item>

Eksempler

Accordion

Bruk nve-accordion hvis du vil ha flere nve-accordion-item under hverandre, men kun tillate at en nve-accordion-item er åpen om gangen.

Varianter

Vi har mye av de samme variantene her som i andre steder av løsningen. none er standard, og har ingen bakgrunn eller luft på sidene. neutral har hvit bakgrunn.

<nve-accordion-item summary="none" open> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </nve-accordion-item>
<nve-accordion-item summary="neutral" open variant="neutral">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="secondary" open variant="secondary">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="info" open variant="info">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="success" open variant="success">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="warning" open variant="warning">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="error" open variant="error">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>

Ramme

Som standard har accordion ikke ramme rundt, men du kan sette det ved å sette border på komponenten

<nve-accordion-item summary="none" open border>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="neutral" open variant="neutral" border>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="secondary" open variant="secondary" border>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="info" open variant="info" border>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="success" open variant="success" border>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="warning" open variant="warning" border>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>
<nve-accordion-item summary="error" open variant="error" border>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</nve-accordion-item>

Tykk linje til venstre

Bruk leftStroke for å sette en tykk strek til venstre for komponenten. Denne er i samme farge som border, med unntak av none og neutral-variantene, som har fargen brand-primary

<nve-accordion-item summary="Ramme på venstre side" leftStroke>
  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.
</nve-accordion-item>

Kompakt visning

Viser accordion uten padding til venstre og høyre, og med en border under. Sett compact for å vise denne

<div>
  <nve-accordion-item summary="Kompakt visning" compact>
    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.
  </nve-accordion-item>
  <nve-accordion-item summary="Kompakt visning" compact>
    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.
  </nve-accordion-item>
  <nve-accordion-item summary="Kompakt visning" compact>
    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.
  </nve-accordion-item>
</div>

Tilpassing av tittel-sporet

Man kan bruke summary for å sette tittel, men kan også angi det som et eget spor dersom det er nødvendig

<nve-accordion-item>
  <div slot="summary" class="customheader" style="display: flex; gap: var(--spacing-small); align-items: center;">
    <div>Her er litt tekst</div>
    <div style="color: var(--brand-primary); font-size: 0.8em; font-weight: 400;">Annen tekst</div>
    <nve-icon name="home"></nve-icon>
  </div>
  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.
</nve-accordion-item>

Disabled

Bruk disabled for å deaktivere komponenten.

<nve-accordion-item 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.
</nve-accordion-item>

Tilpasse ikoner

Bruk summary-ikon og collapse-ikon for å endre henholdsvis ikonene for å åpne/utvide og lukke. For å deaktivere animasjonen, overstyr rotate-egenskapen på ikon som vist nedenfor.

<nve-accordion-item summary="Toggle Me" class="custom-icons">
  <nve-icon name="add" slot="expand-icon"></nve-icon>
  <nve-icon name="remove" slot="collapse-icon"></nve-icon>

  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.
</nve-accordion-item>

<style>
  nve-accordion-item.custom-icons::part(summary-icon) {
    rotate: none;
  }
</style>

Spor

Navn	Beskrivelse
(standard)	The details' main content.
summary	The details' summary. Alternatively, you can use the `summary` attribute.
expand-icon	Optional expand icon to use instead of the default. Works best with `<sl-icon>`.
collapse-icon	Optional collapse icon to use instead of the default. Works best with `<sl-icon>`.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-show	SlDetails	Emitted when the details opens.
sl-after-show	SlDetails	Emitted after the details opens and all animations are complete.
sl-hide	SlDetails	Emitted when the details closes.
sl-after-hide	SlDetails	Emitted after the details closes and all animations are complete.

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
testId	string | undefined = undefined
leftStroke	boolean = false		tykk strek på venstre side
variant	'none' | 'neutral' | 'info' | 'success' | 'warning' | 'error' = 'none'		Setter farge på bakgrunn og tekst
border	boolean = false		Vis en ramme rundt hele komponenten
compact	boolean = false		Kompakt visning uten luft på sidene. En strek vil vises under for å skille komponenter fra hverandre
details	HTMLDetailsElement	SlDetails
header	HTMLElement	SlDetails
body	HTMLElement	SlDetails
expandIconSlot	HTMLSlotElement	SlDetails
detailsObserver	MutationObserver	SlDetails
open	boolean = false	SlDetails	Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
summary	string	SlDetails	The summary to show in the header. If you need to display HTML, use the `summary` slot instead.
disabled	boolean = false	SlDetails	Disables the details so it can't be toggled.

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleOpenChange			SlDetails
show			SlDetails	Shows the details.
hide			SlDetails	Hides the details

Deler

Navn	Beskrivelse
base	The component's base wrapper.
header	The header that wraps both the summary and the expand/collapse icon.
summary	The container that wraps the summary.
summary-icon	The container that wraps the expand/collapse icons.
content	The details content.