arowM / elm-neat-layout / Neat.Boundary

Module for building Boundary.

Core


type alias Boundary msg =
Neat.Internal.Boundary msg

A bounded View without gap.

Convert to/from View by setGap/setBoundary.

map : (a -> b) -> Boundary a -> Boundary b

empty : Boundary msg

An empty block.

In HTML terms, it generates an HTML element without content.

-- Exposed by `elm-community/html-extra`


import Html.Attributes exposing (type_, value)
import Html.Events.Extra exposing (onChange)
import Neat.Boundary as Boundary

input : Model -> Boundary msg
input model =
    Boundary.empty
        |> Boundary.setNodeName "input"
        |> Boundary.setAttributes
            [ type_ "text"
            , value model.input
            , onChange ChangeInputValue
            ]

Attributes

Functions to set arbitrary attributes. The following styles are not reflected by the style attribute or CSS files.

setMixin : Mixin msg -> Boundary msg -> Boundary msg

Append Mixin on boundaries.

setMixins : List (Mixin msg) -> Boundary msg -> Boundary msg

Same as setMixin but takes a list of Mixins.

setAttribute : Html.Attribute msg -> Boundary msg -> Boundary msg

Append Attribute on boundaries.

setAttributes : List (Html.Attribute msg) -> Boundary msg -> Boundary msg

Same as setAttribute but takes a list of Attributes.

setClass : String -> Boundary msg -> Boundary msg

Append class attribute.

setId : String -> Boundary msg -> Boundary msg

Append id attribute.

WAI-ARIA

setRole : String -> Boundary msg -> Boundary msg

Set "role" value for WAI-ARIA.

setAria : String -> String -> Boundary msg -> Boundary msg

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

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

setBoolAria : String -> Basics.Bool -> Boundary msg -> Boundary msg

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

i.e.,

Sizes

You can only use a limited kind of units. This may seem inconvenient, but it prevents you to build unmaintainable broken views.

Minimum width

The default minimum width is zero without enabling child overflow.

setMinWidthInBs : Basics.Float -> Boundary msg -> Boundary msg

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.

setMinWidthInEm : Basics.Float -> Boundary msg -> Boundary msg

Set the minimum width in em.

Represents the calculated font-size of the element.

setMinWidthInRem : Basics.Float -> Boundary msg -> Boundary msg

Set the minimum width in rem.

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

Minimum height

The default minimum height is zero without enabling child overflow.

setMinHeightInBs : Basics.Float -> Boundary msg -> Boundary msg

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.

setMinHeightInEm : Basics.Float -> Boundary msg -> Boundary msg

Set the minimum height in em.

Represents the calculated font-size of the element.

setMinHeightInRem : Basics.Float -> Boundary msg -> Boundary msg

Set the minimum height in rem.

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

Maximum width

The default value for maximum width is fit, which shrinks as much as its children do not overhang it.

setMaxWidthInBs : Basics.Float -> Boundary msg -> Boundary msg

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.

setMaxWidthInEm : Basics.Float -> Boundary msg -> Boundary msg

Set the maximum width in em.

Represents the calculated font-size of the element.

setMaxWidthInRem : Basics.Float -> Boundary msg -> Boundary msg

Set the maximum width in rem.

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

Maximum height

The default value for maximum height is fit, which shrinks as much as its children do not overhang it.

setMaxHeightInBs : Basics.Float -> Boundary msg -> Boundary msg

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.

setMaxHeightInEm : Basics.Float -> Boundary msg -> Boundary msg

Set the maximum height in em.

Represents the calculated font-size of the element.

setMaxHeightInRem : Basics.Float -> Boundary msg -> Boundary msg

Set the maximum height in rem.

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

Row

row : Row -> List (RowItem msg) -> Boundary msg

Align children horizontally.

center : Boundary msg -> Boundary msg

An alias for row with a centered element.

Config


type Row

defaultRow : Row

Default setting for rows.

disableWrap : Row -> Row

enableHScroll : Row -> Row


type RowItem 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 -> Boundary msg -> RowItem msg

Row item with stretched height.

topItem : String -> Boundary msg -> RowItem msg

Top-aligned item.

middleItem : String -> Boundary msg -> RowItem msg

Vertically centered item.

bottomItem : String -> Boundary msg -> RowItem msg

Bottom-aligned item.

grownRowItem : String -> Boundary msg -> RowItem msg

Row item with stretched height and width.

grownTopItem : String -> Boundary msg -> RowItem msg

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

grownMiddleItem : String -> Boundary msg -> RowItem msg

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

grownBottomItem : String -> Boundary msg -> RowItem msg

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

Column

column : Column -> List (ColumnItem msg) -> Boundary msg

Align children horizontally.

Config


type Column

defaultColumn : Column

Default setting for columns.

enableVScroll : Column -> Column

Enable vertical scroll.

setVerticalScroller : Boundary msg -> Boundary msg

Just for convenience.

setVerticalScroller boundary =
    column
        (defaultColumn
            |> enableVScroll
        )
        [ grownColumnItem "content" boundary
        ]


type ColumnItem 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 -> Boundary msg -> ColumnItem msg

Column item with stretched height.

leftItem : String -> Boundary msg -> ColumnItem msg

Left-aligned item.

centerItem : String -> Boundary msg -> ColumnItem msg

Horizontally centered item.

rightItem : String -> Boundary msg -> ColumnItem msg

Right-aligned item.

grownColumnItem : String -> Boundary msg -> ColumnItem msg

Column item with stretched height and width.

grownLeftItem : String -> Boundary msg -> ColumnItem msg

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

grownCenterItem : String -> Boundary msg -> ColumnItem msg

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

grownRightItem : String -> Boundary msg -> ColumnItem msg

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

Overlay

putLayer : String -> ( Layer, Boundary (Layered msg) ) -> Boundary msg -> Boundary msg

Put overlay layer on the parent view.


type alias Layer =
{ top : Basics.Float
, bottom : Basics.Float
, left : Basics.Float
, right : Basics.Float
, priority : Maybe Basics.Int 
}

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 : Layer

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


type alias Layered msg =
Neat.Internal.Layered msg

mapLayered : (a -> b) -> Boundary (Layered a) -> Boundary (Layered b)

toLayered : Boundary msg -> Boundary (Layered msg)

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

Handle Conditions

none : Boundary 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 -> Boundary msg -> Boundary msg

Insert a view only when a condition is met.

unless : Basics.Bool -> Boundary msg -> Boundary msg

Insert a view unless a condition is met.

withMaybe : Maybe a -> (a -> Boundary msg) -> Boundary msg

Insert a view only if the given value is Just.

Convert to View

setGap : Neat.Internal.IsGap gap -> Boundary msg -> Neat.Internal.View gap msg

Set Gap around a view.

Lower level functions for HTML

setNodeName : String -> Boundary msg -> Boundary msg

Set HTML node name on Boundary.