Standard visning af lister

Listevisningen skal normalt have noget CSS for at den passer præcist til det indhold, den viser. Dette kan være i forbindelse med visning af grunde, der er til salg eller for at gøre en liste med daginstitutioner tilgængelige.

Ved at bruge vores standard CSS til listevisningen, er det muligt at få en fornuftig CSS, der altid kan bruges. Den kan bruges alene eller ved at tilpasse den efterfølgende.

Hvis man ønsker en handicaptilgængelig listevisning, så se et mere detaljeret eksempel her.

Den template og den CSS, der bliver brugt i dette eksempel, kan ses herunder:

Vis template og CSS

Template

<div class='widget-hoverbox-title'><%= navn %></div>
<div class='widget-hoverbox-sub'>
  <div><%= vejnavn %> <%= vejnummer %></div>
  <div><%= postnummer %> <%= bby %></div>
  <div>Klassetrin: <%= klassetrin %></div>
  <div><%= antalborn %> elever</div>
  <div><a href="<%= hjemmesideadresse %>">Hjemmeside</a></div>
</div>

CSS

.widget-table {
    & {
        margin: var(--sw-spacer-md) 0;
    }

    .widget-table-header {
        margin: var(--sw-spacer-md) 0;
    }

    ul {
        & {
            max-height: 453px;
            overflow-y: auto;
            border: 1px solid var(--sw-border-color);
            border-radius: var(--sw-border-radius);
        }

        li {
            & {
                display: flex;
                flex-direction: column;
                gap: var(--sw-spacer-sm);
                padding: var(--sw-spacer-md);
                border-bottom: 1px solid var(--sw-border-color);
            }

            &:hover,
            &.widget-table-row-active {
                background-color: var(--sw-bg-hover-color);
            }

            &:last-child {
                border: none;
            }

            .widget-hoverbox-title,
            .widget-hoverbox-sub,
            .widget-hoverbox-sub > * {
                padding: 0px;
            }

            .widget-hoverbox-title {
                color: var(--sw-primary);
            }

            .widget-hoverbox-sub {
                display: flex;
                gap: var(--sw-spacer-sm);
                border-radius: 0;
            }
        }
    }
}

CSS'en kan tilføjes til konfigurationen som i eksemplet her via:

"css": ["https://widget.cdn.septima.dk/latest/css/helpers/table-list.css"],

eller vha. @import i din egen CSS på denne måde:

@import 'https://widget.cdn.septima.dk/latest/css/helpers/table-list.css';

Dette eksempel viser, hvordan det kan se ud. Vær opmærksom på, at CSS'en kan blive påvirket af den styling, der allerede findes på den hjemmeside, hvor du indsætter din Widget.

Vis konfigurationen

Konfiguration

HTML

            
<div data-widget-url="https://widget.cdn.septima.dk/3.6.6/config/table29.json"></div>
<script src="https://widget.cdn.septima.dk/3.6.6/widgetconfig.js"></script>
            
          

Relaterede eksempler

Der er desværre ingen eksempler, der bruger de samme komponenter.

Anvendte funktioner

Dette eksempel anvender ikke nogen komponenter.