.det .det-faner,.det .det-js-kun{display:none!important}.det .det-bar{padding:0;border:0}.det .det-panel[hidden]{display:block!important}.det .det-panel+.det-panel{margin-top:48px}.det .det-panel-h{position:static;width:auto;height:auto;margin:0 0 14px;overflow:visible;clip-path:none;white-space:normal}.det .det-win-inner{width:100%!important;height:100%!important;left:0;transform:none}.det .det-shutter{display:none}

Bar Dock

image-galleryPro

En række høje billedbjælker, der svulmer som i et dock, når markøren nærmer sig. Klik eller Enter åbner én til et stort kvadrat, mens de andre sløres og dæmpes.

Åbner snart

Pro kan ikke købes endnu. Siden åbner, når betalingen er klar.

Bredde

Forhåndsvisningen kunne ikke hentes.

Live demo. Temaet skifter selve demoen.

bar-dock.tsxPro

'use client'import { useEffect, useRef } from 'react'import { cn } from '@/lib/utils'export type BarDockProps = {  items: BarDockItem[]  barWidth?: number  barHeight?: number  gap?: number  magnification?: number  heightMagnification?: number  range?: number  radius?: number  openSize?: number  showCaption?: boolean  defaultOpen?: number  onOpenChange?: (index: number | null) => void  className?: string}export function BarDock({  items,  barWidth = 28,  barHeight = 170,  gap = 6,  magnification = 2.3,  heightMagnification = 1.3,  range = 180,  radius = 8,  openSize = 300,  showCaption = true,  defaultOpen,  onOpenChange,  className,}: BarDockProps) {  const ref = useRef<HTMLDivElement>(null)  useEffect(() => {    const el = ref.current    if (!el) return  }, [])  return <div ref={ref} className={cn('relative', className)} />}

Koden er låst

Bar Dock er en del af Manniche UI Pro. En nøgle åbner kildekoden til alle 60 effekter.

Åbner snart

49 € · Introduktionspris til og med 31. december 2026. Derefter 79 €.

Engangsbetaling
Én udvikler
Nøglen kommer på mail med det samme
Ingen moms (§ 19 UStG)

Har du en nøgle? Hent koden med CLI eller MCP.

Nøglen ligger i MANNICHE_PRO_KEY, aldrig i koden eller i adressen. Sådan sætter du den op

CLInpx shadcn@latest add @manniche-pro/bar-dock

MCP

claude mcp add --transport http manniche-ui https://mikkelmanniche.dk/api/mcp --header "Authorization: Bearer $MANNICHE_PRO_KEY"

BarDockProps

Prop	Type	Standard	Hvad den gør
`items` påkrævet	`BarDockItem[]`	–	The pictures, one bar each. Roughly 5 to 14 look best.
`barWidth`	`number`	`28`	Width of a resting bar in CSS pixels. Bars shrink together on narrow containers so the whole row always fits.
`barHeight`	`number`	`170`	Height of a resting bar in CSS pixels.
`gap`	`number`	`6`	Space between bars in CSS pixels.
`magnification`	`number`	`2.3`	How much the bar nearest the pointer grows in width (1 = no magnification). Neighbours taper off smoothly.
`heightMagnification`	`number`	`1.3`	How much the nearest bar grows in height (1 = same height). Kept apart from `magnification` so bars can swell without getting much taller.
`range`	`number`	`180`	Distance in CSS pixels over which the pointer still has an effect. Bars further away stay at rest.
`radius`	`number`	`8`	Corner radius of the bars in CSS pixels.
`openSize`	`number`	`300`	Side of the square a bar opens into, in CSS pixels. It is capped to fit the container.
`showCaption`	`boolean`	`true`	Show the picture's `alt` text as a caption on the open bar.
`defaultOpen`	`number`	–	Index of the bar that starts open. Leave out to start with all bars closed.
`onOpenChange`	`(index: number \| null) => void`	–	Called when a bar opens (its index) or the open bar closes (`null`).
`aria-label`	`string`	`'Picture gallery'`	Accessible name of the whole row.
`className`	`string`	–	–

Preview

Kode

Koden er låst

Props

A11y