Django Dock Component

Dock renders a fixed bottom navigation bar suited to mobile layouts. Each c-lb.dock.item holds an icon and optional label, with an active prop to mark the current section.

Basic Dock

Preview

Code

<div class="relative bg-base-200 h-52 max-w-sm mx-auto rounded-lg">
<c-lb.dock class="absolute">
  <c-lb.button btnStyle="bare" icon="rmx.home">
    <c-lb.dock.label>Home</c-lb.dock.label>
  </c-lb.button>
  <c-lb.button btnStyle="bare" class="dock-active" icon="rmx.information">
    <c-lb.dock.label>Info</c-lb.dock.label>
  </c-lb.button>
  <c-lb.button btnStyle="bare" icon="rmx.search">
    <c-lb.dock.label>Search</c-lb.dock.label>
  </c-lb.button>
</c-lb.dock>
</div>

Color Variants

Preview

Code

<div class="relative bg-base-200 h-52 max-w-sm mx-auto rounded-lg">
<c-lb.dock variant="primary" class="absolute">
  <c-lb.button btnStyle="bare" icon="rmx.home">
    <c-lb.dock.label>Home</c-lb.dock.label>
  </c-lb.button>
  <c-lb.button btnStyle="bare" class="dock-active" icon="rmx.information">
    <c-lb.dock.label>Info</c-lb.dock.label>
  </c-lb.button>
  <c-lb.button btnStyle="bare" icon="rmx.search">
    <c-lb.dock.label>Search</c-lb.dock.label>
  </c-lb.button>
</c-lb.dock>
</div>

Sizes

Preview

Code

<div class="relative bg-base-200 h-52 max-w-sm mx-auto rounded-lg">
<c-lb.dock size="lg" class="absolute">
  <c-lb.button btnStyle="bare" icon="rmx.home">A</c-lb.button>
  <c-lb.button btnStyle="bare" class="dock-active" icon="rmx.information">B</c-lb.button>
  <c-lb.button btnStyle="bare" icon="rmx.search">C</c-lb.button>
</c-lb.dock>
</div>

API Reference

`c-lb.dock`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply
variant	neutral primary secondary accent info success warning error	-	No	Dock color variant using bg-[variant] and text-[variant]-content
size	xs sm md lg xl	`md`	No	Dock size

Slot Name	Description
default	Dock navigation items (buttons with icons and optional dock-label spans)

`c-lb.dock.label`

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes to apply

Slot Name	Description
default	Label text content