Lists

Alle componenten

Voor een lijst in UNO stijl is het nodig een extra class toe te voegen aan de `ul` of `ol`.

Kolommen

Om een lijst over 2 kolommen te verdelen moet aan de <ul> / <ol> de class .columns toegevoegd worden. Kolommen worden niet ondersteund op Internet Explorer 10 of lager. Daar wordt de lijst altijd zonder kolommen getoond. Voor alle (afwijkende) lijsten is het noodzakelijk dat de base class .list wordt toegevoegd aan de ul / ol.

De volgende lijsten mogen verdeeld worden over columns:

  • ‘Standaard’ lijsten
  • .list--links
  • .list--chrevrons
  • .list--decimal

Fiscina de brevis gallus, captis bromium!

Voorbeelden

Genummerde lijst

Er zijn verschillende soorten nummering beschikbaar. Gebruik de modifiers .list--decimal en .list--decimal-circled.

decimal

  1. Fiscina de brevis gallus, captis bromium!
  2. Fiscina de brevis gallus, captis bromium!
  3. Solitudo potuss, tanquam azureus adiurator.
  4. Solitudo potuss, tanquam azureus adiurator.
  5. Solitudo potuss, tanquam azureus adiurator.
  6. Toruss persuadere, tanquam peritus danista.
  7. Toruss persuadere, tanquam peritus danista.
  8. Solitudo potuss, tanquam azureus adiurator.
  9. Toruss persuadere, tanquam peritus danista.
  10. Toruss persuadere, tanquam peritus danista.

decimal met achtergrond

  1. Fiscina de brevis gallus, captis bromium! Fiscina de brevis gallus, captis bromium! Fiscina de brevis gallus, captis bromium!
  2. Solitudo potuss, tanquam azureus adiurator.
  3. Toruss persuadere, tanquam peritus danista.

Geneste lijsten

  • Fiscina de brevis gallus, captis bromium!
  • Solitudo potuss, tanquam azureus adiurator.
    • Fiscina de brevis gallus, captis bromium!
    • Solitudo potuss, tanquam azureus adiurator.
    • Toruss persuadere, tanquam peritus danista.
  • Toruss persuadere, tanquam peritus danista.

Ongenummerde lijsten

Voor ongenummerde lijsten kan de standaard lijst gebruikt worden (zonder extra classes). Deze kan ook voor lijsten met links worden gebruikt.

Dash lijsten

Link lijsten

Voor lijsten met links in navigatie objecten. Zoals bijvoorbeeld de footer, wordt de .list--links modifier toegevoegd.

Voeg een extra .list--chevrons class toe om chevrons voor de links te plaatsen

De kleur van de bullet wordt overgenomen van de tekstkleur.

  • Fiscina de brevis gallus, captis bromium!
  • Solitudo potuss, tanquam azureus adiurator.
  • Toruss persuadere, tanquam peritus danista.

Filterlijsten

Een lijst met filterbegrippen. Gebruik voor de 100% breedte .list--filter

De filter lijst moet ook met toetsenbord bereikbaar zijn, geef de li elementen daarom een tabindex="0" zodat het element focus kan krijgen.

  • Voorbereiden
  • Bekostiging bijzonder
  • Studiefinanciering
  • Basisbeurs
  • Lesgeld

wanneer de filterbegrippen naast elkaar moeten worden getoond, voeg dan .list--filter-inline toe:

  • Voorbereiden
  • Bekostiging bijzonder
  • Studiefinanciering
  • Basisbeurs
  • Lesgeld

Sluitknop

Uno biedt ook de mogelijkheid om filters te verwijderen. Om de filterlist op te bouwen instantieer je de FilterList module op een ul element, waarbij je een collectie met filter elementen meegeeft.

LET OP: Het gebruikt van .list--filter-closable is deprecated en zal vanaf de volgende major version update niet langer ondersteunt worden. 

<script>
            var elements = [
                {
                    "value": "Voorbereiden",
                    "id": "filter-voorbereiden"
                },
                {
                    "value": "Bekostiging bijzonder",
                    "id": "filter-bekostiging-bijzonder"
                },
                {
                    "value": "Studiefinanciering",
                    "id": "filter-studiefinanciering"
                },
                {
                    "value": "Basisbeurs",
                    "id": "filter-Basisbeurs"
                },
                {
                    "value": "Lesgeld",
                    "id": "filter-lesgeld"
                },
            ];

            System.import('/uno/components/list/filterlist.js').then(function (module) {

                var filterList = new module.FilterList(document.getElementById('closable-filter-list'), elements);
            });
        </script>

Javascript API

Publieke methodes

Methode Omschrijving
delete(element) Verwijdert het betreffende filter element
deleteAll() Verwijdert alle filter elementen
destroy() Verwijdert de filterList, verwijdert alle event-listeners.
Roep deze methode aan wanneer je de filterList wilt verwijderen!

Publieke events

Event Omschrijving
filterlist-deleted-item Cancelable Wanneer een filter element verwijderd wordt. Bevat in het data eigenschap het id van het verwijderde filter element
filterlist-deleted Cancelable Wanneer alle filter elementen verwijdert worden.

Onderwerpen lijst

Lijst van onderwerpen

Alle onderwerpen

  • Portaalbeheer

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus cursus.

  • Onderwerp

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus cursus.

  • Onderwerp

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus cursus.

  • Onderwerp

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus cursus.

Zoekresultaten

  • Inburgeren in Nederland – index

    Home · Inburgeren: hoe moet dat. Asielmigranten; School en leren; Inburgeringsplicht; Inburgeringsexamen; Staatsexamen NT2; Geen examen doen; Meer tijd nodig; Niet op tijd klaar; Zelf verantwoordelijk. Examen doen. Participatieverklaring; Schrijven; Spreken; Luisteren; Lezen; Kennis Nederlandse Maatschappij ...

  • Inburgeren in Nederland – examen doen

    Op het inburgeringsexamen bekijkt DUO of u genoeg weet over Nederland. En of uw Nederlands goed genoeg is. Als u slaagt, krijgt u het inburgeringsdiploma. U kunt de examens het beste oefenen in Google Chrome of in Firefox. Het examen Spreken (Spreekvaardigheid) kunt u alleen oefenen in Firefox.

Benodigde stylesheets

  • /uno/components/list/list-filter.css
  • /uno/components/list/list-subject.css
  • /uno/components/list/list-search.css
  • /uno/components/lists/lists.css