Listevisning med foruddefineret template

Benyt også de foruddefinerede templates til listevisningen. Herved gøres konfigurationen nemmere og mere overskuelig samt at man ikke behøver kendskab til HTML og CSS.

I dette eksemple skal en fælles CSS dog tilføjes til konfigurationen som beskrevet herunder.

Vis 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/table31.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.