(!)Listevisning

OBS! Under konstruksjon

Merk at eksempelet lenket nedenfor, samt malen under, er under konstruksjon. De kan dermed ikke tas i bruk på grunn av følgende feil og mangler:

• Komponenten er ikke testet etter KVIBs rutine for kvalitetskontroll

Vertikal scroll forekommer ikke etter 12 rader. Det er nå høyden på containeren rundt listen som bestemmer når scroll settes inn * Det er ikke testet om horistontal scroll forekommer ved for mange tegn. Det er heller ikke tatt hensyn til hvordan en eventuell overflyt skal håndteres

• Avmerkingsboksens label er ikke fjernet i eksempelet

Hvis man huker av "Slett alle"-boksen, skal alle avmerkingsboksene markeres. Hvis man så avhuker "Slett alle"-boksen, skal alle avmerkingsbokser gå tilbake til tilstanden de var i før boksen ble huket av. Det vil si at en avmerkingsboks som var markert før "Slett alle"-boksen ble huket av, skal forbli markert når "Slett alle"-boksen avhukes. Se Figma-KVIB for demonstrasjon. Denne oppførselen er ikke implementert enda

---

KVIBs listevisning har en standard mal, som vist under. Det vil si at utvikler må endre innholdet og tilpasse størrelsen til eget design. Det stilles likevel felles krav til alle listevisninger:

• Listen skal vise maks 12 rader. Etter 12 rader skal scroll brukes
• Horisontal scroll skal aldri brukes!
• Celler med tall skal ha høyrestilt innhold
• Celler med tekst skal ha venstrestilt innhold
• Celler med ikoner skal alltid ha ikonet på venstre side av teksten
• Blanke celler brukes der det er behov for celler uten innhold
• Celle med avsjekksliste skal ha en "Slett alle"-funksjon
• Sticky header skal benyttes
• Listen skal aldri gå utover designets maks grid bredde

Et eksempel som demonstrerer oppførselen til en listevisning og hvordan denne kan se ut finnes her open_in_new. Ettersom "Slett alle"-funksjonen krever Javascript, kan eksempelet ikke vises på denne siden. Se ellers standard malen under.

	Slett	TEKST INNHOLD	TALL INNHOLD	TEKST INNHOLD
		TEKST TIL VENSTRE	1	TEKST TIL HØYRE
		TEKST TIL VENSTRE	2	TEKST TIL HØYRE
		TEKST TIL VENSTRE	3	TEKST TIL HØYRE
		TEKST TIL VENSTRE	4	TEKST TIL HØYRE
		TEKST TIL VENSTRE	5	TEKST TIL HØYRE
		TEKST TIL VENSTRE	6	TEKST TIL HØYRE
		TEKST TIL VENSTRE	7	TEKST TIL HØYRE
		TEKST TIL VENSTRE	8	TEKST TIL HØYRE
		TEKST TIL VENSTRE	9	TEKST TIL HØYRE
		TEKST TIL VENSTRE	10	TEKST TIL HØYRE
		TEKST TIL VENSTRE	11	TEKST TIL HØYRE
		TEKST TIL VENSTRE	12	TEKST TIL HØYRE

<div class="kv-table__container--large">
<table class="kv-table" id="tableID">
   <tbody>
  <tr class="detail detail--sml" name="table-header">
      <th>
          <div class="checkbox">
              <input type="checkbox" id="select-all" name="checkbox-list"/>
              <label for="select-all"></label>
          </div>
      </th>
      <th class="detail detail--sml">Slett</th>
      <th class="detail detail--sml">TEKST INNHOLD</th>
      <th class="detail detail--sml">TALL INNHOLD</th>
      <th class="detail detail--sml">TEKST INNHOLD</th>
  </tr>
  <tr>
      <td>
          <div class="checkbox">
              <input type="checkbox" id="checkbox_1" name="checkbox-list"/>
              <label for="checkbox_1"></label>
          </div>
      </td>
      <td class="detail detail--sml"></td>
      <td class="detail detail--sml">TEKST TIL VENSTRE</td>
      <td class="detail detail--sml">1</td>
      <td class="detail detail--sml">TEKST TIL HØYRE</td>
  </tr>
</tbody>
</table>