arowM / elm-neat-layout / Neat.View

Module for building View.

Core


type alias View gap msg =
Neat.Internal.View gap msg

A gap-sensible Html msg alternative.

map : (a -> b) -> View gap a -> View gap b

Inline Flows

textBlock : Neat.Internal.IsGap gap -> String -> View gap msg

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.

flows : Neat.Internal.IsGap gap -> Flows -> List (Neat.Flow.Flow msg) -> View gap msg

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.

Config


type Flows

Setting for displaying flow contents.

defaultFlows : Flows

Default setting for displaying flow contents.

disableTextWrap : Flows -> Flows

Disable the text content to be wrapped.

enableEllipsis : Flows -> Flows

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

This also disables the text content to be wrapped.

preserveWhiteSpace : Flows -> Flows

Disable collapsing of spaces, tabs, and new lines.

pushCenter : Flows -> Flows

Push the flow content to the center.

pushEnd : Flows -> Flows

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

Row

row : Row -> List (RowItem gap msg) -> View gap msg

Align children horizontally.

center : View gap msg -> View gap msg

An alias for row with a centered element.

Config


type alias Row =
Neat.Internal.Row

defaultRow : Row

Default setting for rows.

disableWrap : Row -> Row


type alias RowItem gap msg =
Neat.Internal.RowItem gap msg

alignCenter : Row -> Row

alignRight : Row -> Row

Item

Each function has the String argument, which helps make the DOM modifications more efficient. It must be unique among items in the same row.

rowItem : String -> View gap msg -> RowItem gap msg

Row item with stretched height.

topItem : String -> View gap msg -> RowItem gap msg

Top-aligned item.

middleItem : String -> View gap msg -> RowItem gap msg

Vertically centered item.

bottomItem : String -> View gap msg -> RowItem gap msg

Bottom-aligned item.

grownRowItem : String -> View gap msg -> RowItem gap msg

Row item with stretched height and width.

grownTopItem : String -> View gap msg -> RowItem gap msg

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

grownMiddleItem : String -> View gap msg -> RowItem gap msg

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

grownBottomItem : String -> View gap msg -> RowItem gap msg

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

Column

column : Column -> List (ColumnItem gap msg) -> View gap msg

Align children vertically.

Config


type alias Column =
Neat.Internal.Column

defaultColumn : Column

Default setting for columns.


type alias ColumnItem gap msg =
Neat.Internal.ColumnItem gap msg

alignMiddle : Column -> Column

alignBottom : Column -> Column

Item

Each function has the String argument, which helps make the DOM modifications more efficient. It must be unique among items in the same row.

columnItem : String -> View gap msg -> ColumnItem gap msg

Column item with stretched width.

leftItem : String -> View gap msg -> ColumnItem gap msg

Left-aligned item.

centerItem : String -> View gap msg -> ColumnItem gap msg

Horizontally centered item.

rightItem : String -> View gap msg -> ColumnItem gap msg

Right-aligned item.

grownColumnItem : String -> View gap msg -> ColumnItem gap msg

Column item with stretched width and height.

grownLeftItem : String -> View gap msg -> ColumnItem gap msg

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

grownCenterItem : String -> View gap msg -> ColumnItem gap msg

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

grownRightItem : String -> View gap msg -> ColumnItem gap msg

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

Handle Conditions

none : View g a

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

when : Basics.Bool -> View gap msg -> View gap msg

Insert a view only when a condition is met.

unless : Basics.Bool -> View gap msg -> View gap msg

Insert a view unless a condition is met.

withMaybe : Maybe a -> (a -> View gap msg) -> View gap msg

Insert a view only if the given value is Just.

Expand Gaps

expandGap : Neat.Internal.IsGap g2 -> View g1 msg -> View g2 msg

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"!

Convert to Boundary

setBoundary : View gap msg -> Neat.Internal.Boundary msg

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

Lower level functions for HTML

setNodeName : String -> View gap msg -> View gap msg

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

setRole : String -> View gap msg -> View gap msg

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.

setAria : String -> String -> View gap msg -> View gap msg

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".

setBoolAria : String -> Basics.Bool -> View gap msg -> View gap msg

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

i.e.,