PackagesReroutesAboutlamdera.com

arowM/elm-neat-layout/2.0.1

NOTE: the latest version is 4.0.5

READMEAboutVersionsSourceModules

Neat

Main module for elm-neat-layout.

Core

type alias View gap msg =
View gap msg

Html alternative type.

type NoGap

Primitive type representing no gap

For custom gaps, see Custom gaps.

Browser.* alternatives

{ init : model
, view : model -> View NoGap msg
, update : msg -> model -> model
, renderer : Renderer
}
-> Program () model msg

Alternative to Browser.sandbox.

This inserts following CSS.

<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}
[data-elm-neat-layout~=flex] {
  display:-ms-flexbox;
  display:flex
}
</style>
type alias Renderer =
{ baseGapSize : String }

Settings for rendering View.

The baseGapSize is base gap size in <length> CSS data type. All gap sizes are determined relative to this value. e.g., "16px", "1.2rem", ... The "em" unit is not recommended because it varies with parent node font-size of each gap.

defaultRenderer : Renderer
defaultRenderer =
    { baseGapSize = "1rem"
    }
{ init : flags -> ( model, Cmd msg )
, view : model -> View NoGap msg
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Sub msg
, renderer : model -> Renderer
}
-> Program flags model msg

Alternative to Browser.element. This also inserts following style tag.

<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}
[data-elm-neat-layout~=flex] {
  display:-ms-flexbox;
  display:flex
}
</style>
{ init : flags -> ( model, Cmd msg )
, view : model -> Document msg
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Sub msg
, renderer : model -> Renderer
}
-> Program flags model msg

Alternative to Browser.document. This also inserts following style tag.

<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}
[data-elm-neat-layout~=flex] {
  display:-ms-flexbox;
  display:flex
}
</style>
type alias Document msg =
{ title : String
, body : View NoGap msg
}

Alternative to Browser.Document.

{ init : flags -> Url -> Key -> ( model, Cmd msg )
, view : model -> Document msg
, update : msg -> model -> ( model, Cmd msg )
, subscriptions : model -> Sub msg
, onUrlRequest : UrlRequest -> msg
, onUrlChange : Url -> msg
, renderer : model -> Renderer
}
-> Program flags model msg

Alternative to Browser.application. This also inserts following style tag.

<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}
[data-elm-neat-layout~=flex]{
    display:-ms-flexbox;
    display:flex
}
</style>

Constructors

(List (Attribute msg) -> List (Html msg) -> Html msg)
-> List (Mixin msg)
-> List (View g msg)
-> View g msg

Lift Html nodes into View.

import Html exposing (div)
import Mixin exposing (Mixin)
import Neat exposing (View)
import Neat.Gap as Gap exposing (NoGap)


view1 : View NoGap msg
view1 =
    Neat.div
        []
        [ Neat.text "view1"
        ]


view2 : View NoGap msg
view2 =
    Neat.div
        []
        [ Neat.text "view2"
        ]


composed : View NoGap msg
composed =
    lift div
        [ Mixin.class "parent"
        ]
        [ view1
        , view2
        ]
textBlock : String -> View NoGap msg

Create a text block.

textBlock "foo" is equivalent to Html.div [] [ Html.text "foo" ] in Html world.

textBlock =
    textNode Html.div
(List (Attribute msg) -> List (Html msg) -> Html msg)
-> String
-> View NoGap msg

Create a View which only contains a text node.

textNode Html.option "Item1" is equivalent to Html.option [] [ Html.text "Item1" ] in Html world.

none : View g a

View version of Html.text "".

empty : View NoGap a

An alias for div [] [].

(List (Attribute msg) -> List (Html msg) -> Html msg)
-> View NoGap msg

An alias for \node -> lift node [] [].

Special nodes

input : View g msg

View version of Html.input. Differ from lift Html.input [] [], it can accept "padding" style property.

textarea : View g msg

View version of Html.textarea. Differ from lift Html.textarea [] [], it can accept "padding" style property.

select : List (Mixin msg) -> List (View g msg) -> View g msg

View version of Html.select. Differ from lift Html.select, it can accept "padding" style property.

Modifiers

setMixin : Mixin msg -> View NoGap msg -> View NoGap msg
setMixins : List (Mixin msg) -> View NoGap msg -> View NoGap msg
setAttribute : Attribute msg -> View NoGap msg -> View NoGap msg
setAttributes : List (Attribute msg) -> View NoGap msg -> View NoGap msg
setLayout : Layout msg -> View g msg -> View g msg

Handle cases

when : Bool -> View p msg -> View p msg

Insert a View only when a condition is met.

unless : Bool -> View p msg -> View p msg

Insert a View unless a condition is met.

Keyed

String
-> List (Mixin msg)
-> List ( String, View g msg )
-> View g msg

Custom gaps

You can use custom gaps just by declaring their types and IsGap values.

e.g.,

module MyGap exposing
    ( ButtonGroup
    , buttonGroup
    )


import Neat exposing (IsGap)


type ButtonGroup
    = ButtonGroup


buttonGroup : IsGap ButtonGroup
buttonGroup =
    IsGap
        { width = 0.6
        , height = 0.6
        }
type IsGap p
= IsGap
{ width : Float
, height : Float
}

Information about your custom gaps.

  • width : gap width relative to baseGapSize of Renderer
  • height : gap height relative to baseGapSize of Renderer

The Renderer value above is given to sandbox, element, document, application.

e.g., When baseGapSize = "2rem" is passed to sandbox, IsGap { width = 1.2, height = 2 } becomes gap with "2.4rem" width and "4rem" height.

Convert between gaps

fromNoGap : IsGap g -> View NoGap msg -> View g msg
expand : IsGap g1 -> IsGap g2 -> View g1 msg -> View g2 msg

Expand gap from g1 to g2. Both the width and the height of g2 is supposed to be greater than g1.

setBoundary : IsGap g -> View g msg -> View NoGap msg

Wrap a view with boundary without gap. Alias for setBoundary defaultBoundary.

setBoundaryWith : Boundary -> IsGap g -> View g msg -> View NoGap msg

Set boundary to convert into NoGap. Alias for setBoundaryWithMap identity.

setBoundaryWithMap : (a -> b) -> Boundary -> IsGap g -> View g a -> View NoGap b

Set boundary to convert into NoGap. In addition, setBoundaryWithMap can convert msg type of a View.

(The elm-neat-layout does not have map function. Use setBoundaryWithMap, Layout.Row.rowWithMap, and Layout.Column.columnWithMap, instead.)

Accessibility

setRole : String -> View g msg -> View g msg

Set "role" value for WAI-ARIA.

setAria : String -> String -> View g msg -> View g msg

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

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

setBoolAria : String -> Bool -> View g msg -> View g msg

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"

Lower level functions for performance optimization

These are lower level functions, so all you need would be Neat.Layout.Row.optimized and Neat.Layout.Column.optimized.

Do not worry even if you cannot understand how to use these functions.

(x -> String)
-> (x -> Renderer -> Html (Protected g msg))
-> String
-> List (Mixin msg)
-> List x
-> View g msg
v1 : View g msg
v1 =
    Debug.todo "v1"


v2 : View g msg
v2 =
    Debug.todo "v2"


child : Int -> View g msg
child _ =
    Debug.todo "child"


child_ : Int -> Html (Protected g msg)
child_ =
    toProtected << child


v : List Int -> View g msg
v =
    optimized
        String.fromInt
        (lazy child_)
        "div"
        []
toProtected : View g a -> Renderer -> Html (Protected g a)

This is supposed to be used in order to make Html.Lazy.lazyN work. See optimized for real usage.

type Protected g a

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera