Zoom HUD
Controles de zoom avec pourcentage actuel, boutons d'increment et action de reinitialisation pour les vues du canvas. Installez Zoom HUD depuis le registre VLLNT UI avec la CLI shadcn.
Controles de zoom avec pourcentage actuel, boutons d'increment et action de reinitialisation pour les vues du canvas. Fait partie de la famille overlay dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Zoom HUD a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/zoom-hud.jsonSource
import { Minus, Plus, RotateCcw } from "lucide-react";
import { cn } from "../../lib/utils";
import { Button } from "../button/button";
export type ZoomHUDProps = React.ComponentPropsWithoutRef<"div"> & {
onReset?: () => void;
onZoomIn?: () => void;
onZoomOut?: () => void;
zoom: number;
};
const ZoomHUD = ({
className,
onReset,
onZoomIn,
onZoomOut,
ref,
zoom,
...props
}: ZoomHUDProps & { ref?: React.Ref<HTMLDivElement> }) => (
<div
className={cn(
"inline-flex items-center gap-1 rounded-sm border border-border bg-background p-1 font-mono",
className,
)}
ref={ref}
{...props}
>
<Button
aria-label="Zoom out"
onClick={onZoomOut}
size="icon"
type="button"
variant="ghost"
>
<Minus className="size-4" />
</Button>
<div className="min-w-16 px-2 text-center text-xs font-medium tabular-nums text-foreground">
{Math.round(zoom * 100)}%
</div>
<Button
aria-label="Zoom in"
onClick={onZoomIn}
size="icon"
type="button"
variant="ghost"
>
<Plus className="size-4" />
</Button>
<Button
aria-label="Reset zoom"
onClick={onReset}
size="icon"
type="button"
variant="ghost"
>
<RotateCcw className="size-4" />
</Button>
</div>
);
ZoomHUD.displayName = "ZoomHUD";
export { ZoomHUD };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.