Dock
App icons on a glass shelf that magnify as the pointer passes, with a label above the hovered one.
import { Dock } from "pleate/effects/dock";Apps
Props
- items
Icons; active shows a dot.
{ icon, label, onClick?, href?, active? }[]- size
Rest size in px.
numberdefault 48- magnification
Size under the pointer in px.
numberdefault 76- distance
Reach of the magnification in px.
numberdefault 150- label
Accessible name.
stringdefault "Dock"
Accessibility
- A toolbar with one tab stop; arrow keys, Home and End move between items.
- Each item is named by its label, also shown on focus.
- Touch screens and reduced motion keep the rest size.