Module for building Boundary.
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.fromFlowsAppend Mixin on boundaries.
Same as setMixin but takes a list of Mixins.
Append Attribute on boundaries.
Same as setAttribute but takes a list of Attributes.
Append class attribute.
Append id attribute.
Set "role" value for WAI-ARIA.
Set "aria-*" value for WAI-ARIA.
e.g., setAria "required" "true" stands for "aria-required" is "true".
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.
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.
Set the minimum width in em.
Represents the calculated font-size of the element.
Set the minimum width in rem.
Represents the font-size of the root element (typically <html>).
The default minimum height is zero without enabling child overflow.
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.
Set the minimum height in em.
Represents the calculated font-size of the element.
Set the minimum height in rem.
Represents the font-size of the root element (typically <html>).
The default value for maximum width is fit, which shrinks as much as its children do not overhang it.
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.
Set the maximum width in em.
Represents the calculated font-size of the element.
Set the maximum width in rem.
Represents the font-size of the root element (typically <html>).
The default value for maximum height is fit, which shrinks as much as its children do not overhang it.
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.
Set the maximum height in em.
Represents the calculated font-size of the element.
Set the maximum height in rem.
Represents the font-size of the root element (typically <html>).
An alias for row with a centered element.
Default setting for rows.
Each function has the String argument, which helps make the DOM modifications more efficient. It must be unique among items in the same row.
Vertically centered item.
Bottom-aligned item.
Row item with stretched height and width.
Top-aligned item which grows its width as much as possible.
Vertically centered item which grows its width as much as possible.
Bottom-aligned item which grows its width as much as possible.
Align children horizontally.
Default setting for columns.
Enable vertical scroll.
Just for convenience.
setVerticalScroller boundary =
column
(defaultColumn
|> enableVScroll
)
[ grownColumnItem "content" boundary
]Each function has the String argument, which helps make the DOM modifications more efficient. It must be unique among items in the same row.
Column item with stretched height.
Left-aligned item.
Horizontally centered item.
Right-aligned item.
Column item with stretched height and width.
Left-aligned item which grows its width as much as possible.
Horizontally centered item which grows its width as much as possible.
Right-aligned item which grows its width as much as possible.
Put overlay layer on the parent view.
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
--> { top = 0
--> , bottom = 0
--> , left = 0
--> , right = 0
--> , priority = Nothing
--> }Convert Boundary for putLayer. The Boundary (Layered msg) ignores pointer events; this feature is especially helpfull for realizing popups with clickable background.
Generates no HTML nodes. This is useful for handling elements which only appears under certain conditions.
when p v =
if p then
v
else
noneInsert a view only when a condition is met.
Insert a view unless a condition is met.
Insert a view only if the given value is Just.
ViewSet Gap around a view.
Set HTML node name on Boundary.
A bounded View without gap.
Convert to/from View by
setGap/setBoundary.