Esikatselu
<DescriptionList>
<DescriptionListItem label="Lorem ipsum">Dolor sit amet, consectetur adipiscing elit.</DescriptionListItem>
<DescriptionListItem label="Sed at urna ">Vitae magna interdum faucibus.</DescriptionListItem>
<DescriptionListItem label="Curabitur">Pellentesque porta ipsum eget lacus ultrices tristique.</DescriptionListItem>
</DescriptionList>
Saavutettavuus
Komponentti tuottaa vaihtoehdoista listan.
VoiceOver ei ilmoita listan kohteiden määrää, jos DescriptionListItem-komponentissa käytetään sisältöelementtinä (contentAs tai itemContentAs) block-elementtiä (kuten div).
Komponentin sisällöt kannattaa pitää inline-elementteinä (esim. span), jotta HTML-rakenne säilyy semanttisesti oikeana ja saavutettavuus toimii odotetusti.
Tarvittaessa contentAs- tai itemContentAs-propin avulla voi vaihtaa span-elementin (oletus) esimerkiksi div-elementiksi — tällöin VoiceOver ei enää ilmoita listan kohteiden määrää.
Käyttötarkoitus
DescriptionList-komponenttia voidaan käyttää määritelmä- tai käsitelistojen toteuttamiseen. Määritelmälista on hyödyllinen tilanteissa, joissa halutaan esittää termit ja niihin liittyvät kuvaukset selkeässä rakenteessa.
<DescriptionList>
<DescriptionListItem label="Sosiaaliturva">
Keinot, joilla yhteiskunta pyrkii takaamaan jäsenilleen ihmisarvoisen elämän edellyttämän toimeentulon ja
huolenpidon.
</DescriptionListItem>
<DescriptionListItem label="Toimeentuloturva">
Sosiaaliturvan osa, jonka tarkoituksena on taata henkilölle riittävä toimeentulo.
</DescriptionListItem>
<DescriptionListItem label="Sosiaalivakuutus">
Toimeentuloturvaan kuuluva vakuutus, jolla pyritään turvaamaan vakuutetun toimeentulo tiettyjen elämänmuutosten tai
vahinkotapahtumien varalta.
</DescriptionListItem>
<DescriptionListItem label="Eläkevakuutus">
Sosiaalivakuutus, jonka perusteella voidaan maksaa eläkettä.
</DescriptionListItem>
</DescriptionList>
Palstoitus
Oletuksena komponentti tulostaa listan asettaen termin ja sen määritelmän vierekkäisiin palstoihin. Termin leveyttä voidaan hallita labelWidth-propin avulla. Pienimmät näyttökoot näyttävät termin ja kuvauksen aina allekkain.
<DescriptionList labelWidth="m">
<DescriptionListItem label="Sosiaaliturva">
Keinot, joilla yhteiskunta pyrkii takaamaan jäsenilleen ihmisarvoisen elämän edellyttämän toimeentulon ja
huolenpidon.
</DescriptionListItem>
<DescriptionListItem label="Toimeentuloturva">
Sosiaaliturvan osa, jonka tarkoituksena on taata henkilölle riittävä toimeentulo.
</DescriptionListItem>
<DescriptionListItem label="Sosiaalivakuutus">
Toimeentuloturvaan kuuluva vakuutus, jolla pyritään turvaamaan vakuutetun toimeentulo tiettyjen elämänmuutosten tai
vahinkotapahtumien varalta.
</DescriptionListItem>
<DescriptionListItem label="Eläkevakuutus">
Sosiaalivakuutus, jonka perusteella voidaan maksaa eläkettä.
</DescriptionListItem>
</DescriptionList>
Yksipalstainen asettelu
Termit ja määritelmät voidaan tulostaa yhteen palstaan antamalla komponentille boolean-muotoinen stack-prop.
<DescriptionList stack>
<DescriptionListItem label="Sosiaaliturva">
Keinot, joilla yhteiskunta pyrkii takaamaan jäsenilleen ihmisarvoisen elämän edellyttämän toimeentulon ja
huolenpidon.
</DescriptionListItem>
<DescriptionListItem label="Toimeentuloturva">
Sosiaaliturvan osa, jonka tarkoituksena on taata henkilölle riittävä toimeentulo.
</DescriptionListItem>
<DescriptionListItem label="Sosiaalivakuutus">
Toimeentuloturvaan kuuluva vakuutus, jolla pyritään turvaamaan vakuutetun toimeentulo tiettyjen elämänmuutosten tai
vahinkotapahtumien varalta.
</DescriptionListItem>
<DescriptionListItem label="Eläkevakuutus">
Sosiaalivakuutus, jonka perusteella voidaan maksaa eläkettä.
</DescriptionListItem>
</DescriptionList>
Koko listan asettaminen palstoihin
Listan koko sisältö voidaan tulostaa kahteen palstaan hyödyntämällä columns-proppia.
<DescriptionList columns={2} stack>
<DescriptionListItem label="Sosiaaliturva">
Keinot, joilla yhteiskunta pyrkii takaamaan jäsenilleen ihmisarvoisen elämän edellyttämän toimeentulon ja
huolenpidon.
</DescriptionListItem>
<DescriptionListItem label="Toimeentuloturva">
Sosiaaliturvan osa, jonka tarkoituksena on taata henkilölle riittävä toimeentulo.
</DescriptionListItem>
<DescriptionListItem label="Sosiaalivakuutus">
Toimeentuloturvaan kuuluva vakuutus, jolla pyritään turvaamaan vakuutetun toimeentulo tiettyjen elämänmuutosten tai
vahinkotapahtumien varalta.
</DescriptionListItem>
<DescriptionListItem label="Eläkevakuutus">
Sosiaalivakuutus, jonka perusteella voidaan maksaa eläkettä.
</DescriptionListItem>
</DescriptionList>
Listan tuottaminen järjestetystä tiedosta
Listasisältö voidaan antaa komponentille myös järjestettynä tietona items-propin avulla.
<DescriptionList
stack
columns={2}
items={[
{
label: "Sosiaaliturva",
value:
"Keinot, joilla yhteiskunta pyrkii takaamaan jäsenilleen ihmisarvoisen elämän edellyttämän toimeentulon ja huolenpidon.",
},
{
label: "Toimeentuloturva",
value: "Sosiaaliturvan osa, jonka tarkoituksena on taata henkilölle riittävä toimeentulo.",
},
{
label: "Sosiaalivakuutus",
value:
"Toimeentuloturvaan kuuluva vakuutus, jolla pyritään turvaamaan vakuutetun toimeentulo tiettyjen elämänmuutosten tai vahinkotapahtumien varalta.",
},
{ label: "Eläkevakuutus", value: "Sosiaalivakuutus, jonka perusteella voidaan maksaa eläkettä." },
]}
/>
Korostuksen siirtäminen kuvaustekstille
Korostuksen voi tarvittaessa siirtää kuvaukselle, kun itse sisältöä halutaan erityisesti korostaa.
<DescriptionList labelWidth="s" emphasizeValue>
<DescriptionListItem label="Määräyspäivä">14.10.2021</DescriptionListItem>
<DescriptionListItem label="Määrätty määrä">2 x 100 kpl</DescriptionListItem>
<DescriptionListItem label="Lääkettä jäljellä">0</DescriptionListItem>
<DescriptionListItem label="Reseptin viimeinen voimassaolopäivä">Ei voimassa</DescriptionListItem>
</DescriptionList>