Dock

A macOS-style magnifying dock.

import { BuiDock, BuiDockItem } from 'ng-blatui';

<bui-dock>
  <bui-dock-item [active]="true">🏠</bui-dock-item>
  <bui-dock-item>📁</bui-dock-item>
  <bui-dock-item>✉️</bui-dock-item>
</bui-dock>

API reference

bui-dock

Inputs

Prop	Type	Default	Description
`magnify`	`number`	`1.6`	Maximum scale factor applied to the tile directly under the cursor.
`distance`	`number`	`120`	Pixel radius around the cursor within which tiles are magnified.
`label`	`string`	—	Accessible label for the dock navigation; falls back to the i18n default.

bui-dock-item

Inputs

Prop	Type	Default	Description
`active`	`boolean`	`false`	Whether to show the active indicator dot beneath the tile.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.