Neat.Flow

You will use this module for two main purposes:

To add attributes or styles within a series of strings.

import Html.Attributes exposing (class, href)
import Neat.Flow as Flow
import Neat.View as View


sample : View SampleGap msg
sample =
    View.fromFlows sampleGap
        [ Flow.fromString "Please "
        , Flow.fromString "contact us"
            |> Flow.setNodeName "a"
            |> Flow.setAttribute
                (href "https://example.com/contact")
        , Flow.fromString " if you receive this "
        , Flow.fromString "error message"
            |> Flow.setAttribute (class "error")
        , Flow.fromString " multiple times."
        ]


-- <div>Please <a href="https://example.com/contact">contact us</a> if you receive this <span class="error">error message</span> multiple times.</div>

To generate HTML elements that are allowed to contain only flow content.

import Html.Attributes exposing (attribute, selected, value)
import Html.Events as Events
import Neat.Boundary as Boundary
import Neat.Flow as Flow
import Neat.View as View


sampleSelect : Model -> Boundary Msg
sampleSelect model =
    View.fromFlows sampleGap
        [ Flow.fromString "-- Select one --"
            |> Flow.setNodeName "option"
            |> Flow.setAttributes
                [ attribute "value" ""
                , selected <| model.selected == ""
                ]
        , Flow.fromString "Goat"
            |> Flow.setNodeName "option"
            |> Flow.setAttributes
                [ attribute "value" "goat"
                , selected <| model.selected == "goat"
                ]
        , Flow.fromString "Dog"
            |> Flow.setNodeName "option"
            |> Flow.setAttributes
                [ attribute "value" "dog"
                , selected <| model.selected == "dog"
                ]
        ]
        |> View.setBoundary
        |> Boundary.setNodeName "select"
        |> Boundary.setAttributes
            [ value model.selected
            , Events.onInput ChangeChoice
            ]

Core

type alias Flow msg =

Flow msg

Representing a text.

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

Primitive constructors

fromString : String -> Flow msg

Generate a Flow with given text content.

Attributes

setMixin : Mixin msg -> Flow msg -> Flow msg

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

setAttribute : Attribute msg -> Flow msg -> Flow msg

setAttributes : List (Attribute msg) -> Flow msg -> Flow msg

setClass : String -> Flow msg -> Flow msg

Append class attribute.

setId : String -> Flow msg -> Flow msg

Append id attribute.

WAI-ARIA

setRole : String -> Flow msg -> Flow msg

Set "role" value for WAI-ARIA.

setAria : String -> String -> Flow msg -> Flow msg

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

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

setBoolAria : String -> Bool -> Flow msg -> Flow 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"

Handle conditions

none : Flow msg

Generate Nothing. It can be used to realize Flows only displayed under certain conditions, as shown below.

fromFlows
    [ case mtext of
        Just t ->
            text t


        Nothing ->
            none
    ]

In most cases, however, a function like when will suffice.

when : Bool -> Flow msg -> Flow msg

unless : Bool -> Flow msg -> Flow msg

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

Lower level functions for HTML

setNodeName : String -> Flow msg -> Flow msg

arowM/elm-neat-layout/4.0.3