PtahUi.Components.Dock (PtahUI v0.1.0)

Copy Markdown View Source

Dock (Bottom Navigation Bar) — sticks to the bottom of the screen and provides primary navigation options.

Add <meta name="viewport" content="viewport-fit=cover"> to your layout for proper iOS safe-area handling.

Example

<.dock>
  <:item icon="hero-home" label="Home" active />
  <:item icon="hero-inbox" label="Inbox" on_click={JS.push("nav", value: %{to: "inbox"})} />
  <:item icon="hero-cog-6-tooth" label="Settings" />
</.dock>

Summary

Functions

dock(assigns)

Functions

dock(assigns)

Attributes

  • size (:string) - Controls height and icon/label size. Defaults to "md".
  • fixed (:boolean) - Stick to the bottom of the viewport. Set false for contained demos. Defaults to true.
  • indicator (:boolean) - Show a pill indicator at the bottom of the active item. Defaults to true.
  • indicator_class (:string) - Class for the active indicator pill. Defaults to bg-gray-900. Defaults to nil.
  • bg_class (:string) - Override background/border. Defaults to white with top border. Defaults to nil.
  • active_class (:string) - Text/icon color applied to the active item. Defaults to "text-gray-900".
  • inactive_class (:string) - Text/icon color applied to inactive items. Defaults to "text-gray-400 hover:text-gray-600".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • item (required) - A dock navigation button. Accepts attributes:
    • icon (:string)
    • label (:string) - Text label below the icon.
    • active (:boolean) - Highlights this item as the current page.
    • active_class (:string) - Per-item active color override.
    • indicator_class (:string) - Per-item indicator color override.
    • on_click (:any)
    • class (:string)