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.
Tunnettuja ongelmia:
- VoiceOver ei ilmoita listan kohteiden määrää, jos
DescriptionListItem-komponentissa käytetään sisältöelementtinä (contentAs tai itemContentAs) block-elementtiä (kuten div).
- NVDA (Chrome ja Edge) ei erottele termiä ja määritelmää, vaan lukee ne yhtenä tekstinä, jos sisältönä käytetään
span-tagia. Komponentti lisää tyhjän välilyönnin erottamaan sanat, mutta ne luetaan yhtenä rivinä.
- NVDA:n (Chrome ja Edge) kohdistusindikaattori ei toimi oikein, jos listan sisältö muutetaan
span-tageiksi. Suosi div-rakennetta, jos HTML-elementtejä halutaan muuttaa esimerkiksi silloin kun listassa on vain yksi kohde.
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="md">
<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 palstoihin hyödyntämällä columns-proppia.
Käyttämällä useResizeObserver-hookkia voidaan määrittää palstojen määrä ruudunkoosta riippumatta.
() => {
const ref = useRef(null);
const [columns, setColumns] = useState(4);
const onResize = ({ width }) => {
const lg = width >= CONTAINER_WIDTH_LG.slice(0, -2);
const md = width >= CONTAINER_WIDTH_MD.slice(0, -2);
const sm = width >= CONTAINER_WIDTH_SM.slice(0, -2);
setColumns(lg ? 4 : md ? 3 : sm ? 2 : 1);
};
useResizeObserver(ref, { onResize, resizeMode: "width" });
return (
<div ref={ref}>
<DescriptionList columns={columns} hasLegacyColumns={false} 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>
</div>
);
};
Listan tuottaminen järjestetystä tiedosta
Listasisältö voidaan antaa komponentille myös järjestettynä tietona items-propin avulla.
<DescriptionList
stack
md={6}
sm={12}
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="sm" 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>