Komponentit

React-komponentit Kelan ja Kannan käyttöliittymiin.

Asettelu

Grid

Container, Row ja Column -komponentit sivun palstarakenteiden toteutukseen.

Navigaatio

BackToTop

Painike sivun ylälaitaan siirtymiseen.

Breadcrumb

Murupolku sivuhierarkian esitykseen.

CookieBanner

Komponentti kävijäseurannan ja evästeiden hyväksyntään.

Footer

Sivun alatunniste

Link

Komponentti linkkien eli siirtymien esittämiseen.

LinkBox

Komponentti linkkien korostamiseen.

LinkWithInfo

Linkki lisätiedolla.

MainBar

Palvelukohtainen työkalupalkki.

Nav

Komponentti navigaatiorakenteiden toteutukseen.

Beta

OverlayNav

Komponentti sisällön päälle avautuvan navigaatiovalikon toteutukseen.

Pagination

Komponentti pitkien listausten sivutukseen.

Sidebar

Sivupalkki-komponentti navigaatiovalikon toteuttamiseen eri kokoisille näytöille.

SkipLink

Komponentti hyppylinkin toteutukseen.

TabNav

Komponentti linkkipohjaisen navigaation toteuttamiseen.

Tabs

Välilehtikomponentti sisällön jakamiseksi eri näkymiin.

TitleBar

Palvelukohtainen brändi-elementti.

Tiedon esittäminen

Accordion

Haitarielementti sisältöjen piilottamiseen.

Badge

Merkkilappu metatietojen esitykseen.

Box

Komponentti erilaisten sisältöjen ryhmittelyyn ja kehystykseen.

Card

Kortti sisältöjen ryhmittelyyn.

Chat

Puhekupla vuoropuhelun esitykseen.

Chip

Komponentti tiedon tai toiminnon näyttämiseen.

Luonnos

Clickable

Komponentti, joka muodostaa koko elementin laajuisen klikattavan alueen.

Collapse

Muokattava haitarikomponentti.

ContentHighlight

Komponentti tekstisisältöjen korostukseen.

DescriptionList

Komponentti määritelmä- tai käsitelistojen toteuttamiseen.

Heading

Sisältöjen otsikointiin.

List

Komponentti sisältöjen listaukseen.

Panel

Panel-komponentti mahdollistaa saman aihealueen sisältöjen ryhmittelyn selkeisiin asiakokonaisuuksiin.

Beta

ProgressBar

Komponentti toiminnon edistymisen näyttämiseen.

Spacing

Komponentti välistysarvojen asettamiseen.

Status

Visuaalinen komponentti tilan ja siihen liittyvän lisätiedon esittämiseen.

TableV2

Komponentti taulukkomuotoisen tiedon esitykseen.

Text

Komponentti tekstielementtien toteutukseen

Tile

Nostokomponentti tiedon korostamiseen.

Timeline

Aikajana vaiheiden ja prosessien esitykseen.

Tooltip

Työkaluvihje lisätiedon esittämiseen.

Toiminnot ja syötteet

Button

Painike toimintojen käynnistämiseen.

ButtonGroup

Komponentti painikkeiden ryhmittelyyn.

Checkbox

Valintaruutu yhden tai useamman vaihtoehdon valitsemiseen.

ComboboxV2

Tekstikentän ja valintalistan yhdistelmä, joka ehdottaa käyttäjälle valintoja.

DatePickerV2

Päivämäärän valinta- ja syöttökenttä.

DateRangePickerV2

Ajanjakson valinta- ja syöttökenttä.

Dropdown

Dropdown-komponentti toimintojen näyttämiseen valikossa.

FileInput

Kenttä tiedostojen lähetykseen.

Input

Komponentti syöttökentän toteuttamiseen.

InputGroup

Komponentti syöttökenttien ryhmittelyyn.

Multiselect

Pudotusvalikko valintojen tekemiseen.

Luonnos

MultiselectV2

Pudotusvalikko useamman valinnan tekemiseen.

Radio

Valintanappi yhden vaihtoehdon valitsemiseksi ryhmästä.

Select

Komponentti yhden vaihtoehdon valitsemiseksi valintalistasta.

SelectionGroup

Lomakekomponentti valintaruutujen ja valintanappien ryhmittelyyn.

SelectionLasso

Valintalassotyökalu useamman valinnan tekemiseen kerralla.

Poistuva

SplitButton

Jaettu painike samankaltaisten toimintojen käynnistämiseen.

TextInput

Komponentti usein toistuville lomakekentille.

Textarea

Lomakkeen monirivinen tekstikenttä.

Beta

TimeInput

Komponentti kellonajan syöttämiseen ja valintaan.

Beta

ToggleSwitch

Valintakytkin valinnan tekemiseen kahden toisensa pois sulkevan tilan väliltä.

Ilmoitukset

Alert

Komponentti ilmoitusten esittämiseen.

Modal

Komponentti dialogien esitykseen.

Result

Komponentti erilaisten lopputulosten ilmoittamiseen.

Skeleton

Latausindikaattori sisältöjen lataukseen.

Spinner

Kuvakemainen latausindikaattori.

Toast

Komponentti kelluvien ilmoitusten esitykseen.

Muut

KantaSquares

Neliöelementit Kanta-palveluiden brändäämiseen.

Portal

Apukomponentti Reactin portaalien toteutukseen.

React-hookit

useAriaLive

React Hook ilmoitusten toteuttamiseen ruudunlukijalle.

useBackToTop

React Hook, joka piilottaa ja näyttää BackToTop-komponentin valmiilla asetuksilla.

Poistuva

useCollapse

React Hook sisällön näyttämiseen ja piilottamiseen.

Luonnos

useCollapseV2

React-hook sisällön näyttämiseen ja piilottamiseen.

useDebounce

React-hook suorituskyvyn optimointiin.

Luonnos

useHiddenUntilFound

React-hook sisällön näyttämiseen selaimen sisäistä hakua käytettäessä.

useIsFirstRender

React Hook, jonka avulla voi tarkistaa renderöidäänkö komponenttia ensimmäistä kertaa.

useMediaQuery

React Hook media queryn tarkkailuun JavaScriptissa.

useMode

React-hook käyttöliittymän tumman ja vaalean tilan vaihtamiseen.

useNonInteractiveFocus

React Hook kohdistuksen hallintaan HTML-elementeille, jotka eivät normaalisti saa kohdistusta.

useOnClickOutside

React Hook elementin ulkopuolisen klikkauksen tunnistamiseen.

usePagination

React Hook sivutuksen toteuttamiseen.

usePrevious

UsePrevious-hook edellisen propin tai tilan arvon tallennukseen.

Beta

useResizeObserver

React Hook HTML-elementin koon muutosten tarkkailuun.

useSelectionLasso

React Hook valintalasson toteuttamiseen.

Poistuva

useSort

UseSort-hookia voi käyttää mm. taulukon rivien järjestämiseen.

Luonnos

useSortV2

React-hook tiedon järjestämiseen.

useThrottle

React-hook suorituskyvyn optimointiin.

useToggle

UseToggle-hookia käytetään boolean-tyyppisten tilojen luomiseen.