Esikatselu
<Timeline>
<TimelineItem variant="light">Lorem</TimelineItem>
<TimelineItem variant="light">Ipsum</TimelineItem>
<TimelineItem variant="light">Dolor</TimelineItem>
</Timeline>
Käyttötarkoitus
Timeline-komponentin käyttötarkoituksena on tarjota visuaalinen esitys käyttäjän
edistymisestä, joka ohjaa tietyn prosessin loppuunsaattamiseen. Käytä aikajanaa pitääksesi käyttäjän ajan tasalla, kun hän suorittaa tietyn prosessin.
Yksi aikajana sisältää yhteen aiheeseen liittyviä toimintoja tiiviisti esitettynä ja jaettuna loogisiin vaiheisiin. Käytä aikajanoissa johdonmukaista rakennetta, mikä tukee esitetyn tiedon ymmärrettävyyttä.
Saavutettavuus
Korosta aktiivinen vaihe myös ruudunlukijoille lisäämällä aria-current -attribuutti ja sille käyttökontekstiin sopiva arvo.
Esimerkit
Numeroitu aikajana
<Timeline>
<TimelineItem variant="light">Mennyt vaihe</TimelineItem>
<TimelineItem variant="primary" aria-current="step">
Aktiivinen vaihe
</TimelineItem>
<TimelineItem variant="danger" aria-current="step">
Aktiivinen vaihe, jossa on virhetilanne (tai muu vastaava)
</TimelineItem>
<TimelineItem variant="light" outline>
Tuleva vaihe
</TimelineItem>
</Timeline>
Numeroimaton aikajana
<Timeline as="ul">
<TimelineItem variant="light">Mennyt vaihe</TimelineItem>
<TimelineItem variant="primary" aria-current="step">
Aktiivinen vaihe
</TimelineItem>
<TimelineItem variant="danger" aria-current="step">
Aktiivinen vaihe, jossa on virhetilanne (tai muu vastaava)
</TimelineItem>
<TimelineItem variant="light" outline>
Tuleva vaihe
</TimelineItem>
</Timeline>
Aikajana kuvakkeilla
Aikajanalle voi lisätä käyttöliittymäkuvakkeita. Kuvake välitetään TimelineItem-komponentille icon-propin avulla.
<Chat>
<ChatMessage position="left" variant="neutral">
<Timeline as="ol">
<TimelineItem variant="light" icon={<IconUiLocationPin />}>
<Text>
Lähtöosoite
<br />
<span className="kds-text-muted">Leiviskätie 1</span>
</Text>
</TimelineItem>
<TimelineItem variant="primary" aria-current="step">
<Text mb={2}>
<strong>Matkaosuus</strong>
<br />
<span className="kds-text-muted">Koulukuljetus 20 kilometriä</span>
</Text>
<Button appearance="link" iconBefore={<IconUiEdit />} className="kds-mb-1">
Muokkaa
</Button>
<br />
<Button appearance="link" iconBefore={<IconUiTrash />} variant="danger">
Poista
</Button>
</TimelineItem>
<TimelineItem variant="light" outline>
<Text>Matkaosuus</Text>
</TimelineItem>
<TimelineItem variant="light" outline>
<Text>Matkaosuus</Text>
</TimelineItem>
<TimelineItem variant="light" icon={<IconUiLocationPin />} outline>
<Text>
Pääteosoite
<br />
<span className="kds-text-muted">Koulutie 3</span>
</Text>
</TimelineItem>
</Timeline>
</ChatMessage>
</Chat>
Vaakatasossa oleva aikajana
<Timeline horizontal>
<TimelineItem variant="light">Perusteet</TimelineItem>
<TimelineItem variant="light">Yhteenveto</TimelineItem>
<TimelineItem variant="primary" aria-current="step">
Maksutiedot
</TimelineItem>
<TimelineItem variant="light" outline>
<span>Päätös</span>
</TimelineItem>
</Timeline>
Aikajanan värivaihtoehdot
Aikajanalla voi käyttää alla olevia värivaihtoehtoja.
Värejä voi tarvittaessa muokata color- ja bgColor-proppeja tai seuraavia CSS-muuttujia hyödyntäen: --kds-timeline-item-color, --kds-timeline-item-icon-color, --kds-timeline-item-bg-color.
<div className="kds-flex kds-flex-wrap">
<Timeline className="kds-mr-8">
<TimelineItem variant="primary">Primary</TimelineItem>
<TimelineItem variant="danger">Danger</TimelineItem>
<TimelineItem variant="warning">Warning</TimelineItem>
<TimelineItem variant="success">Success</TimelineItem>
<TimelineItem variant="light">Light</TimelineItem>
<TimelineItem variant="dark">Dark</TimelineItem>
</Timeline>
<Timeline className="kds-mr-8">
<TimelineItem variant="primary" icon={<IconUiLocationPin />}>
Primary
</TimelineItem>
<TimelineItem variant="danger" icon={<IconUiLocationPin />}>
Danger
</TimelineItem>
<TimelineItem variant="warning" icon={<IconUiLocationPin />}>
Warning
</TimelineItem>
<TimelineItem variant="success" icon={<IconUiLocationPin />}>
Dolor
</TimelineItem>
<TimelineItem variant="light" icon={<IconUiLocationPin />}>
Dolor
</TimelineItem>
<TimelineItem variant="dark" icon={<IconUiLocationPin />}>
Dolor
</TimelineItem>
</Timeline>
<Timeline className="kds-mr-8">
<TimelineItem variant="primary" outline>
Primary (outline)
</TimelineItem>
<TimelineItem variant="danger" outline>
Danger (outline)
</TimelineItem>
<TimelineItem variant="warning" outline>
Warning (outline)
</TimelineItem>
<TimelineItem variant="success" outline>
Success (outline)
</TimelineItem>
<TimelineItem variant="light" outline>
Light (outline)
</TimelineItem>
<TimelineItem variant="dark" outline>
Dark (outline)
</TimelineItem>
</Timeline>
<Timeline className="kds-mr-8">
<TimelineItem variant="primary" outline icon={<IconUiLocationPin />}>
Primary (outline)
</TimelineItem>
<TimelineItem variant="danger" outline icon={<IconUiLocationPin />}>
Danger (outline)
</TimelineItem>
<TimelineItem variant="warning" outline icon={<IconUiLocationPin />}>
Warning (outline)
</TimelineItem>
<TimelineItem variant="success" outline icon={<IconUiLocationPin />}>
Success (outline)
</TimelineItem>
<TimelineItem variant="light" outline icon={<IconUiLocationPin />}>
Light (outline)
</TimelineItem>
<TimelineItem variant="dark" outline icon={<IconUiLocationPin />}>
Dark (outline)
</TimelineItem>
</Timeline>
</div>
Skeleton
<Timeline as="ul" aria-label="Sisältöä ladataan.">
<TimelineItem variant="light" outline>
<Skeleton variant="text" className="kds-w-1/4" />
</TimelineItem>
<TimelineItem variant="light" outline>
<Skeleton variant="text" className="kds-w-1/4" />
</TimelineItem>
<TimelineItem variant="light" outline>
<Skeleton variant="text" className="kds-w-1/4" />
</TimelineItem>
</Timeline>
<Timeline as="ul" horizontal aria-label="Sisältöä ladataan.">
<TimelineItem variant="light" outline>
<Skeleton variant="text" className="kds-block kds-w-24" />
</TimelineItem>
<TimelineItem variant="light" outline>
<Skeleton variant="text" className="kds-block kds-w-24" />
</TimelineItem>
<TimelineItem variant="light" outline>
<Skeleton variant="text" className="kds-block kds-w-24" />
</TimelineItem>
<TimelineItem variant="light" outline>
<Skeleton variant="text" className="kds-block kds-w-24" />
</TimelineItem>
</Timeline>