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) ]
Note: Don't forget to import "Fira Sans" family, with the weights: 400, 500, 600 and 700.
UI.Internal.Text.Text
The Text
type is used for describing the component for later rendering.
body1 : String -> Text
The biggest size for paragraphs.
body2 : String -> Text
The smallest size for paragraphs.
heading1 : String -> Text
The biggest title size.
heading2 : String -> Text
A size for titles.
heading3 : String -> Text
A size for titles.
heading4 : String -> Text
A size for titles.
heading5 : String -> Text
A size for titles.
heading6 : String -> Text
A size for titles.
subtitle1 : String -> Text
The biggest size for subtitles.
subtitle2 : String -> Text
The smallest size for subtitles.
caption : String -> Text
For writing captions.
overline : String -> Text
For writing labels.
multiline : (String -> Text) -> List String -> Text
Combines lines of text with the same styling.
[ "First line of text."
, "Second line."
, "Last line."
]
|> Text.multiline Text.body1
|> Text.renderElement renderConfig
combination : List Text -> Text
Combines 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 renderConfig
withColor : UI.Palette.Color -> Text -> Text
Text 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 renderConfig
withOverflow : UI.Internal.Text.TextOverflow -> Text -> Text
Determines 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) ]
ellipsize : UI.Internal.Text.TextOverflow
Truncates the text and adds the ellipsis.
ellipsizeWithTooltip : UI.Internal.Text.TextOverflow
Truncates the text, adds the ellipsis and displays a tooltip with the whole content.
wrap : UI.Internal.Text.TextOverflow
Lets the text break lines to prevent overflow. Default behavior.
renderElement : UI.RenderConfig.RenderConfig -> Text -> Element msg
End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.