Default types and functions for working with elm/html within Less.Ui
Less.Ui.Ui region (HtmlList (Less.Link.Msg msg)) (Wrapper region narrowMsg msg)
🐌
html : HtmlList msg -> Html region_ narrowMsg_ msg
🐌
toggle : List (Html.Attribute Basics.Never) -> { flag : Less.Link.Flag, inHeader : Basics.Bool, label : HtmlList msg } -> Html region narrowMsg msg -> Html region narrowMsg msg
Toggle a Flag
and show/hide the associated Ui
accordingly.
Will add the flag when the link is opened in a new tab or shared, no matter its state in the current tab.
Flag
is a string and may contain "=".
atFlag : Less.Link.Flag -> Html region narrowMsg msg -> Html region narrowMsg msg
Show a Ui
exactly when a certain Flag
is present in the Url
.
Use toggle
to let the user toggle the flag.
goTo : List (Html.Attribute Basics.Never) -> { destination : Less.Link.Location, inHeader : Basics.Bool, label : HtmlList msg } -> Html region narrowMsg msg -> Html region narrowMsg msg
Navigate to a destination
and show the nested Ui
when it's reached.
bounce : List (Html.Attribute Basics.Never) -> { there : Less.Link.Location, here : Less.Link.Location, label : HtmlList msg } -> Html region narrowMsg msg -> Html region narrowMsg msg
Navigate to there
, and from there, back here
.
Will navigate there
when the link is opened in a new tab or shared.
filter : Less.Link.Category -> (List Less.Link.SearchTerm -> Html region narrowMsg msg) -> Html region narrowMsg msg
Show a Ui
according to what searchTerms are currently associated with a given category.
-- Show a token for each SearchTerm in category "search=a"
List.concatMap viewToken
|> filter "search"
search : List (Html.Attribute Basics.Never) -> { category : Less.Link.Category, inHeader : Basics.Bool, label : HtmlList msg } -> (List Less.Link.SearchTerm -> Html region narrowMsg msg) -> Html region narrowMsg msg
Display a search box and show a Ui
according to what searchTerms are currently associated with a given category.
section : List (Html.Attribute msg) -> Html region narrowMsg msg -> Html region narrowMsg msg
From w3.org:
The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.
article : List (Html.Attribute msg) -> Html region narrowMsg msg -> Html region narrowMsg msg
From w3.org:
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.
node : String -> List (Html.Attribute msg) -> Html region narrowMsg msg -> Html region narrowMsg msg
Wrap all parts of the Ui that are in the current region in an arbitrary Html node.
node "div" [] myUi
disclose : List (Html.Attribute msg) -> { summary : Html region narrowMsg msg, summaryAttrs : List (Html.Attribute msg) } -> Html region narrowMsg msg -> Html region narrowMsg msg
From w3.org:
The details element represents a disclosure widget from which the user can obtain additional information or controls.
The summary element child of the element, if any, represents the summary or legend of the details.
Notes:
Attr.attribute "open" ""
toggle
insteadol : List (Html.Attribute msg) -> List ( String, Html region narrowMsg msg ) -> Html region narrowMsg msg
Ordered List
ul : List (Html.Attribute msg) -> List ( String, Html region narrowMsg msg ) -> Html region narrowMsg msg
Unordered List
keyedNode : String -> List (Html.Attribute msg) -> List ( String, Html region narrowMsg msg ) -> Html region narrowMsg msg
Key a node with Tuple.pair "uniqueKey"
such that the vDom diffing algorithm preserves it even when it changes position in the list.
The functionality is taken directly from the standard library Html.Keyed
.
nest : { regions : List region, combine : { makeInnerHtml : NarrowUi region narrowMsg -> Maybe (HtmlList (Less.Link.Msg narrowMsg)) } -> HtmlList (Less.Link.Msg msg) } -> Html region narrowMsg msg
Gives your Html widgets access to state information.
For example, if you want to extend a widget or form generator (elm-any-type-forms
) that can only output Html
with Ui
elements that alter and respond to the Url, then you need
Ui (Msg narrowMsg)
to Html (Msg narrowMsg)
nested inside the widget -> makeInnerHtml
Html (Msg msg)
to Ui (Msg msg)
-> combine
Ui
Here is how you use this function:
Write the Ui
code for your widget extension.
You can use all the local parameters your widget provides.
Convert it to Html (Msg narrowMsg)
using makeInnerHtml
to make it fit inside your widget.
Your widget will create Html (Msg msg)
. The function you
wrote for drawing the widget is the combine
function that
you can now nest
.
Caution: If you use this functionality, the Ui
will contain functions and will no longer support equality checks and serialisation.
Note: As of now, the type setup will limit you to nest one layer deep, i.e. the compiler will complain if you try to nest Ui in a widget that is part of the Ui nested in another widget.
This is because the inside of the widget uses a different message type than the outside of the widget. As of now, I see no other way to mitigate than to use code generation
in order to write out the narrower
nested types. I've never done code generation, and I don't feel comfortable with long types, so I'll leave it to you.
layout : Less.Ui.Layout region (HtmlList (Less.Link.Msg narrowMsg)) (HtmlList (Less.Link.Msg msg)) (Wrapper region narrowMsg narrowMsg) (Wrapper region narrowMsg msg)
Note: If you want to use screen region
s, replace the arrange
field.
An example is given at arrangeOverDefaultRegions
import Less.Ui.Html exposing (layout)
{ layout | arrange = Less.Ui.Html.arrangeOverDefaultRegions }
animations : Html region_ msg_ narrowMsg_
Add delightful css transitions to reflect the Url transitions.
Works best when little additional css is added to your app.
arrangeOverDefaultRegions : { header : Maybe (HtmlList msg), region : Region -> Maybe (HtmlList msg) } -> HtmlList msg
Lays out a traditional application layout with a sticky `Header`,
scrolling `Scene`, and both `Control` and `Info` fixed to the bottom.
Scene: the Item's editable contents and overlays
Control: Toolbar, Property sheet
Info: Status bar, Help screen, Tooltip bubble, Snack bar