UI.Text is a component to specify how text to display text. It applies font size, weight, letter-spacing, and color.
We discourage the usage of Element.text and recommend you to pursuie always using this one instead.
A text can be created and rendered as in the following pipeline:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|> Text.body1
|> Text.withColor
(Palette.color tonePrimary brightnessDarkest)
|> Text.withOverflow ellipsize
|> Text.renderElement renderConfig
|> Element.el [ Element.width (px 200) ]The biggest size for paragraphs.
The smallest size for paragraphs.
The biggest title size.
A size for titles.
A size for titles.
A size for titles.
A size for titles.
A size for titles.
The biggest size for subtitles.
The smallest size for subtitles.
For writing captions.
For writing labels.
Combines lines of text with the same styling.
[ "First line of text."
, "Second line."
, "Last line."
]
|> Text.multiline Text.body1
|> Text.renderElement renderConfigCombines lines of text with the different styling.
[ Text.heading6 "First line of text."
, Text.body1 "Second line."
, Text.caption "Last line."
]
|> Text.combination
|> Text.renderElement renderConfigText colors can variate to varite context or contrast with a background.
See Palette.color and Palette.setContrasting for how to compose a valid color value.
"Action completed with success!"
|> Text.body1
|> Text.withColor
(Palette.color Palette.toneSuccess Palette.brightnessMiddle)
|> Text.renderElement renderConfigDetermines how the text overflow is handled.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|> Text.heading3
|> Text.withOverflow ellipsize
|> Text.renderElement renderConfig
|> Element.el [ Element.width (px 42) ]Truncates the text and adds the ellipsis.
Truncates the text, adds the ellipsis and displays a tooltip with the whole content.
Lets the text break lines to prevent overflow. Default behavior.
End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.
The
Texttype is used for describing the component for later rendering.