Module for building Boundary
.
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
]
Functions to set arbitrary attributes.
The following styles are not reflected by the style
attribute or CSS files.
scalableBlock
is "content-box"Neat.View.textBlock
of Neat.View.fromFlows
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 Mixin
s.
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 Attribute
s.
setClass : String -> Boundary msg -> Boundary msg
Append class
attribute.
setId : String -> Boundary msg -> Boundary msg
Append id
attribute.
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.,
setBoolAria name True
is equal to setAria name "true"
setBoolAria name False
is equal to setAria name "false"
You can only use a limited kind of units. This may seem inconvenient, but it prevents you to build unmaintainable broken views.
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 ).
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 ).
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 ).
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 -> List (RowItem msg) -> Boundary msg
Align children horizontally.
center : Boundary msg -> Boundary msg
An alias for row
with a centered element.
defaultRow : Row
Default setting for rows.
disableWrap : Row -> Row
enableHScroll : Row -> Row
alignCenter : Row -> Row
alignRight : Row -> Row
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 -> List (ColumnItem msg) -> Boundary msg
Align children horizontally.
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
]
alignMiddle : Column -> Column
alignBottom : Column -> Column
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.
putLayer : String -> ( Layer, Boundary (Layered msg) ) -> Boundary msg -> Boundary msg
Put overlay layer on the parent view.
{ 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
--> }
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.
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
.
View
setGap : Neat.Internal.IsGap gap -> Boundary msg -> Neat.Internal.View gap msg
Set Gap around a view.
setNodeName : String -> Boundary msg -> Boundary msg
Set HTML node name on Boundary
.