Primitives for creating typical page layouts
From: https://ant.design/components/layout/
Each of the primitives below creates a LayoutTree
that represents that shape of your layout.
This module allows for 2-column and 3-column layouts.
This module defines a recursive LayoutTree data structure, which allows for layouts of large depth and complexity.
The various kinds of nodes represented by a LayoutTree
The following primitives take some content (as Html msg
) and returns to you a LayoutTree
that you can continue appending to
Example:
sidebar =
Layout.sidebar (componentMenu model.activeRoute)
|> Layout.sidebarWidth 300
|> Layout.sidebarToTree
layout : LayoutTree Msg
layout =
Layout.layout2
(Layout.header <| toUnstyled navBar)
(Layout.layout2
sidebar
(Layout.layout2
(Layout.content <| toUnstyled componentPageShell)
(Layout.footer <| toUnstyled footer)
)
)
header : Html msg -> LayoutTree msg
Create a header node in your LayoutTree
This node will be rendered horizontally at the top of your layout tree
content : Html msg -> LayoutTree msg
Create a content node in your LayoutTree
This node will be rendered beneath a header (if a header is provided), but above the footer (if a footer is provided)
footer : Html msg -> LayoutTree msg
Create a footer node in your LayoutTree
This node will be rendered beneath all other nodes in your LayoutTree, just as you would expect from a footer.
layout : LayoutTree msg -> LayoutTree msg -> LayoutTree msg -> LayoutTree msg
Generate a three-column layout from three LayoutTree's (see example above)
layout2 : LayoutTree msg -> LayoutTree msg -> LayoutTree msg
Generate a two-column layout from two LayoutTree's (see example above)
The following primitives do not return a LayoutTree
immediately. Rather, they return an intermediary data structure that you can then customize further before converting it into a LayoutTree
node that can be appended to your main LayoutTree
A sidebar
sidebar : Html msg -> Sidebar msg
Create a customizeable sidebar
In order to append the sidebar to your LayoutTree, you must call sidebarToTree
sideBar innerNodes
|> sidebarWidth 40
|> sidebarToTree
sidebarWidth : Basics.Float -> Sidebar msg -> Sidebar msg
Customize the width (in pixels) of the sidebar
sidebarToTree : Sidebar msg -> LayoutTree msg
Convert a Sidebar
into a LayoutTree
node so that you may append it to a LayoutTree
toHtml : LayoutTree msg -> Html msg
Convert your layout tree into good old Html msg