A gap-sensible Html msg alternative.

Generates a view that displays a text string.

The first argument specifies the line height, which is the size of the gap between text lines when the given text is wrapped.

It is an alias for \str -> flows gap defaultFlows [ Neat.Flow.fromString str ].

Note that textBlock gap "" does not generate anything.

Generates a view that displays flow contents.

Unlike a row consist of textBlocks, the fromFlows generates a single coherent sentence.

Say you have the following code:

row
    defaultRow
    [ textBlock myLineHeight
        "foo bar baz"
    , textBlock myLineHeight
        "a b c d e f"
    ]

The resulting View will be newlined as follows:

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

In contrast, the View generated by the following code behaves a bit differently:

import Neat.Flow as Flow


fromFlows
    [ Flow.text "foo bar baz"
    , Flow.text "a b c d e f"
    ]

The resulting View will be newlined as follows:

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

Note that fromFlows gap [] does not generate anything.

Setting for displaying flow contents.

Default setting for displaying flow contents.

Disable the text content to be wrapped.

Display ellipsis (…, U+2026 HORIZONTAL ELLIPSIS) to represent clipped text when the flow content overflows.

This also disables the text content to be wrapped.

Disable collapsing of spaces, tabs, and new lines.

Push the flow content to the center.

Push the flow content to the end. (Right if direction is ltr, left if direction is rtl.)

Align children horizontally.

An alias for row with a centered element.

Default setting for rows.

• HTML node name: "div"
• horizontal alignment: left
• wrapping: enabled
• role: no role
• ARIA attributes: no attributes

Row item with stretched height.

Top-aligned item.

Vertically centered item.

Bottom-aligned item.

Row item with stretched height and width.

Top-aligned item which grows its width as much as possible.

Vertically centered item which grows its width as much as possible.

Bottom-aligned item which grows its width as much as possible.

Align children vertically.

Default setting for columns.

• HTML node name: "div"
• vertical alignment: top

Column item with stretched width.

Left-aligned item.

Horizontally centered item.

Right-aligned item.

Column item with stretched width and height.

Left-aligned item which grows its height as much as possible.

Horizontally centered item which grows its height as much as possible.

Right-aligned item which grows its height as much as possible.

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.

Expand View Gap to a wider one.

You can use expandGap to "shrink" Gaps, but we do not recommend doing so. Such layouts must not be "neat"!

Wrap a view with boundary. This is the only way to reset view gaps.

Overrides the node name of the outermost HTML element.

For Views created with Neat.Boundary.setGap, overwrite the node name of the original Boundary:

import Neat.Boundary as Boundary exposing (Boundary)
import Neat.View as View exposing (View)


sampleBoundary : Boundary msg
sampleBoundary =
    Debug.todo "Sample"


sampleView : View SampleGap msg
sampleView =
    sampleBoundary
        |> Boundary.setGap sampleGap
        |> View.setNodeName "section"


-- `sampleView2` is equivalent to `sampleView`.
sampleView2 : View SampleGap msg
sampleView2 =
    sampleBoundary
        |> Boundary.setNodeName "section"
        |> Boundary.setGap sampleGap

Set the WAI-ARIA role attribute value of the outermost HTML element.

For Views created with Neat.Boundary.setGap, append the attribute to the original Boundary.

Set the WAI-ARIA aria-* attribute value of the outermost HTML element.

For Views created with Neat.Boundary.setGap, append the attribute to the original Boundary.

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

Helper function to set boolean WAI-ARIA aria-* attribute value of the outermost HTML element.

i.e.,

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