Tilgængelig listevisning

Det er en god idé at have noget CSS, der passer præcist til det indhold, der 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.

Indholdet af en listevisning defineres af en template. Denne template skal tilpasses til det aktuelle indhold og dets formål. Templaten er dermed også med til at gøre data handicaptilgængelig. Det er vigtigt at templaten indeholder de "rigtige" HTML elementer.

Dette eksempel indeholder et forslag til hvordan en listevisning gøres flot og tilgængelig. Eksemplet kan bruges direkte i dit eget setup, eller tilpasses til egne behov og data.

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;
            }
        }
    }
}

Hvis du vælger at benytte samme struktur i templaten som i dette eksempel, kan CSS'en tilføjes direkte til konfigurationen som i eksemplet her via:

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

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

@import 'https://widget.cdn.septima.dk/latest/css/helpers/table-list-accessible.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/table30.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.