Composable layout wrappers.
Layouts wrap page views with surrounding UI (navigation, sidebar, footer, etc). They can be stateless or stateful.
sidebarLayout : Layout shared () Never msg
sidebarLayout =
Layout.static
{ key = "sidebar"
, view = \shared pageView ->
Html.div []
[ sidebar shared
, Html.div [ class "content" ] [ pageView ]
]
}collapsibleSidebar : Layout shared SidebarModel SidebarMsg msg
collapsibleSidebar =
Layout.stateful
{ key = "sidebar"
, init = \shared -> ( { open = True }, Cmd.none )
, update = \msg model -> ( { model | open = not model.open }, Cmd.none )
, view = \shared model pageView ->
Html.div []
[ if model.open then sidebar shared else Html.text ""
, pageView
]
, subscriptions = \shared model -> Sub.none
}Create a stateless layout.
The key is used to determine layout identity: pages sharing the same
layout key share layout state (relevant for stateful layouts) and don't
trigger layout re-initialization during navigation.
Create a stateful layout with its own model, messages, and lifecycle.
Layout state persists across page transitions when pages share the same layout key. The layout is only re-initialized when navigating to a page with a different layout key.
Placeholder: associate a layout with a page. Returns the layout key for use by the App module.
Get the key that identifies this layout.
Apply a stateless layout to page content.
Combined message type for stateful layouts. Pages produce PageMsg,
the layout itself produces LayoutMsg.
Runtime state for a layout instance.
Initialize layout state.
Update layout state with a layout message.
Render a stateful layout with its state and page content.
Get subscriptions from a stateful layout.
An opaque layout type.
Type parameters:
shared: the shared state typelayoutModel: this layout's own model (use()for stateless)layoutMsg: this layout's own message type (useNeverfor stateless)pageMsg: the page message type that flows through