Text

React API

Text

• align

  CSS text-align

  Tyyppi: "center" | "left" | "right"

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• color

  Tekstin väri

  Tyyppi: "body" | "primary" | "brand-primary" | "success" | "warning" | "danger" | "light" | "muted" | "white" | "dark"

• darkColor

  Tekstin väri tummassa teemassa (jos tekstin väri on tarve määritellä erikseen).

  Tyyppi: "body" | "light" | "white" | "dark"

• mb

  Tekstin alapuolelle asetettava välistys.

  Tyyppi: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | "px"

• mt

  Tekstin yläpuolelle asetettava välistys.

  Tyyppi: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | "px"

• ref

  Komponentin ref, joka tyypittyy renderöitävän HTML-elementin mukaan.

  Tyyppi: any

• size

  Tekstin koko

  Tyyppi: "base" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

• transform

  CSS text-transform

  Tyyppi: "uppercase" | "lowercase" | "capitalize" | "normal-case"

TextTruncate

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• expandable

  Avattava teksti

  Tyyppi: boolean

  Oletusarvo: true

• onClick

  Lyhennyksen päätteen onClick-funktio

  Tyyppi: ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | ((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)

• ref

  Komponentin ref, joka tyypittyy renderöitävän HTML-elementin mukaan.

  Tyyppi: any

• suffix

  Lyhennetyn tekstin avaava pääte

  Tyyppi: string

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä arvo testausta varten.

  Tyyppi: string

• tooltip

  Teksti avataan tooltipin avulla Koko teksti näytetään tooltipin avulla

  Tyyppi: boolean

  Oletusarvo: false