lenards / elm-ui-patternfly / PF4.Title

A title component serving as a semantic header element

https://www.patternfly.org/v4/components/title

Definition


type Title msg

Opaque Title element that can produce msg messages

Constructor function

title : String -> Title msg

Constructs a Title element without any attributes

The default Size is Medium 16, use the various sizing configuration with functions to alter it.

Configuration function(s)

withRgb : Basics.Int -> Basics.Int -> Basics.Int -> Title msg -> Title msg

Changes the color of the text

Modifier functions, HTML semantics

asH1 : Title msg -> Title msg

Alters semantics to appear as a Element.Region.heading 1

asH2 : Title msg -> Title msg

Alters semantics to appear as a Element.Region.heading 2

asH3 : Title msg -> Title msg

Alters semantics to appear as a Element.Region.heading 3

asH4 : Title msg -> Title msg

Alters semantics to appear as a Element.Region.heading 4

asH5 : Title msg -> Title msg

Alters semantics to appear as a Element.Region.heading 5

asH6 : Title msg -> Title msg

Alters semantics to appear as a Element.Region.heading 6

Modifier functions, text sizing


type TextSize

Defined a vertical rhythm of text sizing

We may want to have some approach to doing a scaled definition of these sizes from a relative measure, a la rem units in CSS.

Borrowed from the elm-ui documentation:

scaled : Int -> Float
scaled =
    Element.modular 16 1.25

So we'd allow you to pass in a defined "hierarchy" that would map the TextSize values to the respective Int value.

withSizeMd : Title msg -> Title msg

Configure text size to Md, or medium

withSizeLg : Title msg -> Title msg

Configure text size to Lg, or large

withSizeXl : Title msg -> Title msg

Configure text size to XL

withSize2xl : Title msg -> Title msg

Configure text size to 2XL

withSize3xl : Title msg -> Title msg

Configure text size to 3XL

withSize4xl : Title msg -> Title msg

Configure text size to 4XL

"Escape Hatch" for adding Element.Attribute msg

withExtraAttributes : List (Element.Attribute msg) -> Title msg -> Title msg

Adds a list of Element.Attributes to the element

Rendering element

toMarkup : Title msg -> Element msg

Given the custom type representation, renders as an Element msg.