Sindri

Et sæt NuGet-pakker til Blazor med komponenter, CSS og design-tokens. De er smedet til at være tilgængelige, responsive og lette at give et eget udtryk.

Under smedning. Et hobbyprojekt uden deadline.

Hvad bliver det her?

Sindri.dk bliver stedet, hvor Sindri bliver vist og dokumenteret. Hver komponent får en side med en live demo, kode til at kopiere, parametre, tokens og vejledning om tilgængelighed.

Pakkerne er endnu ikke udgivet. Indtil da kan du herunder se, hvilke komponenter der er planlagt.

Komponenter på vej

Her er de 35 komponenter, der er planlagt og udvikles lige nu. Listen vil ændre sig for flere er på vej i essen, og er ikke et udtryk for hvilken rækkefølgen komponenterne frigives i.

Fold en gruppe ud for at se, hvad den indeholder.

Grundlæggende 10
  • Knap Knapper i flere udgaver, fx en tydelig hovedknap, en mere afdæmpet knap og en til farlige handlinger som at slette. De kan have ikon og tekst eller kun et ikon.
  • Kort En boks, der samler et emne med fx billede, titel, tekst og handlinger. Hele kortet kan også fungere som ét link.
  • Ikoner Tusindvis af ikoner, som følger tekstens størrelse og farve. Kun de ikoner, siden bruger, bliver hentet.
  • Beskedboks En tydelig boks til fejl, advarsler, succes og information. Den bruger både farve, ikon og tekst, så beskeden aldrig kun afhænger af farven.
  • Mærke Et lille mærke til fx en status eller et antal. Det kan stå ved en overskrift, i et kort eller i en liste.
  • Foldbart afsnit Et afsnit, man kan folde ud og ind, så lange sider bliver overskuelige. Det virker også uden JavaScript.
  • Valg af lyst eller mørkt tema Brugeren vælger lyst, mørkt eller det samme som enheden. Valget huskes, og siden vises rigtigt fra første øjeblik.
  • Karrusel Billeder, man kan bladre eller stryge igennem, med små miniaturer eller prikker. Den kører kun af sig selv, hvis siden ønsker det, og kan altid sættes på pause.
  • Chat En samtale med beskeder, afsender, tidspunkt og status som "læst". Nye beskeder bliver læst op af skærmlæsere, og ældre beskeder kan hentes uden at siden springer.
  • Gitter til oversigter Et gitter til fx et dashboard, hvor hvert felt kan fylde en eller flere kolonner og rækker. På en telefon stiller felterne sig pænt under hinanden.
Formularer 15
  • Felt med etiket, hjælp og fejl Den fælles ramme om alle felter: en tydelig etiket, en hjælpetekst og en fejlbesked, der forklarer, hvad der skal rettes. Det fungerer ens i alle felter.
  • Tekstfelt Til tekst, mailadresser, links, søgning og adgangskoder.
  • Tekstområde med tæller Til længere tekster, med en tæller, der viser, hvor mange tegn der er brugt og tilbage.
  • Rullemenu Et valg mellem faste muligheder, også i grupper. Den bruger browserens egen menu, så den er nem på en telefon.
  • Afkrydsningsfelt og chips Et klassisk afkrydsningsfelt, der også kan se ud som små chips, man slår til og fra, fx til filtre.
  • Gruppe af afkrydsningsfelter Flere valg samlet under én overskrift, fx en liste af kategorier, hvor man kan vælge flere.
  • Talfelt Til tal, fx et årstal eller et antal, med grænser for, hvad der er tilladt.
  • Kodefelt Til engangskoder, man får tilsendt på mail eller sms. Koden kan indsættes i ét hug.
  • Filfelt Til at vælge filer, også flere ad gangen, eller trække dem ind på siden. Filtyper og størrelse kontrolleres med det samme.
  • Datofelt Til en dato eller en dato med klokkeslæt, med telefonens og browserens egen kalender.
  • Periode To datofelter til en periode fra og til, som sørger for, at slutdatoen ikke ligger før startdatoen.
  • Flervalg med søgning Vælg flere ting fra en lang liste ved at skrive og søge. De valgte vises som chips, og der kan oprettes nye undervejs.
  • Afkrydsningstabel En tabel med afkrydsningsfelter, fx roller mod rettigheder, som kan betjenes helt med tastaturet.
  • Fejloversigt En boks øverst i formularen, der samler alle fejl med links direkte til de felter, der skal rettes.
  • Teksteditor En editor til formateret tekst med overskrifter, lister, links, billeder og tabeller. Den kan også hente indhold fra Word- og Markdown-filer.
Navigation 4
  • Sidevælger Til at bladre gennem lange lister side for side og vælge, hvor mange der vises ad gangen.
  • Faneblade Indhold delt op i faner, så man kun ser én del ad gangen. En fane med en fejl bliver markeret.
  • Menuknap En knap, der åbner en lille menu med handlinger, fx ved hver række i en tabel.
  • Delt knap En knap med en hovedhandling og en lille menu ved siden af med flere valg.
Vinduer og beskeder 3
  • Dialog Et vindue oven på siden, fx til at bekræfte en sletning eller udfylde en kort formular.
  • Kortvarig besked En lille besked, der dukker op i et hjørne, fx "Gemt". Fejl bliver stående, til man lukker dem.
  • Hjælpetekst ved hover En lille tekst, der viser sig, når man holder musen over eller går til et element med tastaturet.
Data og billeder 3
  • Tabel med sortering og filtre En tabel til lister med sortering, sider og filtre pr. kolonne. Det, man har valgt, gemmes i adressen, så man kan dele et link eller gå tilbage.
  • Cirkel- og donutdiagram Enkle diagrammer til fordelinger, med en forklaring og tallene også som tabel, så alle kan læse dem.
  • Billedbeskæring Beskær et billede som et frit udsnit, et kvadrat eller en cirkel, og drej, spejl og juster lys og kontrast.

I den nordiske mytologi er Sindri dværgsmeden, der smedede gudernes redskaber. Han kaldes Eitri i nogle kilder. Loke væddede sit hoved på, at Sindri og hans bror Brokk ikke kunne smede noget, der var lige så fint som de gaver, guderne allerede havde fået. Brokk trådte blæsebælgen, og Sindri smedede tre skatte:

Loke forvandlede sig til en flue og stak Brokk, så blæsebælgen stoppede et øjeblik. Derfor blev Mjølners skaft lidt for kort. Guderne kårede den alligevel som den bedste af alle gaverne.

Gode redskaber skal ikke være perfekte. De skal kunne bruges.