Module for building View
.
Neat.Internal.View gap msg
A gap-sensible Html msg
alternative.
map : (a -> b) -> View gap a -> View gap b
textBlock : Neat.Internal.IsGap gap -> String -> View gap msg
Generates a view that displays a text string.
The first argument specifies the line height, which is the size of the gap between text lines when the given text is wrapped.
It is an alias for \str -> flows gap defaultFlows [ Neat.Flow.fromString str ]
.
Note that textBlock gap ""
does not generate anything.
flows : Neat.Internal.IsGap gap -> Flows -> List (Neat.Flow.Flow msg) -> View gap msg
Generates a view that displays flow contents.
Unlike a row
consist of textBlock
s, the fromFlows
generates a single coherent sentence.
Say you have the following code:
row
defaultRow
[ textBlock myLineHeight
"foo bar baz"
, textBlock myLineHeight
"a b c d e f"
]
The resulting View will be newlined as follows:
| foo bar | a b c d |
| baz | e f |
In contrast, the View generated by the following code behaves a bit differently:
import Neat.Flow as Flow
fromFlows
[ Flow.text "foo bar baz"
, Flow.text "a b c d e f"
]
The resulting View will be newlined as follows:
| foo bar baz a b c |
| d e f |
Note that fromFlows gap []
does not generate anything.
Setting for displaying flow contents.
defaultFlows : Flows
Default setting for displaying flow contents.
disableTextWrap : Flows -> Flows
Disable the text content to be wrapped.
enableEllipsis : Flows -> Flows
Display ellipsis (…
, U+2026 HORIZONTAL ELLIPSIS
) to represent clipped text when the flow content overflows.
This also disables the text content to be wrapped.
preserveWhiteSpace : Flows -> Flows
Disable collapsing of spaces, tabs, and new lines.
pushCenter : Flows -> Flows
Push the flow content to the center.
pushEnd : Flows -> Flows
Push the flow content to the end.
(Right if direction is ltr
, left if direction is rtl
.)
row : Row -> List (RowItem gap msg) -> View gap msg
Align children horizontally.
center : View gap msg -> View gap msg
An alias for row
with a centered element.
Neat.Internal.Row
defaultRow : Row
Default setting for rows.
"div"
disableWrap : Row -> Row
Neat.Internal.RowItem gap msg
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 -> View gap msg -> RowItem gap msg
Row item with stretched height.
topItem : String -> View gap msg -> RowItem gap msg
Top-aligned item.
middleItem : String -> View gap msg -> RowItem gap msg
Vertically centered item.
bottomItem : String -> View gap msg -> RowItem gap msg
Bottom-aligned item.
grownRowItem : String -> View gap msg -> RowItem gap msg
Row item with stretched height and width.
grownTopItem : String -> View gap msg -> RowItem gap msg
Top-aligned item which grows its width as much as possible.
grownMiddleItem : String -> View gap msg -> RowItem gap msg
Vertically centered item which grows its width as much as possible.
grownBottomItem : String -> View gap msg -> RowItem gap msg
Bottom-aligned item which grows its width as much as possible.
column : Column -> List (ColumnItem gap msg) -> View gap msg
Align children vertically.
Neat.Internal.Column
defaultColumn : Column
Default setting for columns.
"div"
Neat.Internal.ColumnItem gap msg
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 -> View gap msg -> ColumnItem gap msg
Column item with stretched width.
leftItem : String -> View gap msg -> ColumnItem gap msg
Left-aligned item.
centerItem : String -> View gap msg -> ColumnItem gap msg
Horizontally centered item.
rightItem : String -> View gap msg -> ColumnItem gap msg
Right-aligned item.
grownColumnItem : String -> View gap msg -> ColumnItem gap msg
Column item with stretched width and height.
grownLeftItem : String -> View gap msg -> ColumnItem gap msg
Left-aligned item which grows its height as much as possible.
grownCenterItem : String -> View gap msg -> ColumnItem gap msg
Horizontally centered item which grows its height as much as possible.
grownRightItem : String -> View gap msg -> ColumnItem gap msg
Right-aligned item which grows its height as much as possible.
none : View g 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 -> View gap msg -> View gap msg
Insert a view only when a condition is met.
unless : Basics.Bool -> View gap msg -> View gap msg
Insert a view unless a condition is met.
withMaybe : Maybe a -> (a -> View gap msg) -> View gap msg
Insert a view only if the given value is Just
.
expandGap : Neat.Internal.IsGap g2 -> View g1 msg -> View g2 msg
Expand View Gap to a wider one.
You can use expandGap
to "shrink" Gaps, but we do not recommend doing so. Such layouts must not be "neat"!
Boundary
setBoundary : View gap msg -> Neat.Internal.Boundary msg
Wrap a view with boundary. This is the only way to reset view gaps.
setNodeName : String -> View gap msg -> View gap msg
Overrides the node name of the outermost HTML element.
For Views created with Neat.Boundary.setGap
, overwrite the node name of the original Boundary:
import Neat.Boundary as Boundary exposing (Boundary)
import Neat.View as View exposing (View)
sampleBoundary : Boundary msg
sampleBoundary =
Debug.todo "Sample"
sampleView : View SampleGap msg
sampleView =
sampleBoundary
|> Boundary.setGap sampleGap
|> View.setNodeName "section"
-- `sampleView2` is equivalent to `sampleView`.
sampleView2 : View SampleGap msg
sampleView2 =
sampleBoundary
|> Boundary.setNodeName "section"
|> Boundary.setGap sampleGap
setRole : String -> View gap msg -> View gap msg
Set the WAI-ARIA role
attribute value of the outermost HTML element.
For Views created with Neat.Boundary.setGap
, append the attribute to the original Boundary.
setAria : String -> String -> View gap msg -> View gap msg
Set the WAI-ARIA aria-*
attribute value of the outermost HTML element.
For Views created with Neat.Boundary.setGap
, append the attribute to the original Boundary.
e.g., setAria "required" "true"
stands for "aria-required" is "true".
setBoolAria : String -> Basics.Bool -> View gap msg -> View gap msg
Helper function to set boolean WAI-ARIA aria-*
attribute value of the outermost HTML element.
i.e.,
setBoolAria name True
is equal to setAria name "true"
setBoolAria name False
is equal to setAria name "false"