Komponentti määritelmä- tai käsitelistojen toteuttamiseen.
Julkaistu versiossa 13.5.0
Komponentti on edelleen kehityksessä, joten sen API ja ominaisuudet saattavat vielä muuttua.
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>
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>