缩放滑块

🌐 Zoom Slider

一个缩放控件，可让你使用滑块无缝放大和缩小。

🌐 A zoom control that lets you zoom in and out seamlessly using a slider.

Dependencies:

@xyflow/react lucide-react shadcn/ui/button shadcn/ui/slider

安装

在安装组件之前，务必遵循先决条件。


npx shadcn@latest add https://ui.reactflow.dev/zoom-slider


pnpm dlx shadcn@latest add https://ui.reactflow.dev/zoom-slider


yarn dlx shadcn@latest add https://ui.reactflow.dev/zoom-slider


bun x shadcn@latest add https://ui.reactflow.dev/zoom-slider

用法

1. Connect the component with your React Flow application.


import { Background, Panel, ReactFlow } from "@xyflow/react";
import { ZoomSlider } from "@/registry/components/zoom-slider/";
import { Button } from "@/components/ui/button";
import { useState } from "react";
 
const defaultNodes = [
  {
    id: "1",
    position: { x: 200, y: 200 },
    data: { label: "Node" },
  },
];
 
export default function App() {
  const [orientation, setOrientation] = useState<"horizontal" | "vertical">(
    "horizontal",
  );
 
  return (
    <div className="h-full w-full">
      <ReactFlow defaultNodes={defaultNodes} fitView>
        <Background />
        <ZoomSlider position="top-left" orientation={orientation} />
        <Panel position="bottom-right">
          <Button
            onClick={() =>
              setOrientation(
                orientation === "horizontal" ? "vertical" : "horizontal",
              )
            }
          >
            Toggle orientation
          </Button>
        </Panel>
      </ReactFlow>
    </div>
  );
}