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-elementille icon-propin avulla. Kuvaketta käytettäessä tulee käyttää outline-varianttia.
<Chat>
<ChatMessage position="left" variant="neutral">
<Timeline as="ol">
<TimelineItem variant="light" outline icon={<IconLocationPin />}>
Lähtöosoite
<p className="kds-text-muted kds-mb-2">Leiviskätie 1</p>
</TimelineItem>
<TimelineItem variant="light" aria-current="step">
<strong>Matkaosuus</strong>
<p className="kds-text-muted kds-mb-2">Koulukuljetus 20 kilometriä</p>
<Button appearance="link" iconBefore={<IconEdit />}>
Muokkaa
</Button>
<br />
<Button appearance="link" className="kds-text-danger" iconBefore={<IconTrash />}>
Poista
</Button>
</TimelineItem>
<TimelineItem variant="primary" aria-current="step">
<strong>Matkaosuus</strong>
</TimelineItem>
<TimelineItem variant="light" outline aria-current="step">
<strong>Matkaosuus</strong>
</TimelineItem>
<TimelineItem variant="light" icon={<IconLocationPin />} outline>
Pääteosoite
<p className="kds-text-muted kds-mb-2">Koulutie 3</p>
</TimelineItem>
</Timeline>
</ChatMessage>
</Chat>
Räätälöity aikajana
<Timeline>
<TimelineItem variant="light">Hakemuksesi on saapunut 28.3.2019.</TimelineItem>
<TimelineItem variant="light">
<span className="kds-block">Tarvitsemme sinulta lisätietoja.</span>
<small className="kds-text-muted kds-block">Sinulla on aikaa toimittaa lisätiedot keskiviikkoon 10.4. asti.</small>
</TimelineItem>
<TimelineItem variant="primary" aria-current="step">
<strong className="kds-block">Hakemuksen käsittely</strong>
<small className="kds-text-muted">Arvioitu kesto on tällä hetkellä 8-10 arkipäivää.</small>
</TimelineItem>
<TimelineItem variant="light" outline>
<span>Päätös</span>
</TimelineItem>
</Timeline>
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>
Skeleton
<Timeline as="ul">
<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>
<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>