Elemental.Navigation.Dock (elemental v0.3.1)

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.

The primary dock action component.

Functions

dock(assigns)

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 to nil.

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 of dock_action/1 components one for each action you are defining.

dock_action(assigns)

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 to false.

Slots

  • label - The label for your dock action, can be anything allowed within the <label> HTML element. This will be linked to the id you provide (or the random one generated).This will receive the dock-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.