A bounded View without gap.

Convert to/from View by setGap/setBoundary.

An empty block.

Append Mixin on boundaries.

Same as setMixin but takes a list of Mixins.

Append Attribute on boundaries.

Same as setAttribute but takes a list of Attributes.

Append class attribute.

Append id attribute.

Set "role" value for WAI-ARIA.

Set "aria-*" value for WAI-ARIA.

e.g., setAria "required" "true" stands for "aria-required" is "true".

Set boolean "aria-*" value for WAI-ARIA.

i.e.,

• setBoolAria name True is equal to setAria name "true"
• setBoolAria name False is equal to setAria name "false"

Set the minimum width as a percentage of the base size. e.g., setMinWidthInBs 100 set the minimum width the same length as the base size.

Set the minimum width in em.

Represents the calculated font-size of the element.

Set the minimum width in rem.

Represents the font-size of the root element (typically <html>).

Set the minimum height as a percentage of the base size. e.g., setMinHeightInBs 100 set the minimum height the same length as the base size.

Set the minimum height in em.

Represents the calculated font-size of the element.

Set the minimum height in rem.

Represents the font-size of the root element (typically <html>).

Set the maximum width as a percentage of the base size. e.g., setMaxWidthInBs 100 set the maximum width the same length as the base size.

Set the maximum width in em.

Represents the calculated font-size of the element.

Set the maximum width in rem.

Represents the font-size of the root element (typically <html>).

Set the maximum height as a percentage of the base size. e.g., setMaxHeightInBs 100 set the maximum height the same length as the base size.

Set the maximum height in em.

Represents the calculated font-size of the element.

Set the maximum height in rem.

Represents the font-size of the root element (typically <html>).

Put overlay layer on the parent view.

Set the position of each edge of the overlay layer as a percentage of the base view.

The priority field specifies how much the element is superimposed on the front side in preference to other elements. If given Nothing, it is set equivalent priority comparing to other elements.

defaultLayer
--> { top = 0
--> , bottom = 0
--> , left = 0
--> , right = 0
--> , priority = Nothing
--> }

Convert Boundary for putLayer. The Boundary (Layered msg) ignores pointer events; this feature is especially helpfull for realizing popups with clickable background.

Generates no HTML nodes. This is useful for handling elements which only appears under certain conditions.

when p v =
    if p then
        v


    else
        none

Insert a view only when a condition is met.

Insert a view unless a condition is met.

Insert a view only if the given value is Just.

Set Gap around a view.

Set HTML node name on Boundary.

Build HTML tag. When you need to build a HTML tag with its children, html will help you.

animalSelect : Maybe Animal -> Boundary msg
animalSelect animal =
    Boundary.html "select"
        [ animalOption Nothing animal
        , animalOption (Just Goat) animal
        , animalOption (Just Dog) animal
        , animalOption (Just Cat) animal
        ]
        |> Boundary.setMixin
            (Mixin.Events.onChange ChangeAnimal)

A special Boundary which only has text content. For example, you can use htmlNode to build option tag.

animalOption :
    Maybe Animal
    -> Maybe Animal
    -> ( String, Boundary msg )
animalOption animal selected =
    let
        key =
            animal
                |> Maybe.map Animal.toValue
                |> Maybe.withDefault "default"


        disabled =
            animal == Nothing


        selected =
            animal == selected


        value =
            animal
                |> Maybe.map Animal.toValue
                |> Maybe.withDefault ""


        label =
            animal
                |> Maybe.map Animal.toLabel
                |> Maybe.withDefault "-- Select one --"
    in
    ( key
    , Boundary.htmlNode "option" label
        |> Boundary.setAttributes
            [ Attributes.disabled disabled
            , Attributes.selected selected
            , Attributes.value value
            ]
    )

⚠ DEPRECATED ⚠

Generates a boundary view that displays a text.

It is an alias for \str -> fromTexts [ Neat.Text.fromString str ].

Note that textBlock "" is equivalent to empty.

⚠ DEPRECATED ⚠

Build a text block from Texts.

Unlike a Neat.View.row consist of textBlocks, the fromTexts generates a single coherent sentence.

For example, the View built by the following code will be broken as follows:

Neat.View.row
    [ textBlock "foo bar baz"
        |> setGap myGap
        |> Neat.View.rowItem "elem1"
    , textBlock "a b c d e f"
        |> setGap myGap
        |> Neat.View.rowItem "elem2"
    ]


| foo bar | a b c d |
| baz     | e f     |

In contrast, the View built by the following code will be broken as follows:

import Neat.Text as Text


fromTexts
    [ Text.fromString "foo bar baz"
    , Text.fromString "a b c d e f"
    ]


| foo bar baz a b c |
| d e f             |

The gap height between lines will be the same as the gap height set with the setGap function.