Grid

Användningsområde

Grid(lista) är en central del i alla projekt och används bland annat för att lista användare, enheter, felposter mm.

Acceptanskriterier

Defaulthöjd på stängda listrader är 36 px i höjd innan brytgräns
Defaulthöjd på stängda listrader är 40 px i höjd efter brytgräns
Text på listrader är brödtext och följer brytgräns
Det går att höger, vänster och centrera text i förhållande till rubriken.
Kolumners bredd anges som proportioner i heltal, där siffran motsvarar kolumnens storlek i proportion till summan av alla kolumners storlek.
Listraderna är 1100 px i bredd innan brytgräns
Listraderna är 1170 px i bredd efter brytgräns
En listrad öppnas genom klick på hela raden
Listan kan innehålla andra actions som inte öppnar rad utan triggar annat, exempelvis checkbox
En lista kan finnas utan tillhörande rubriker
När en lista har rubriker är det möjligt att sortera listan i fallande och stigande ordning utifrån rubrikerna
Sortering sker vid klick på rubrik i lista
Det är möjligt att inte ha sortering
Det är möjligt att ha flera listor på samma sida
Vid flera listor på samma sida ska listan scrollas under rubrikerna och byta rubrik när nya rubriken når toppen se: https://gedd.ski/post/position-sticky/ och https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sticky_header Notering, istället för att “rulla” över headern så hade det varit snyggt om den “trycker ut” istället..
Det är konfigurerbart om listan ska visa antal poster i listan
Listrader behöver inte kunna öppnas - hover, pressed visas då inte utan bara fokusmarkering
Paginering finns möjlig
Hover av lista ger listraden en skugga
Ta bort box-shadow för pressed state
Release öppnar listrad och den får en skugga
Fokus av lista är blå ram på 3 px

Tillgänglighetskrav

Tabstopp finns på grid- header som förklarar vad listan innehåller
Tabstopp finns också på respektive rubrik om sortering är möjlig
Enter vänder på sortering på den rubrik man är på
Enter/space öppnar och stänger listrader
Pil upp och ner för att gå mellan listrader
Home går till första raden
End går till sista raden
Animation vid öppning av kort - konfigurerbart att välja mellan fördefinierade hastigheter
Det finns en inbyggd loader i listan
Det är möjligt att ha notifieringar på listrader eller på hela listan