HemStatistikdatabasen
Inställningar
HemStatistikdatabasen

Komponentbibliotek

Detaljheader och destinationslista

EntityHeader · DestinationList · ItemActions · RawPayload

Exempelpost

ID EX-001Kopiera
Fiktiva exempeldata
UI-exempelFristående referensvyer
Rådata

Öppen rådata

{
  "method": "POST",
  "format": "json-stat2"
}

Urval och intervall

SelectMenu · MultiSelectMenu · NumericFilterCard

Värde

20–80
–

Ytor och typografi

Page · PageHeader · Surface · Section · Inset

Överrubrik

Panelyta

Standardyta med kantlinje och skugga.

Dämpad yta

För sekundärt innehåll.

Fältetikett

Inbäddad informationsyta

Hjälptext och kompletterande information.

Knappar och åtgärder

Button · ActionControl · CopyToClipboardButton
EX-001 Kopiera

Chips och etiketter

FilterChip · InfoChip · CountChip · StatusChip
InformationLängre information som kan brytas över flera rader3 valda
AktivInaktivEj startadBehöver granskasUppgift saknas

Sökning och formulär

SearchBar · SelectMenu · ListViewToggle · FilterChipGroup
Exempel:

Navigation och menyer

Tabs · DropdownMenu · SettingsMenu · ListSort · Pagination · TextLink
Textlänk till posterAktiv flik: overview
……………

Listor och detaljer

List · StructuredDetails · DataVisualization

Poster

Numrerad standardlista

1

Exempelpost Alfa

ID EX-001

2

Exempelpost Beta

ID EX-002

Kommun
Örebro
Antal värden
24

Beskrivning

Gemensam yta för längre, strukturerad information.
Status
Aktiv
Datakälla
Fiktiva exempeldata
Kategori
Kategori A
Volym
10–20
Antal värden
10–19

Nyckeltal

KpiGrid · KpiCard
Poster
12 480
Aktiva
Volym
84,2
Senaste år
Värden
36 210
Tillväxt
+4,8 %
Källa: Fiktiva exempeldata

Horisontell fördelning

AKategori A480 | 48.0%
BKategori B320 | 32.0%
CKategori C200 | 20.0%
Källa: Fiktiva exempeldata

Feedback och laddning

Feedback · EmptyState · Skeleton
Neutral information.
Något behöver kontrolleras.
Åtgärden kunde inte slutföras.
Inga resultat
Justera urvalet och försök igen.

Expansion och dialog

CollapsibleSection · Dialog

Samma rörelse används genom applikationen.

Innehållet öppnas och stängs med standardiserad animation.

Ikoner

MaskedIcon · gemensamma meny- och funktionsikoner
Lägg till
Bekräfta
Kopiera
Stäng
Mer
Redigera
Ta bort
Uppdatera
Poster
Karta