supermacro / elm-antd / Ant.Typography.Text

Create decorated text values

Create a customizeable Text component


type Text

A 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

Customize a Text component


type TextType
    = Primary
    | Link Url LinkTarget
    | Secondary
    | Warning
    | Danger

What kind of text is it?


type LinkTarget
    = Blank
    | Self
    | Parent
    | Top

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