Esikatselu
<Text>Lorem ipsum dolor sit amet.</Text>
Käyttötarkoitus
Komponenttia käytetään Kelan tai Kannan typografisen tyylin mukaisen tekstisisällön esittämiseen. Tarkemmat ohjeet löytyvät KDS:n typografiaohjeista.
- Käytä sisältötekstin luomiseen esim. artikkeleissa.
- Älä käytä komponenttien lisätietona tai virheilmoituksena.
Esimerkit
Teksti
<Text>
Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja asiakaskokemuksen
suunnitteluun.
</Text>
Tekstin koon muuttaminen
Fonttikokoa voi muuttaa käyttämällä komponentin size-attribuuttia. Käytä otsikkojen näyttämiseen Heading-komponenttia.
<>
<Text size="lg">
Esimerkki <strong>lg</strong>-kokoisesta tekstistä. Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan
ja Kannan käyttöliittymien ja asiakaskokemuksen suunnitteluun.
</Text>
<Text>
Esimerkki <strong>oletus</strong>-kokoisesta tekstistä. Kela Design System (KDS) on kokoelma ohjeita ja resursseja
Kelan ja Kannan käyttöliittymien ja asiakaskokemuksen suunnitteluun.
</Text>
<Text size="sm">
Esimerkki <strong>sm</strong>-kokoisesta tekstistä. Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan
ja Kannan käyttöliittymien ja asiakaskokemuksen suunnitteluun.
</Text>
</>
Tekstin lyhentäminen
Näytä teksti ensisijaisesti kokonaan ja salli sen rivittyminen tarvittaessa.
Jos tekstiä on kuitenkin tarve lyhentää, siihen voi käyttää TextTruncate-komponenttia. Komponentti mahdollistaa lyhentämisen muutamalla eri tavalla. Varmista, ettei lyhentäminen piilota käyttäjälle olennaista tietoa.
Ruudunlukijoille annettavan tekstin voi antaa accessibleText-propilla tai käyttötilanteesta riippuen aria-label-attribuutilla (jos lyhennettävä teksti on esimerkiksi painikkeen tai linkin sisällä).
Tekstin lyhentäminen käytettävissä olevan tilan perusteella
Tekstiä lyhennetään yhdellä rivillä käytettävissä olevan tilan mukaisesti. Koko teksti on luettavissa ruudunlukijalla.
<Text>
<TextTruncate>
Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja asiakaskokemuksen
suunnitteluun.
</TextTruncate>
</Text>
Tekstin lyhentäminen merkkimäärän perusteella
Tekstiä lyhennetään annetun merkkimäärän mukaisesti. Sallii tekstin rivittymisen. Teksti ei ole oletuksena kokonaan luettavissa ruudunlukijoilla.
<Text>
<TextTruncate maxCharacters={100}>
Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja Kannan käyttöliittymien ja asiakaskokemuksen
suunnitteluun.
</TextTruncate>
</Text>
Tekstin lyhentäminen rivimäärän perusteella
Tekstiä lyhennetään annetun rivimäärän mukaisesti (vaihtoehdot 1-6 riviä). Sallii tekstin rivittymisen. Koko teksti on luettavissa ruudunlukijalla.
<>
<Text>
<TextTruncate maxLines={1}>
Teksti on maksimissaan yhden rivin mittainen. Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja
Kannan käyttöliittymien ja asiakaskokemuksen suunnitteluun.
</TextTruncate>
</Text>
<Text>
<TextTruncate maxLines={2}>
Teksti on maksimissaan kahden rivin mittainen. Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja
Kannan käyttöliittymien ja asiakaskokemuksen suunnitteluun.
</TextTruncate>
</Text>
<Text>
<TextTruncate maxLines={3}>
Teksti on maksimissaan kolmen rivin mittainen. Kela Design System (KDS) on kokoelma ohjeita ja resursseja Kelan ja
Kannan käyttöliittymien ja asiakaskokemuksen suunnitteluun.
</TextTruncate>
</Text>
</>
Tekstin lyhentäminen keskeltä
Tekstiä lyhennetään annetun merkkimäärän mukaisesti sen keskeltä. Sallii tekstin rivittymisen. Teksti ei ole oletuksena kokonaan luettavissa ruudunlukijoilla. Tekstin lyhentäminen tapahtuu startCharacters- ja endCharacters-propeilla.
Esimerkkeihin on yhdistetty myös Tooltip-komponentti näyttämään koko tekstin.
<Text className="kds-inline-block" mb={0}>
<Tooltip content="Esimerkki pitkän tiedostonimen lyhentämisestä.pdf" placement="top" isVisualOnly usePortal>
<TextTruncate
accessibleText="Esimerkki pitkän tiedostonimen lyhentämisestä.pdf"
endCharacters={6}
startCharacters={6}
truncateAt="middle"
>
Esimerkki pitkän tiedostonimen lyhentämisestä.pdf
</TextTruncate>
</Tooltip>
</Text>
Propit mahdollistavat myös dynaamisen lyhentämisen esimerkiksi ympäröivän elementin leveyden perusteella. Alla on useResizeObserver-hookkia hyödyntävä esimerkkitoteutus, jossa teksti katkaistaan tilan vähentyessä. Esimerkki huomioi myös zoom-tason muutokset.
function TextMiddleTruncationExample() {
const text = "Esimerkki pitkän tiedostonimen lyhentämisestä.pdf";
const [charWidth, setCharWidth] = useState(10);
const [ellipsisWidth, setEllipsisWidth] = useState(10);
const ref = useRef(null);
const textRef = useRef(null);
const { width } = useResizeObserver(ref, { resizeMode: "width" });
useEffect(() => {
const frame = requestAnimationFrame(() => {
const element = textRef.current;
if (!element) return;
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
if (!context) return;
context.font = window.getComputedStyle(element).font;
const characterCount = Array.from(text).length;
const measuredCharWidth = Math.ceil(context.measureText(text).width / characterCount);
if (measuredCharWidth > 0) {
setCharWidth(measuredCharWidth);
setEllipsisWidth(context.measureText("…").width);
}
});
return () => cancelAnimationFrame(frame);
}, [width]);
const characterBudget = Math.max(2, Math.floor(((width ?? 0) - ellipsisWidth) / charWidth));
const startCharacters = Math.floor(characterBudget * 0.6);
const endCharacters = characterBudget - startCharacters;
return (
<div ref={ref}>
<Tooltip content={text} placement="top" isVisualOnly usePortal>
<Link aria-label={text} className="kds-inline-block kds-whitespace-nowrap" href="#">
<TextTruncate
endCharacters={endCharacters}
ref={textRef}
startCharacters={startCharacters}
truncateAt="middle"
>
{text}
</TextTruncate>
</Link>
</Tooltip>
</div>
);
}