Deepyr Documentation

Dock

A stateful component is used to manage the active item. For iOS responsiveness, add `<meta name="viewport" content="viewport-fit=cover">` to your main HTML file.

Preview

Dart

// Requires a stateful parent to manage the active dock item.
// A stateful parent similar to `_StatefulDockExample` in this file is needed.
Dock(
  ariaLabel: 'Main navigation',
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [Size('size-[1.2em]')]), DockLabel([text('Home')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      [Icon('inbox', style: [Size('size-[1.2em]')]), DockLabel([text('Inbox')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      [Icon('settings', style: [Size('size-[1.2em]')]), DockLabel([text('Settings')])],
    ),
  ],
)

Dock Extra Small size

Preview

Dart

// Requires a stateful parent to manage the active dock item.
// Example for a Extra Small sized dock:
Dock(
  style: [Dock.xs],
  ariaLabel: 'Main navigation',
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [Size('size-[1.2em]')]), DockLabel([text('Home')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      [Icon('inbox', style: [Size('size-[1.2em]')]), DockLabel([text('Inbox')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      [Icon('settings', style: [Size('size-[1.2em]')]), DockLabel([text('Settings')])],
    ),
  ],
)

Dock Small size

Preview

Dart

// Requires a stateful parent to manage the active dock item.
// Example for a Small sized dock:
Dock(
  style: [Dock.sm],
  ariaLabel: 'Main navigation',
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [Size('size-[1.2em]')]), DockLabel([text('Home')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      [Icon('inbox', style: [Size('size-[1.2em]')]), DockLabel([text('Inbox')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      [Icon('settings', style: [Size('size-[1.2em]')]), DockLabel([text('Settings')])],
    ),
  ],
)

Dock Medium size

Preview

Dart

// Requires a stateful parent to manage the active dock item.
// Example for a Medium sized dock:
Dock(
  style: [Dock.md],
  ariaLabel: 'Main navigation',
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [Size('size-[1.2em]')]), DockLabel([text('Home')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      [Icon('inbox', style: [Size('size-[1.2em]')]), DockLabel([text('Inbox')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      [Icon('settings', style: [Size('size-[1.2em]')]), DockLabel([text('Settings')])],
    ),
  ],
)

Dock Large size

Preview

Dart

// Requires a stateful parent to manage the active dock item.
// Example for a Large sized dock:
Dock(
  style: [Dock.lg],
  ariaLabel: 'Main navigation',
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [Size('size-[1.2em]')]), DockLabel([text('Home')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      [Icon('inbox', style: [Size('size-[1.2em]')]), DockLabel([text('Inbox')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      [Icon('settings', style: [Size('size-[1.2em]')]), DockLabel([text('Settings')])],
    ),
  ],
)

Dock Extra Large size

Preview

Dart

// Requires a stateful parent to manage the active dock item.
// Example for a Extra Large sized dock:
Dock(
  style: [Dock.xl],
  ariaLabel: 'Main navigation',
  [
    DockItem(
      isActive: _activeIndex == 0,
      onClick: (_) => setState(() => _activeIndex = 0),
      [Icon('home', style: [Size('size-[1.2em]')]), DockLabel([text('Home')])],
    ),
    DockItem(
      isActive: _activeIndex == 1,
      onClick: (_) => setState(() => _activeIndex = 1),
      [Icon('inbox', style: [Size('size-[1.2em]')]), DockLabel([text('Inbox')])],
    ),
    DockItem(
      isActive: _activeIndex == 2,
      onClick: (_) => setState(() => _activeIndex = 2),
      [Icon('settings', style: [Size('size-[1.2em]')]), DockLabel([text('Settings')])],
    ),
  ],
)

Dock with custom colors

Preview

Dart

Dock(
  // Apply general color utilities to style the dock.
  style: [BgUtil.neutral, TextUtil.neutralContent],
  [
    // ... DockItems
  ],
)