Alle komponenter
Utforsk alle de 308 Lyra UI-komponentene. Filtrer etter familie, søk etter navn, prøv levende forhåndsvisninger eller åpne et dokumentert eksempel.
Samtale og chat
- Agentarbeidsområde — Responsiv, styrt KI-samtale med samtaleloggen, skrivefelt og valgfritt panel for kjøring, verktøy, gjenfinning og kontekst.
- Lydvisualisering — Tegner taleaktivitet på lerretet for agentens ledig-, lytter-, tenker- og snakkerstatus.
- Variantvelger — Styrt n/m-navigasjon mellom regenererte eller redigerte varianter av én chatmelding.
- Chatfelt — Skrivefelt for chatmeldinger som justerer høyden automatisk og har send- og stoppknapper.
- Chatmelding — Rollebasert meldingsboble med avatar, merker og statusbevisst bunntekst.
- Chatvisning — Rulleområde for samtaler som følger bunnen, viser hopp-til-siste-knapp og skiller uleste meldinger.
- Kontrollpunkt — Gjenopprettingspunkt i en samtale med bekreftelse før chatten rulles tilbake.
- Kodeblokk — Viser kodeblokker med valgfri utsatt syntaksfarging og kopieringsknapp.
- Lett kodeblokk — Slank kodevisning som bare farger syntaks fra et grammatikkart gitt ved bygging.
- Samtaleoppføring — Valgbar rad i chathistorien med øktens tittel, forhåndsvisning og tidspunkt.
- Genereringsmålinger — Viser tidsbruk, tokener og gjennomstrømning mens et KI-svar strømmer inn.
- Overleveringsskille — Merket skillelinje i samtalen som viser når kontrollen går mellom agenter.
- Markdown — Trygg gjengivelse fra Markdown til HTML med GFM-tabeller, kode og lenker.
- Lett Markdown — Slank Markdown-visning som bare farger kodeblokker fra grammatikk gitt ved bygging.
- Meldingshandlinger — Verktøylinje per chatmelding med kopiering, ny generering, redigering og tilbakemelding.
- Meldingstilbakemelding — Tommel opp eller ned for ett assistentsvar, med valgfritt panel for årsak og kommentar.
- Modellvelger — Velg leverandør og modell fra fast katalog eller skriv inn en egen modell.
- Modellinnstillinger — Kombinerer modellvelger og temperaturskyveknapp for agentoppsett.
- Hold inne for å snakke — Mikrofonknapp som håndterer tillatelser, opptak og opprydding ved hold-inne eller veksling.
- Strømmestatus — Viser fasen til én strømmeforbindelse og oppdager stans med hjerteslag.
- Strømmende tekst — Viser assistenttekst fortløpende og slår sammen raske tokenoppdateringer.
- Lett strømmende tekst — Slank tekststrømvisning som bare farger Markdown-kode fra grammatikk gitt ved bygging.
- Forslagstagger — Rullbar rad med start- og oppfølgingsforslag som sender valgt tekst til verten.
- Samtaleliste — Gruppert, søkbar samtalesidebar med festing, arkivering, sletting og navneendring.
- Transkripsjonsstrøm — Levende teksting av stemmeøkt som oppgraderer midlertidig til endelig tekst og følger bunnen.
- Skriveindikator — Visuell indikator for at assistenten skriver et svar.
- Forbruksmerke — Kompakt visning av tokener, kostnad og forsinkelse for én melding eller kjøring, med detaljer ved peker.
- Stemmevelger — Velger TTS-stemme fra en katalog med lydforhåndsvisning og håndtering av utgåtte valg.
- Miniprogramvisning — Viser en deklarativ JSON-struktur strømmet fra agenten gjennom en godkjent komponentliste.
- Meldingsdeler — Viser ordnede KI-meldingsdeler for tekst, resonnement, verktøy, kilder, vedlegg og medier.
- Promptfelt — Samler promptskriving med vedlegg, modell, stemme, kilder, omtaler, kommandoer og kølagte turer.
- Promptkø — Styrt kø med oppfølgingsprompter som kan redigeres, flyttes, fjernes eller sendes straks.
- Sanntidsøkt — Leverandøruavhengig taleøkt med tilkobling, aktivitet, transkripsjon, opptak, demping og avbrudd.
- Utvalgsverktøylinje — Plasserer spørsmål, sitat, kildehenvisning og kopiering ved valgt tekst med dokumentankeret bevart.
Agentverktøy og observasjon
- Aktivitetsstrøm — Fortløpende logg over agentens handlinger som kan foldes til en oppsummering når kjøringen er ferdig.
- Agentvurderingspanel — Styrt evalueringsoversikt med målekort, trenddiagram og statushistorikk per kjøring.
- Agentspørsmål — Samler et strukturert svar på spørsmål fra en agent eller MCP-server, med godta-, avvis- og avbrytvalg.
- Bakgrunnskjøringer — Viser vertsadministrerte agentjobber i kø, under kjøring og ferdige, med åpne- og avbrytforespørsler.
- Budsjettmåler — Viser oppgitt forbruk mot en grense, også når data mangler eller grensen er overskredet.
- Endringsgjennomgang — Gjennomgår filendringer fra verten og ber om behold- eller forkastvalg per diffdel.
- Koblingsadministrasjon — Viser tilkoblingsstatus og ber verten om å koble til, koble fra eller prøve igjen.
- Tilgangsgodkjenning — Viser en avgrenset tilgangsforespørsel og sender brukerens tillat eller avvis-valg til verten.
- Tilgangsregler — Viser regler fra verten og ber om endringer i tillat-, spør- eller avvisvalgene.
- Agentkjøring — Hovedvisning for en agentkjøring med status, tidsbruk, steg og kostnad samt avbryt- og prøv-igjen-handlinger.
- Agentspor — Hierarkisk agent- og LLM-spor med filter for spennetyper og hurtighopp ved overlevering.
- Godkjenningskø — Tastaturtilgjengelig kø for verktøykall som gjennomgås og godkjennes eller avvises i én felles dialog.
- Resultatpanel — Panel for et agentlaget resultat med forhåndsvisning, kode, versjoner og kopier- eller last ned-handlinger.
- Nettleserramme — Viser skjermbildestrøm, skrivebeskyttet URL og overtakelseskontroller fra agentens datamaskin.
- Commitkort — Kompakt commitoversikt med diffstatistikk og filendringer som lenker til diffvisning.
- Sammenligningspanel — Sammenligner A/B-utdata side om side med avstemning om vinneren i modellvurderinger.
- Bekreftelseslinje — Godkjenn eller avvis ett foreslått agentsteg direkte i samtalen, uten en modal dialog.
- Kontekstinspektør — Viser modellkontekst med tokenanslag, kilder, skjulemarkører og kopier- og eksportkontroller.
- Evalueringsdatasett — Filtrerbar eksempelliste med tagger og handlinger for å legge til, fjerne, importere og eksportere.
- Evalueringsresultat — Visning for rubrikkskår og menneskelig gjennomgang av kjøringer for ett evalueringseksempel.
- Evalueringskjøring — Levende fremdrift for en evalueringsserie, med detaljer om kilder og verktøyspor per eksempel.
- Retningslinjeoversikt — Skrivebeskyttet liste over sikkerhets-, tilgangs-, personvern- og verktøybeslutninger med forklaringer.
- Spennfossefall — Horisontal tidslinje med fargede spenn fra agentspor på en felles tidsakse.
- Stakkspor — Gjør JS/TS-, nettleser- og Python-stakkspor til klikkbare rammer og folder interne rammer.
- Oppgaveliste — Levende, sammenleggbar planvisning med status for hvert trinn og undertrinn.
- Terminal — Skrivebeskyttet ANSI-konsoll for strømmet agent- eller verktøyutdata, med søk og følg-bunnen.
- Testresultater — Sammendrag av beståtte og mislykkede tester med statusantall, filtre og automatisk åpning av feil.
- Tenkepanel — Sammenleggbart panel for agentens løpende eller gjennomgåtte resonnement.
- Verktøygodkjenning — Menneskelig kontrollpunkt for å godkjenne, avvise eller redigere et verktøykall før kjøring.
- Verktøykallblokk — Sammenleggbar blokk for ett verktøykall, med argumenter, feil og resultat når den åpnes.
- Verktøykallmerke — Kompakt merke med navn, status og varighet for ett verktøykall.
- Verktøyparameterskjema — Lager redigerbart skjema fra et flatt JSON Schema for å justere kallargumenter.
- Verktøyresultatdialog — Modal dialog som viser status, varighet og hele resultatet av et verktøykall.
- Verktøyresultatvisning — Viser resultatet gjennom registrert gjengiver og bruker JSON når ingen passer.
- Verktøyvalgdialog — Søkbar dialog gruppert etter kategori for valg av aktive agentverktøy.
- Verktøytidslinje — Kronologiske verktøykall med antall nye forsøk, menneskelig godkjenning og skjuling av følsomme felt.
- Spornetre — Sammenleggbart spennhierarki for agent/LLM med varighetsstolpe og valgfrie token- og kostnadskolonner.
- Resultatkort — Kort med ramme som gir egne verktøyresultatvisere et enhetlig utseende.
- Resultatfelt — Kompakt etikett/verdi-rad for verktøyresultater og tett metadata.
- MCP-app — Kjører en MCP-appressurs i isolert miljø og sender vertforespørsler som typede hendelser.
- Promptstudio — Leverandøruavhengig arbeidsflate for å redigere, forhåndsvise, versjonere, lagre og kjøre strukturerte prompter.
- Skjemaviser — Undersøker valgbare JSON Schema-trær med begrensninger, påkrevde felt, sammensetning og valideringsfeil.
- Underagentpanel — Viser styrt hierarki av underagentkjøringer med status, oppgave, modell, fremdrift og handlinger.
Gjenfinning og kunnskapsgrafer
- Fellesskapskort — Oppsummering av et fellesskap i en kunnskapsgraf, med medlemsmerker og fordypningshandling.
- Embeddingutforsker — Tilgjengelig 2D-punktdiagram over vertsprojiserte embeddingkoordinater, med gruppefarger og punktvalg.
- Entitetskort — Kort for en grafentitet med typemerke, egenskaper, grad og handling for å finne den i grafen.
- Entitetsmerke — Innebygd @entitet-omtale i agenttekst med forhåndsvisning ved peker eller fokus.
- Entitetsprofil — Detaljvisning av entitet med toppfelt, tillitsmål og faner for relasjoner, kildeutdrag og opphav.
- Graf — Viser relasjoner i et flyttbart, zoombart kraftstyrt nodediagram.
- Graftegnforklaring — Viser nodetyper for en graf og fungerer også som synlighetsfilter.
- Inntakskø — Styrt dokumentliste gjennom en inntaksprosess, med trinn, fremdrift, antall og forespørsler om ny prøve eller avbrudd.
- Kunnskapsbase — Kildeliste for en søkebase, med synkronisering, indekshelse, tillatelser og administrasjon per rad.
- Kunnskapsbaseadministrasjon — Fanebasert driftsvisning som kobler kilder og inntakskø og videresender administrasjonshandlinger til verten.
- Kunnskapsgrafutforsker — Utforsker grafen med tegning, entitetssøk, typefiltre, naboutvidelse og stisøk.
- Tankekart — Radialt, utvidbart emnetre for romlig navigasjon og fordypning.
- Naboliste — Relasjoner for én entitet, med navigasjon og utvidelse i grafen per rad.
- Nodepalett — Søkbart nodebibliotek med kategorier for å dra eller plassere noder på flytlerretet.
- Stivisning — Kompakt, rullbar node–relasjon–node-kjede som viser en GraphRAG-resonneringssti.
- Utdragsinspektør — Rangert liste over hentede RAG-utdrag med relevansskår og dyp lenke til dokumentviseren.
- Kildemerke — Innebygd nummerert kildemarkør med forhåndsvisning og farger for sikkerhet og verifisering.
- Kildegrunnlag — Oversikt per påstand med støttetall, kildedekning, sikkerhet, varsler og belegg.
- Minnepanel — Arbeidsminne for agenten med korttidskontekst, langtidsminner, sikkerhet og handlinger som krever bekreftelse.
- Opphavspanel — Sammenleggbar oversikt over entiteter, relasjoner, grupper og utdrag bak et svar.
- RAG-svar — Kildebelagt svar med trygg Markdown, kildemerker, kildevurdering og utvidbare kildevisninger.
- Undersøkelsesfremdrift — Viser undersøkelsestrinn, kildeantall og samlet fremdrift levert av verten.
- Søkeresultater — Rangert liste over hentede utdrag med fjerning av duplikater, kildegruppering og valg av kompakt visning.
- Gjenfinningssøk — Søkefelt for RAG med filtre, kildetagger, valg mellom vektor-, nøkkelord- og hybridsøk samt status.
- Gjenfinningsspor — Tidslinje for omskriving, embedding, gjenfinning, omrangering og filtrering med bevis per trinn.
- Kildekort — Kildeoppføring med tittel, side, utdrag og utvidbar fulltekst.
- Kildeliste — Sammenleggbart kildepanel som samler kildene til én chatmelding.
- Kildevelger — Avkrysningstre for kildene til neste svar, med tretilstander, velg alle og søk.
- Påstandsbelegg — Vurderer genererte påstander mot kilder med støtte, sikkerhet og dokumentasjon.
- RAG-evalueringspanel — Viser kvalitetsmål, trender, evalueringsutvalg og kjøringshistorikk fra vertsberegnede resultater.
- Gjenfinningssammenligning — Sammenligner rangerte søke- og omrangeringsresultater side om side med overlapp og skårfordeling.
Skjemaer og inndata
- Knapp — Handlingsknapp med temafarger, størrelser og lastetilstand.
- Avkrysningsboks — Skjemakontroll med avkrysset, tom og ubestemt tilstand.
- Avkrysningsgruppe — Samler tilhørende avkrysningsbokser i ett validert flervalgsfelt knyttet til skjemaet.
- Koderedigerer — Flerlinjers koderedigering uten ekstra avhengigheter, med valgfrie linjenumre.
- Fargevelger — Innebygd fargefelt tilknyttet skjemaet, med etikett, hint og valideringsfeil.
- Kombinasjonsboks — Filtrerbart enkelt- eller flervalg med tekstfelt og liste i sprettoppvindu.
- Datofelt — Datofelt med kalender i sprettoppvindu og verdi i ISO-8601-format.
- Datovelger — Kalender med månedsrutenett for én dato eller et datointervall.
- Emoji-velger — Søkbar emoji-velger som kan styres med tastatur og brukes i skjemaer.
- Ikonknapp — Kompakt, tilgjengelig knapp med bare et ikon som utløser en handling.
- Inndatafelt — Énlinjes tekstfelt med valgfri etikett, hint og innebygd valideringsmelding.
- Landvelger — Velger land- og områdekoder med oversatte navn, flagg og valgfritt søk.
- Valutavelger — Velger valutakoder med oversatte navn, symboler og valgfritt søk.
- Tidssonevelger — Velger tidssoneidentifikatorer fra en ordnet liste med valgfritt søk.
- Enhetsvelger — Velger måleenheter med oversatte navn, symboler og valgfritt søk.
- Språkvelger — Lukket nedtrekksliste for å bytte gjeldende språkvariant fra bibliotekets eget språkregister.
- Tallfelt — Tallfelt med min-, maks- og trinnbegrensninger samt innebygd validering.
- Valg — Valgbart element som gir kombinasjonsboksen verdi, etikett, gruppe og status.
- Telefonfelt — Landstilpasset telefonfelt med standardisert E.164-verdi i skjemaet.
- Radioknapp — Skjemakontroll for å velge ett alternativ fra en gruppe.
- Radiogruppe — Merket gruppe med radioknapper som kan navigeres med tastatur.
- Vurderingsskjema — Konfigurerbart skjema for poeng, kategorier og kommentarer, med send-og-neste-flyt for en evalueringskø.
- Nedtrekksliste — Lukket liste for å velge ett alternativ fra et fast utvalg.
- Signature pad — Accessible form control for drawing a signature with pointer or keyboard input.
- Skyveknapp — Tallområdekontroll for innstillinger som LLM-temperatur eller lydstyrke.
- Fargeprøvevelger — Velg én farge fra et lite fast utvalg, med innebygd radiogruppesemantikk.
- Bryter — Skjemakontroll med på/av-semantikk for innebygde skjemaer.
- Tekstområde — Flerlinjers tekstfelt med automatisk høyde, validering og skjemautforming.
- Tidsfelt — Språktilpasset segmentert tidsfelt med kolonnevelger; velg lr-native-time-input for nettleserens egen tidsvelger.
- Tidsintervall — Tohåndtaksvelger for start og slutt i et tallområde.
- Veksleknapp — Knapp som selv styrer to tilstander og bruker aria-pressed når valget slås av eller på.
- Veksleknappgruppe — Samler veksleknapper bak ett tabulatorstopp, med flervalg eller enkelvalg som kan fjernes.
- Innebygd tidsfelt — Nettleserens egen tidsvelger med Lyras etikett, hint og valideringsutforming.
- Engangskodefelt — Segmentert felt for engangskoder, med automatisk utfylling fra SMS.
- Knappformet radiovalg — Enkeltvalg utformet som knapp i stedet for sirkel, gjerne i en segmentert radiogruppe.
- Taggfelt — Skjemafelt som samler flere flyttbare tagger eller mottakere.
Datavisning
- Grafspørringsbygger — Skjemaredigerer for typede grafrelasjoner og stier, med entitetsankre, typefiltre, hoppgrenser og lagrede spørringer.
- Kalender — Responsiv månedskalender med hendelsesmerker og tastaturtilgjengelig dagsorden.
- Kontekstmåler — Segmentert stolpe eller ring som viser tokenbudsjett eller hvor fullt kontekstvinduet er.
- Dokumentbibliotek — Søkbart og filtrerbart dokumentarkiv med versjoner, tagger, eiere, aktualitet, sortering og massevalg.
- Miljøvariabelliste — Maskert nøkkel/verdi-liste for miljøvariabler og hemmeligheter, med visning og kopiering per rad.
- Filtre — Filutforskeroppsett over trekomponenten med Git-statusmerker og utsatt innlasting av mapper.
- Flytlerret — Flyttbart og zoombart lerret for å bygge og kjøre visuelle DAG-arbeidsflyter.
- Flytkontroller — Knappgruppe for zoom, tilpasning og låsing av et tilknyttet flytlerret.
- Flytminikart — Oversiktskart i hjørnet med flyttbar visningsramme for et tilknyttet flytlerret.
- Flytnode — Arbeidsflytnode med tittel, statusfarge og koblingspunkter for et flytlerret.
- Flytstatus — Legger kjørestatus på flytlerretet og viser en kort oppsummering av trinnene.
- Traktdiagram — Viser frafall mellom trinn som stolper normalisert mot første trinn.
- Måler — Viser én verdi som radial, ringformet eller lineær måler.
- Varmekart — Tegner verdimatriser eller kalendernett som størrelsestilpasset varmekart på lerret.
- Paginering — Styrt sidenavigasjon med redigerbart sidehopp og oppsummering av elementområde.
- Betingelsesbygger — Kombinerbar spørringsbygger for tabeller og dashbord med felt/operator/verdi-rader og OG/ELLER-kobling.
- Sekvensstripe — Kompakt fargestripe som viser kategoriske tilstander per element, med valgfri markør.
- Minidiagram — Tegner en liten SVG-trend som linje, fylt område eller stolper.
- Nøkkeltall — Viser én KPI med enhet, trendmerke, detaljrader og valgfritt minidiagram.
- Tabell — Datatabell med sorterbare overskrifter, valg, filtrering og paginering.
- Tidslinje — Sammenkoblede historiske hendelser for revisjonsspor, agenthistorikk og endringslogger.
- Tidslinjehendelse — Én hendelse med fargemerke, tittel, tidsstempel og beskrivelse.
- Tre — Utvidbart og sammenleggbart hierarki for grafer, dokumenter og filtrær.
- Trenode — Rekursiv rad for én node og undernodene i et tre.
- Ordsky — SVG-ordsky uten ekstra avhengigheter, med ordstørrelse etter vekt.
- Datarutenett — Virtualisert rutenett for store eller serverstyrte datasett, med sortering, filtrering, gruppering, sider og valg.
Diagrammer
- Stolpediagram — Sammenligner kategoriverdier med loddrette eller vannrette stolper.
- Boksplott — Oppsummerer fordelinger fra forhåndsberegnede femtallssammendrag.
- Boblediagram — Viser tre dimensjoner per punkt med x, y og bobleradius.
- Diagram — Kjerneinnpakning for Chart.js med linje-, stolpe-, sektor- og andre diagrammer.
- Ringdiagram — Viser andeler av en helhet som segmenter i en ring.
- Histogram — Deler tall i like brede intervaller for å vise fordelingen.
- Linjediagram — Følger trender langs en kontinuerlig akse med én eller flere sammenhengende serier.
- Lett diagram — Stolpe- og linjediagram i ren SVG uten Chart.js-avhengighet.
- Sektordiagram — Viser hvor stor andel én serie utgjør av helheten.
- Polardiagram — Tegner kategorier som polare sektorer skalert etter verdi.
- Radardiagram — Sammenligner flere mål for én serie i et radialt rutenett.
- Punktdiagram — Tegner rå x/y-punktpar på lineære akser.
Oppsett og navigasjon
- Trekkspill — Samordner en gruppe utvidbare paneler og kan tillate flere åpne samtidig.
- Trekkspillelement — Sammenleggbart panel laget for en trekkspillgruppe.
- Appnavigasjonsfelt — Responsivt navigasjonsfelt som går fra fullt til bare ikoner og deretter mobiloverlegg.
- Navigasjonsfeltgruppe — Merket, valgfritt sammenleggbar gruppe av elementer i appnavigasjonen.
- Navigasjonsfeltelement — Navigasjonselement med ikon og tekst som blir bare ikon når feltet trekkes sammen.
- Brødsmulesti — Responsiv navigasjonssti som viser hvor brukeren er i sidehierarkiet.
- Brødsmule — Én lenke eller gjeldende sideetikett i en brødsmulesti.
- Knappegruppe — Samler tilhørende handlingsknapper i en responsiv gruppe med etikett.
- Kort — Innholdsflate med ramme og plasser for toppfelt, medier, bunntekst og handlinger.
- Karusell — Tilgjengelig lysbildekarusell med tastatur, indikatorer, løkke og automatisk avspilling.
- Karusellelement — Valgfri semantisk innpakning som gir et karusellbarn enhetlig utforming.
- Kommandopalett — Søkbar kommandomeny med tastaturnavigasjon og snarveier.
- Kontrollgruppe — Samler ulike skjemakontroller og knapper i en responsiv, sentrert verktøylinjerad.
- Dashbordrutenett — Responsivt, tastaturtilgjengelig miniprogramrutenett som ber om flytting, størrelsesendring og kollisjonshåndtering.
- Detaljer — Tilgjengelig panel som åpner innhold under et sammendrag.
- Dokket panel — Panel langs én kant av oppsettet som kan skaleres og foldes sammen.
- Detaljnavigasjonspanel — Styrt navigasjon fra diagram- eller tabelldata til kilder, dokumenter, entiteter og agentkjøringer.
- Nedtrekkselement — Web Awesome-kompatibelt alias for én handlingsrad i en nedtrekksmeny.
- Filterlinje — Dashbordfilter som kombinerer Lyra-felt og flyttbare etiketter, med tilbakestilling og lastetilstand.
- Meny — Semantisk handlingsmeny med flyttbart fokus og nøstede undermenyer.
- Menyelement — Én handlingsrad med valgfritt ikon, avkrysning eller stil for farlig handling.
- Omordningselement — Rad i en omordningsliste med opp- og nedknapper og valgfritt innhold.
- Omordningsliste — Rader kan flyttes med knapper eller Ctrl/Cmd+piltast.
- Menyetikett — Ikke-interaktiv seksjonsoverskrift som grupperer menyelementer.
- Menylinje — Vannrett appmeny med navngitte nedtrekksmenyer og full tastaturnavigasjon.
- Menylinjeelement — Øverste menytittel som åpner en underliggende meny eller fungerer som vanlig handling.
- Navigasjonsmeny — Nettstedsnavigasjon med lenker og paneler som samles bak en menyknapp når plassen blir liten.
- Navigasjonsmenyelement — Én sidelinke eller en knapp som åpner et navigasjonspanel.
- Side — Semantisk appskall som velger mellom skrivebordskolonne og modal mobilskuff etter egen tilgjengelig bredde.
- Responsivt panel — Viser innhold innebygd på skrivebordet og som overlegg på mobil.
- Rulleflate — Responsiv overløpsflate med valgfrie forrige- og neste-knapper for kort- og fanerader.
- Segmentert valg — Knapperad for raskt å velge ett av flere merkede alternativer.
- Flerdelt panel — Deler et dashbord i paneler som kan dras i størrelse og eventuelt foldes på smale flater.
- Delt panel — Deler innhold i to flater som kan skaleres med én skillelinje.
- Trinnviser — Leder brukeren gjennom en ordnet veiviser med status per trinn og klikkbar snarvei.
- Fanegruppe — Fanelinje som viser ett panel om gangen og støtter full tastaturnavigasjon.
- Fane — Web Awesome- og Shoelace-kompatibel fanebeskrivelse som kobles til et panel via panel- og name-attributter.
- Fanepanel — Kompatibel panelbeskrivelse som kobles til en fane via name- og panel-attributter.
- Virtuell liste — Vindusbasert liste som bare gjengir synlige rader i svært store samlinger.
- Miniprogram — Panel med tittel og valgfrie knapper for sammenfolding og fullskjerm.
Overlegg og tilbakemelding
- Varslingsområde — Område som stabler varsler i et hjørne av skjermen.
- Varsel — Ett varsel som kan lukkes, med alvorlighetsfarge, valgfritt ikon og tidsstyrt lukking.
- Etikett — Lite merke for tagg, filter eller omfang som kan fjernes eller veksles.
- Etikettgruppe — Plasserer etiketter sammen og samler overskytende under en valgfri +N-knapp.
- Varselmelding — Melding som starter lukket, kan skjules etter tid og eventuelt overleveres til felles varslingsstabel.
- Merke — Kompakt statusetikett for tilstand, antall eller kategori inne i tekst.
- Fremhevet melding — Lukkbar innebygd flate for status, advarsler og feil.
- Kontekstmeny — Åpner handlingsmeny ved høyreklikk, langt trykk eller Shift+F10 på et område.
- Dialog — Modalt overlegg som holder fokus inne, for bekreftelser, skjemaer og avbrudd.
- Skuff — Modalt panel som glir inn fra en kant for filtre og kontekstuelle kontroller.
- Nedtrekksmeny — Sprettoppmeny som forankrer handlinger ved en utløser levert av appen.
- Tom tilstand — Forklarer at data mangler med ikon, melding og valgfrie handlinger.
- Tast — Plattformtilpasset merke som viser hurtigtaster som tastaturtaster.
- Sprettoppflate — Flytende innhold som åpnes ved klikk og lukkes ved klikk utenfor.
- Sprettoppvindu — Lavnivå plassering som holder et flytende panel ved ankeret; brukes også av popover og tooltip.
- Fremdriftslinje — Vannrett fremdriftsviser med kjent eller ukjent verdi.
- Fremdriftsring — Rund fremdriftsviser med kjent eller ukjent verdi og valgfri tekst i midten.
- Vurdering — Tastaturtilgjengelig stjernevurdering med delvis fylling og brøkpresisjon.
- Skjelettvisning — Animert plassholder mens innholdet lastes.
- Lastesymbol — Animert indikator for bakgrunnsarbeid med ukjent varighet.
- Tagg — Semantisk variant av merkeuttrykket for nøkkelord og kategorier.
- Verktøytips — Beskrivende tips ved peker eller fokus på en utløser som appen eier.
Dokument- og filvisere
- Arkivviser — Lister filnavn og ukomprimerte størrelser i ZIP-arkiv uten å pakke ut.
- Kalenderfilviser — Leser .ics-filer og viser hendelser med sammendrag, tid og sted.
- Kontaktviser — Henter et vCard-dokument og viser ett tilgjengelig kort per kontakt.
- CSV-viser — Henter CSV og viser radene i et virtualisert, rullbart ark.
- Datasettviser — Henter tekst med skilletegn og viser den som en typet, tilgjengelig datatabell.
- Dokumentsammenligning — Sammenligner to dokumentversjoner side om side eller innebygd, med tekstdiff og gjengitte forhåndsvisninger.
- Dokumentforhåndsvisning — Viser dokument eller vedlegg på siden etter MIME-type, med nedlasting som reserve.
- Dokumentviser — Viser dokumenter i dialog med utskiftbare visere for MIME-typer.
- DOCX-viser — Gjengir DOCX som trygg, semantisk HTML via mammoth-konverteren.
- E-bokviser — Viser EPUB med kapittelnavigasjon via den valgfrie epub.js-avhengigheten.
- E-postviser — Leser .eml og viser toppfelt, trygg meldingstekst og vedlegg.
- GeoJSON-viser — Henter, validerer og tegner objekter fra GeoJSON på et kart.
- Uthevingslag — Tegner aktiverbare uthevingsrektangler over plassert dokumentinnhold.
- HTML-viser — Henter innhold fra URL og viser HTML trygt etter rensing.
- Inkluder — Henter et HTML-fragment og setter det inn som renset innhold på siden.
- Notatbokviser — Skrivebeskyttet Jupyter-notatbok med Markdown, kode og rikt celleinnhold.
- Sideminiatyrer — Virtualisert loddrett rad med sideminiatyrer for dokumentnavigasjon.
- PDF-viser — Henter og gjengir PDF-sider med zoom, sidebytte og valgbart tekstlag.
- PPTX-viser — Best mulig visning av PowerPoint-presentasjoner i nettleseren.
- Regnearkviser — Henter .xlsx- og eldre .xls-filer med arkfaner og virtualiserte rader.
- SVG-viser — Henter og viser SVG fra URL trygt etter rensing.
- XML-viser — Sammenleggbar og kopierbar trevisning for XML-dokumenter.
Medier og filer
- Vedleggsmerke — Kompakt filvedlegg i en melding med opplastingsstatus, fremdrift og ny prøve.
- Avatar — Lite identitetsmerke med ikon, bilde eller initialer som reserve.
- Animert bilde — Spiller GIF, APNG eller WebP med pauseknapp som respekterer redusert bevegelse.
- Animasjon — Animerer et innholdselement deklarativt med navngitte mønstre eller egne nøkkelbilder.
- Vedleggsknapp — Kompakt handling i chatfeltet som åpner filvelger eller funksjonsmeny.
- Lyd- og videospiller — Spiller med synkronisert tekst, bølgeform og hastighetskontroll.
- Avatargruppe — Stabler overlappende avatarer og samler resten i et +N-merke.
- Slippområde — Gjør et hvilket som helst område til mål for filslepp, uten egen filvelger.
- Filikon — Språktilpasset filtypemerke ut fra MIME-type eller filnavn.
- Filfelt — Velg filer ved å slippe dem eller åpne filvelgeren; sender de valgte filene videre.
- Flagg — Land- eller språkflagg i tematilpasset ramme som også kan være rund.
- Bildesammenligner — Flytt en tastaturtilgjengelig skillelinje for å sammenligne før og etter.
- Bildeviser — Full bildeviser med flytting, zoom, merkede uthevingsområder og valgfri merknad.
- Lysboks — Fullskjerms modal bildeviser med forrige/neste og zoom.
- Kart — MapLibre GL-innpakning med deklarativ tegnforklaring, temakart og markører.
- Mediekort — Viser bilde-, video- eller filvedlegg direkte i chatmelding.
- Flytt og zoom — Rullbart område for å flytte og zoome innhold eller ett bilde innenfor grenser.
- Sekvensavspilling — Avspillingskontroll som flytter en indeks gjennom et område med fast intervall.
- QR-kode — Koder en verdi som en skannbar QR-kode på lerretet.
- Video — Innebygd videospiller med egne kontroller, valgbare undertekster og miniatyrer.
- Videospilleliste — Spiller videoer i en navigerbar liste og går automatisk til neste.
- Zoombar ramme — Isolert iframe med trinnvis zoom; eldre innholds- og bildevisning finnes nå i lr-pan-zoom.
Hjelpeverktøy
- Skjæringsobservatør — Sender innebygde skjæringsdata når innhold kommer inn i eller forlater visningsområdet.
- Endringsobservatør — Observerer element- og attributtendringer i sporinnhold og videresender innebygde endringsdata.
- Størrelsesobservatør — Observerer størrelsen på sporinnhold og sender typede størrelsesdata uten synlig grensesnitt.
- Kopieringsknapp — Ikonknapp som kopierer tekst til utklippstavlen og viser hake som bekreftelse.
- Diffvisning — Sammenligner to strenger linje for linje og viser fargelagt samlet diff.
- Skillelinje — Tematilpasset semantisk skille mellom innhold vannrett eller loddrett.
- Eksportknapp — Laster ned tabelldata som CSV eller JSON, direkte eller via formatmeny.
- Byteformat — Språktilpasset byteformattering med justerbar enhet og presisjon.
- Datoformat — Språktilpasser dato og tid gjennom Intl.DateTimeFormat.
- Tallformat — Språktilpasser tall, valuta og kompakt notasjon gjennom Intl.NumberFormat.
- Ikon — Viser skarpe innebygde SVG-ikoner fra navngitte stier uten ekstra avhengigheter.
- JSON-viser — Sammenleggbar, kopierbar trevisning for JSON-data.
- Kjent dato — Tre felt for dag, måned og år når brukeren allerede kjenner datoen.
- Direktemeldingsområde — Visuelt skjult ARIA-liveområde som begrenser kunngjøringer til skjermlesere.
- Omtalevindu — Autofullføring ved markøren for @-omtaler og skråstrekkommandoer i tekstfelt.
- Oppdateringsstatus — Nedtelling til planlagt oppdatering med pause- og fortsettknapp.
- Tilfeldig innhold — Veksler tilfeldig eller i rekkefølge mellom innhold for A/B-tekst og anbefalinger.
- Relativ tid — Viser språktilpasset relativt tidspunkt og oppdaterer seg selv.
- Omvisning — Trinnvis introduksjon med spotlight for nye brukere.
- Visuelt skjult — Skjuler innhold visuelt, men ikke for skjermlesere, og viser det igjen ved fokus.