Elemental.Navigation.Dock (elemental v0.3.0)
Implements a dock component, this is most useful for mobile views.
<meta name="viewport" content="viewport-fit=cover">
is required for responsiveness of the dock in iOS.
Usage
<%# name is provided by the dock if needed %>
<.dock :let={_name}>
<%# id is provided so you can link the proposed button to the label %>
<.dock_action :let={_id} selected>
<:label>Home</:label>
<%# Some action/button to route the user home %>
</.dock_action>
<.dock_action>
<:label :let={_id}>Inbox</:label>
<%# Some action/button to route the user inbox %>
</.dock_action>
<.dock_action :let={_id}>
<:label>Settings</:label>
<%# Some action/button to route the user settings %>
</.dock_action>
</.dock>
Summary
Functions
The primary dock component.
Attributes
name
(:string
) - The name of the dock.This will be provided as an argument for the inner content provided in case it is needed by your action.
Defaults to
"dock"
.size
(:string
) - Control the size of the dock and it's actions.Must be one of"xs"
,"sm"
,"md"
,"lg"
, or"xl"
.class
(:any
) - Additional CSS classes to add to the dock. Defaults tonil
.
Slots
inner_block
(required) - The inner content of the dock, this is used to set the actions of the dock and is expected to be made up ofdock_action/1
components one for each action you are defining.
The primary dock action component.
Attributes
id
(:any
) - An identifier for the action you're adding.Defaults to a random value, this is used to link up the internal label with the action you provide.
for
(:string
) - The name of the dock.You can use this to keep track in case you (for whatever reason) have multiple docks in your page.
Defaults to
"dock"
.selected
(:boolean
) - Whether the current dock action is selected. Defaults tofalse
.
Slots
label
- The label for your dock action, can be anything allowed within the<label>
HTML element. This will be linked to theid
you provide (or the random one generated).This will receive thedock-label
part class.Accepts attributes:class
(:any
) - Additional CSS classes to label.
inner_block
(required) - An arbitrary HTML content to set as action you provide for the dock. You can put anything here but probably it makes more sense to set it as a button or a link of some kind.