Gå til innholdet
Fristil Designsystem

Komponenter

Komponentene er delt i tre, og skillet går på hvem som eier DOM-en mens siden lever. Det avgjør hva du skriver selv og hva systemet gjør for deg. Begrunnelsen står i Markup og oppførsel.

Hver side viser komponenten i ren HTML, React, Astro og Datastar, med kode du kan lime rett inn.

CSS-komponenter

En klasse og noen dataattributter på et vanlig HTML-element. Ingen JavaScript lastes.

  • AccordionPanel som kan foldes ut, bygget på details og summary. CSS-komponent med to klasser og ingen JavaScript.
  • AlertMelding som gjelder hele siden eller hele skjemaet. CSS-komponent med to klasser og ingen JavaScript.
  • AvatarProfilbilde eller initialer. CSS-komponent med to klasser og ingen JavaScript.
  • BadgeKompakt statusmerke. CSS-komponent med én klasse og ingen JavaScript.
  • BreadcrumbsBrødsmulesti som viser hvor på siden brukeren er. CSS-komponent med én klasse og ingen JavaScript.
  • ButtonKnapp for handlinger. CSS-komponent med én klasse og ingen JavaScript.
  • CardBoks som samler innhold som hører sammen. CSS-komponent med to klasser og ingen JavaScript.
  • CheckboxAvkryssingsboks for valg som står for seg selv. CSS-komponent med to klasser og ingen JavaScript.
  • DividerSkillelinje mellom deler av innholdet. CSS-komponent med én klasse og ingen JavaScript.
  • Error TextFeilmelding under et skjemafelt. CSS-komponent med én klasse og ingen JavaScript.
  • FieldsetGruppe av kontroller med en felles ledetekst. CSS-komponent med to klasser og ingen JavaScript.
  • File UploadFelt for opplasting av filer. CSS-komponent med to klasser og ingen JavaScript.
  • HeadingOverskrifter i seks størrelser, uavhengig av nivå. CSS-komponent med én klasse og ingen JavaScript.
  • Help TextForklarende tekst under et skjemafelt. CSS-komponent med én klasse og ingen JavaScript.
  • InputTekstfelt for skjema, med tilstander for gyldig og ugyldig. CSS-komponent.
  • LabelLedetekst for skjemafelt, med markering av påkrevd og valgfritt. CSS-komponent.
  • LinkLenkestil for navigasjon i løpende tekst. CSS-komponent med én klasse og ingen JavaScript.
  • ListPunktliste, nummerert liste og lister uten punkter. CSS-komponent med én klasse og ingen JavaScript.
  • PaginationSidenavigering for lange lister. CSS-komponent med to klasser og ingen JavaScript.
  • ParagraphBrødtekst og ingress med begrenset linjelengde. CSS-komponent med én klasse og ingen JavaScript.
  • ProgressFramdriftsstolpe for noe som har en ende. CSS-komponent med én klasse og ingen JavaScript.
  • RadioRadioknapper for ett valg blant flere. CSS-komponent med to klasser og ingen JavaScript.
  • SearchSøkefelt med forstørrelsesglass. CSS-komponent med to klasser og ingen JavaScript.
  • SelectNedtrekksliste. CSS-komponent med én klasse og ingen JavaScript.
  • SkeletonPlassholder som viser formen på innhold som lastes. CSS-komponent med én klasse og ingen JavaScript.
  • Skip LinkLenke som hopper forbi menyen til hovedinnholdet. CSS-komponent med én klasse og ingen JavaScript.
  • SpinnerVenteindikator for noe som pågår. CSS-komponent med én klasse og ingen JavaScript.
  • Sr OnlyTekst som bare skjermlesere får. CSS-komponent med én klasse og ingen JavaScript.
  • SwitchBryter for en innstilling som slår inn med en gang. CSS-komponent med to klasser og ingen JavaScript.
  • TableTabell for data i rader og kolonner. CSS-komponent med to klasser og ingen JavaScript.
  • TagMerkelapp for emneord og filtre. CSS-komponent med én klasse og ingen JavaScript.
  • TextareaFlerlinjet tekstfelt. CSS-komponent med én klasse og ingen JavaScript.
  • Toggle GroupGruppe der ett alternativ er valgt om gangen. CSS-komponent med to klasser og ingen JavaScript.
  • TooltipLiten hjelpetekst som vises på hover og fokus. CSS-komponent med to klasser og ingen JavaScript.

Rammekomponenter

Du skriver markupen, og web-komponenten fester tastatur, fokus og koblingen oppå. Elementene blir liggende i vanlig DOM.

  • DialogModal dialog bygget på det native dialog-elementet. Seks klasser og ingen JavaScript, med en valgfri komponent for servere som ikke kan kalle showModal().
  • Error SummarySamler feilene i et skjema og sender brukeren til feltet som feilet. Rammekomponent.
  • FieldRammekomponent som kobler ledetekst, felt, hjelpetekst og feilmelding sammen for deg.
  • PopoverPanel som henger under en knapp og lukker seg selv. Rammekomponent.
  • SuggestionFelt med forslagsliste som snevrer seg inn mens brukeren skriver. Rammekomponent.
  • TabsFanerad koblet til panelene sine. Rammekomponent.

Frittstående komponenter

Komponenten lager innholdet sitt selv, fordi det ikke finnes noe for serveren å sende. Du kaller en metode.

  • Connection StatusSier fra når forbindelsen til serveren er borte. Frittstående komponent.
  • Session TimeoutVarsler før en innlogget økt går ut, og teller ned. Frittstående komponent.
  • ToastKø av korte meldinger i hjørnet av skjermen. Frittstående komponent.