supermacro / elm-antd / Ant.Layout

Primitives for creating typical page layouts

From: https://ant.design/components/layout/

Introduction

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.


type LayoutTree msg

The various kinds of nodes represented by a LayoutTree

Primitives

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)

Customizeable Primitives

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


type Sidebar msg

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

Other

toHtml : LayoutTree msg -> Html msg

Convert your layout tree into good old Html msg