Create decorated text values
Text
componentA text value
text : String -> Text
Create a text value
By default the text looks just like any regular text. To decorate it, you need to apply one or more of the below options.
text "hello, world!"
|> withType Warning
|> underlined True
|> strong
|> toHtml
Text
componentWhat kind of text is it?
Specifies the 'target' html attribute for anchor elements
More info: https://www.w3schools.com/tags/att_a_target.asp
withType : TextType -> Text -> Text
Change the text's type. This allows you to create anchor links as well, see second example.
text "Elm"
|> withType Secondary
|> toHtml
text "forgot password?"
|> withType (Link "https://myapp.com/forgot-password" Blank)
|> toHtml
The second argument to Link
is a LinkTarget
.
code : Text -> Text
Turn your Text value into a styled in-line code block
text "<h1>I LOVE CATS</h1>"
|> code
|> toHtml
keyboard : Text -> Text
Turn your Text value into a styled button-looking block (in-line)
text "CMD"
|> keyboard
|> toHtml
strong : Text -> Text
Set your Text element as bold
text "look at me"
|> strong
|> toHtml
disabled : Basics.Bool -> Text -> Text
Set your Text element as disabled (the cursor icon changes)
text "can't touch this'"
|> disabled True
|> toHtml
underlined : Basics.Bool -> Text -> Text
Add an underline to your text
text "this is important"
|> underlined True
|> toHtml
lineThrough : Basics.Bool -> Text -> Text
Set a striked line through your Text element
text "forget about this"
|> lineThrough True
|> toHtml
highlighted : Basics.Bool -> Text -> Text
Style the Text as highlighted
text "super important"
|> highlighted True
|> toHtml
toHtml : Text -> Html msg
Render your Text node into plain old Html msg
listToHtml : List Text -> Html msg
Render a list of Text elements into a span