Navigācija un izkārtojums
L-04–L-09 breadcrumbs, page header, content container, tabs un pagination komponentes ar tastatūras atbalstu.
L-04 — Breadcrumbs
Divi līdz četri līmeņi, saīsināšana un aria-current pēdējam līmenim. Breadcrumb nav orientieris ar savu nosaukumu.
Rādīt koda paraugu
<nav aria-label="Breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="index.html">Sākums</a></li><li class="breadcrumb-item active" aria-current="page">Lietotāji</li></ol></nav>
L-05 — Page header
Virsraksts, apraksts un darbības paliek vienā semantiskā blokā; šaurā ekrānā darbības pārplūst jaunā rindā.
Lietotāju pārvaldība
Pārvaldiet kontus, lomas un piekļuves vienā vietā.
Kompakts skats
Darbības novietojas zem virsraksta bez horizontālas pārplūdes.
Rādīt koda paraugu
<div class="page-header"><div class="page-header__copy"><h1>Lietotāji</h1><p class="page-header__description">Pārvaldiet kontus un lomas.</p></div><div class="page-header__actions"><button class="btn btn-primary" type="button">Pievienot</button></div></div>
L-06 — Content container
Saturs paliek semantiskajā main elementā; šaurs konteiners lieto 720 px, plašs — līdz 1100 px.
Šaurs saturs
Piemērots iestatījumu formām un lasīšanas skatiem. Rindas garums paliek pārvaldāms.
Plašs saturs
Piemērots tabulām un analītikai, saglabājot maksimālo satura platumu.
Rādīt koda paraugu
<main><div class="app-content"><div class="content-container content-container--narrow">…</div></div></main>
L-08 — Tabs
Līnijas, pills un vertikāli tabi. Bultiņas pārvietojas starp tabiem, Home/End pāriet uz pirmo vai pēdējo.
Pārskata panelis ar kopsavilkuma datiem.
Aktivitātes panelis ar audita notikumiem.
Tiesību panelis ar lomām un atļaujām.
Nedēļas datu skats.
Mēneša datu skats.
Gada datu skats.
Profila iestatījumi ar redzamām etiķetēm.
Drošības iestatījumi un paroles politika.
Aktīvās sesijas un ierīces.
Rādīt koda paraugu
<div class="nav nav-tabs tabs" role="tablist"><button class="nav-link active" role="tab" aria-selected="true" aria-controls="panel-1">Pārskats</button><button class="nav-link" role="tab" aria-selected="false" aria-controls="panel-2" tabindex="-1">Aktivitāte</button></div>
L-09 — Pagination
Pilns un kompakts lapu skaits, iepriekš/nākamā, aktīvā lapa un disabled stāvokļi. Katrai saitei ir skaidrs nosaukums.
Rādīt koda paraugu
<nav aria-label="Lapu navigācija"><ul class="pagination"><li class="page-item active" aria-current="page"><span class="page-link">1</span></li></ul></nav>