<lm-media-tile> – Medieflis / Media tile

Om komponenten

Kanonisk navn: <lm-media-tile>
Synonymer: kvitteringselement, media tile, forhåndsvisningsflis, vedleggsflis
Kategori: medieinnhold
ARIA-mønster: Ikke aktuelt - Ren layout-primitiv uten egen interaksjon - forhåndsvisningen og handlingsknappen beholder sin egen, uendrede semantikk.
Parts: flate, media, handling
Native-first-vurdering: HTML har ingen egen "media med tilhørende handling"-layoutprimitiv. Komponenten tilfører kun delt sentrering/mellomrom rundt vanlig, forbrukervalgt markup i to navngitte slots.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er.
Design-tokens: var(--space-2xs, ...)
Sist endret: 19. september 2026
Brukt: 2 steder

Formål

Sentrerer et forhåndsvisningselement (bilde eller dokument) over én tilhørende handlingsknapp, typisk brukt i lister av opplastede vedlegg (kvitteringer, dokumenter) der hvert element både skal kunne forhåndsvises og fjernes.

Egner seg for

Rutenett/lister av opplastede vedlegg der hvert element viser en forhåndsvisning og har nøyaktig én handling (typisk sletting).
Kombinasjon med <lm-preview-image>/<lm-preview-document> som media-innhold.
variant="overlay" for tette rutenett med mange miniatyrer, der handlingen bør flyte over mediet i stedet for å ta egen plass under.

Egner seg ikke for

Generiske innholdskort med tittel, metadata og flere handlinger - bruk <lm-card> for det.
Media som skal vises uten noen tilhørende handling - da holder det med det rå forhåndsvisningselementet alene.

Bruk

<script type="module" src="/designsystem/komponenter/medieinnhold/media-tile/media-tile.js"></script>

<lm-media-tile>
    <lm-preview-image slot="media" src="..." alt="Kvittering" caption="12. mars 2024"></lm-preview-image>
    <button slot="action" type="button">Slett</button>
</lm-media-tile>

<lm-media-tile variant="overlay">
    <lm-preview-image slot="media" src="..." alt="Kvittering"></lm-preview-image>
    <button slot="action" type="button">Slett</button>
</lm-media-tile>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`variant`	`"overlay"`	null	Attributt. "overlay" gjør mediet kvadratisk og legger handlingen som en flytende knapp øverst til høyre i stedet for under mediet - brukes i tettere rutenett av mange miniatyrer. Standard (uten attributtet) stabler media over handling.

Slots

Slot	Beskrivelse
`media`	Forhåndsvisningselementet, typisk `<lm-preview-image>`, `<lm-preview-document>` eller et rått `<img>`.
`action`	Handlingen knyttet til mediet, typisk en `<button>` for å slette elementet.

Parts

Part	Beskrivelse
`flate`	Den ytre containeren som stabler media og handling.
`media`	Wrapper rundt den slottede forhåndsvisningen.
`handling`	Wrapper rundt den slottede handlingen.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-media-tile::part(flate) {
    /* egne stiler for "Den ytre containeren som stabler media og handling." */
}

lm-media-tile::part(media) {
    /* egne stiler for "Wrapper rundt den slottede forhåndsvisningen." */
}

lm-media-tile::part(handling) {
    /* egne stiler for "Wrapper rundt den slottede handlingen." */
}

Tilgjengelighet

Setter ingen egne ARIA-roller eller aria-*-attributter; skjermlesere leser det slottede forhåndsvisnings- og handlingsinnholdet med sin egen, uendrede native semantikk.

Slottet innhold beholder sin egen, native semantikk uendret.
Komponenten legger ikke til noen fokusfelle, live-region eller egen tastaturlogikk.

Detaljer

Erstatter den tidligere prosjektspesifikke CSS-klassen .kvittering-element, som fantes duplisert (med et lite tokenavvik i gap-fallbacken) i både turer/styles.css og okonomi/styles.css.

Referanser

Se også:

../preview-image/index.html - typisk brukt i media-slotten for bildevedlegg.
../preview-document/index.html - typisk brukt i media-slotten for ikke-bilde-vedlegg.

Brukes av:

turer/js/features/receipts/receipts.js - hvert kvitteringsvedlegg i en tur (variant="overlay").
okonomi/js/features/kvitteringer/kvitteringer.js - hver opplastede kvittering (standard-variant).

Avhengigheter: Ingen