Orasund / elm-ui-widgets / Widget.Layout

Combines multiple concepts from the Material Design specification, namely:

It is responsive and changes view to apply to the Material Design guidelines.

Layout

Sheets

Sheet

leftSheet : { button : Internal.Item.ItemStyle (Internal.Button.ButtonStyle msg) msg, sheet : Internal.List.ColumnStyle msg } -> { title : Element msg, menu : Internal.Select.Select msg, onDismiss : msg } -> Internal.Modal.Modal msg

Left sheet containing a title and a menu.

rightSheet : { sheet : Internal.List.ColumnStyle msg, insetItem : Internal.Item.ItemStyle (Internal.Item.InsetItemStyle msg) msg } -> { onDismiss : msg, moreActions : List (Internal.Button.Button msg) } -> Internal.Modal.Modal msg

Right sheet containing a simple list of buttons

searchSheet : Internal.TextInput.TextInputStyle msg -> { onDismiss : msg, search : Internal.TextInput.TextInput msg } -> Internal.Modal.Modal msg

Top sheet containing a searchbar spanning the full width

Utility Functions

getDeviceClass : { height : Basics.Int, width : Basics.Int } -> Element.DeviceClass

Obtain the device class from a given window.

Checkout Element.classifyDevice for more information.

partitionActions : List (Internal.Button.Button msg) -> { primaryActions : List (Internal.Button.Button msg), moreActions : List (Internal.Button.Button msg) }

Partitions actions into primary and additional actions.

It is intended to hide the additional actions in a side menu.

orderModals : { dialog : Maybe (Internal.Modal.Modal msg), topSheet : Maybe (Internal.Modal.Modal msg), bottomSheet : Maybe (Internal.Modal.Modal msg), leftSheet : Maybe (Internal.Modal.Modal msg), rightSheet : Maybe (Internal.Modal.Modal msg) } -> List (Internal.Modal.Modal msg)

Material design only allows one element at a time to be visible as modal.

The order from most important to least important is as follows:

  1. dialog
  2. top sheet
  3. bottom sheet
  4. left sheet
  5. right sheet