nve-dialog
En dialogboks.
Vil du ha ikon foran overskriften, bruk `icon`.
Skal det ikke være mulig å trykke utenfor for å lukke dialogen, bruk `disableBackground`.
Arvet fra SlDialog.
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-dialog.
html
<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
<nve-dialog label="Overskrift"> Innhold </nve-dialog>
Eksempler
Ikon foran label
html
<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
<nve-dialog label="Overskrift" icon="info"> Innhold </nve-dialog>
Label som eget spor
Du kan legge overskriften inn et eget spor dersom du trenger mer kompleks styling eller struktur. Men merk at den fortsatt legges inn i en <h2>-tag
html
<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
<nve-dialog>
<div slot="label">Denne overskriften er i et eget spor</div>
Innhold
</nve-dialog>
Knapper ved siden av lukk, og slot for footer
Det er egne spor for å legge innhold ved siden av lukk-knapp og i bunnen av dialogboksen Sporet ved lukk-knapp skal kun brukes til enkle knapper, alt annet enn nve-button
med enkelt nve-icon
i seg vil ikke styles korrekt
html
<nve-button onclick="this.nextElementSibling.show()" class="open-dialog">Vis dialogen</nve-button>
<nve-dialog label="Overskrift">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan urna sit amet velit tempor accumsan. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vel ipsum dolor. Nullam a molestie risus, eget
facilisis nisi. Phasellus eget faucibus mauris, in tincidunt mi. Curabitur urna tortor, semper vel facilisis vel,
aliquam a risus. Praesent eu sapien ornare, ultrices neque id, tincidunt metus.
<nve-button variant="ghost" onclick="() => {}" slot="header-actions">
<nve-icon name="warning" />
</nve-button>
<nve-button variant="ghost" onclick="() => {}" slot="header-actions">
<nve-icon name="open_in_new" />
</nve-button>
<div slot="footer">
<nve-button variant="primary" onclick="this.parentElement.parentElement.hide()">Ok</nve-button>
<nve-button disabled>Slett alt</nve-button>
</div>
</nve-dialog>
Spor
Navn | Beskrivelse |
---|---|
label | teksten som skal vises i overskriften. Eller du kan bruke label-attributtet |
body | hovedinnholdet |
footer | feltet i bunnen hvor knappene er plassert |
Egenskaper
Navn | Type | Arvet fra | Beskrivelse | Reflected |
---|---|---|---|---|
icon | string = '' | Ikonet som skal vises | ||
disableBackground | boolean = false | Hvis denne er satt, kan man ikke trykke utenfor dialogen for å lukke den. |
Metoder
Navn | Parametre | Returtype | Arvet fra | Beskrivelse |
---|---|---|---|---|
handleRequestClose | event: CustomEvent | Stjålet fra shoelace eksempel. Hindrer at man lukker dialogen ved å trykke utenfor | ||
updateIcon | Oppdaterer ikonet som vises i dialogens tittel. Metoden søker først etter tittel-elementet i komponentens skygge-DOM. Hvis tittel-elementet finnes og `icon`-egenskapen er satt, oppdateres tittel-elementets stil for å inkludere det angitte ikonet. Hvis `icon`-egenskapen ikke er satt, settes ikoninnholdet til null for å unngå å skape unødvendig mellomrom i layouten. |