Float Panel

\u62D6\u62FD\u4EE5\u79FB\u52A8

\u9ED8\u8BA4\u4F7F\u7528body\u4F5C\u4E3A\u5BB9\u5668,\u672A\u6307\u5B9Acontainer\u65F6 Position = fixed\uFF0C\u6307\u5B9A\u5BB9\u5668\u540E\u4F7F\u7528absolute

) } `,__src__:"registry/default/example/float-panel.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FloatPanel"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Pos "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/float-panel"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" FloatPanelDemo"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setFixAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"[]>()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setFixAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"[]>()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"initPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setInitPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Pos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">()"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setInitPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" document"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"documentElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"clientHeight "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 300,"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" document"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"documentElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"clientWidth "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"-"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 300,"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setFixAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" document "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" document"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"documentElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"clientWidth "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" undefined]."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"filter"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"c"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" c "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"!=="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" undefined"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"[]"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setFixAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [56,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" document "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" document"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"documentElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"clientHeight "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" undefined]."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"filter"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"c"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" c "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"!=="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" undefined"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" number"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"[]"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [])"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <>"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" \u5DF2\u6E32\u67D3\u81F3body"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FloatPanel"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zIndex"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 10"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" initPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"initPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" baseSize"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"text-xs cursor-move w-full h-full bg-white text-center text-black p-1"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"text-lg"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Float Panel"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"\u62D6\u62FD\u4EE5\u79FB\u52A8"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" \u9ED8\u8BA4\u4F7F\u7528body\u4F5C\u4E3A\u5BB9\u5668,\u672A\u6307\u5B9Acontainer\u65F6 Position ="})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fixed\uFF0C\u6307\u5B9A\u5BB9\u5668\u540E\u4F7F\u7528absolute"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,l.jsxs)(n.h2,{id:"installation",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(r,{defaultValue:"cli",children:[(0,l.jsxs)(F,{children:[(0,l.jsx)(i,{value:"cli",children:"CLI"}),(0,l.jsx)(i,{value:"manual",children:"Manual"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @meta-carbon/mc-ui@latest add float-panel `,__npmCommand__:`npx @meta-carbon/mc-ui@latest add float-panel `,__yarnCommand__:`npx @meta-carbon/mc-ui@latest add float-panel `,__pnpmCommand__:`pnpm dlx @meta-carbon/mc-ui@latest add float-panel `,__bunCommand__:`bunx --bun @meta-carbon/mc-ui@latest add float-panel `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npx"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" @meta-carbon/mc-ui@latest"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" add"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" float-panel"})]})})})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(d,{children:[(0,l.jsx)(o,{children:"Install the following dependencies:"}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @radix-ui/react-slot `,__npmCommand__:`npm install @radix-ui/react-slot `,__yarnCommand__:`yarn add @radix-ui/react-slot `,__pnpmCommand__:`pnpm add @radix-ui/react-slot `,__bunCommand__:`bun add @radix-ui/react-slot `,children:(0,l.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npm"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" install"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" @radix-ui/react-slot"})]})})})}),(0,l.jsx)(o,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(h,{name:"button",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } `,__src__:"registry/default/ui/button.tsx",__style__:"default",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" *"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" as"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" React "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Slot "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@radix-ui/react-slot"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" VariantProps "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "class-variance-authority"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" cn "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" buttonVariants "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" cva"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" variants"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "bg-primary text-primary-foreground hover:bg-primary/90"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" destructive"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "bg-destructive text-destructive-foreground hover:bg-destructive/90"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" outline"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "border border-input bg-background hover:bg-accent hover:text-accent-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" secondary"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "bg-secondary text-secondary-foreground hover:bg-secondary/80"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ghost"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "hover:bg-accent hover:text-accent-foreground"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" link"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "text-primary underline-offset-4 hover:underline"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" size"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" default"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "h-10 px-4 py-2"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" sm"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "h-9 rounded-md px-3"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" lg"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "h-11 rounded-md px-8"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" icon"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "h-10 w-10"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" defaultVariants"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "default"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" size"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "default"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" interface"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ButtonProps"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" extends"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"ButtonHTMLAttributes"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLButtonElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">,"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" VariantProps"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" asChild"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?:"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" boolean"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Button "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" React"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLButtonElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ButtonProps"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ({"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" size"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" asChild "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" false,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ..."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"props "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"},"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Comp "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" asChild "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"?"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Slot "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "button"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Comp"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"cn"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"buttonVariants"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"({"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" variant"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" size"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}))}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"props"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Button"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"displayName "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "Button"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Button"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" buttonVariants "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]})]})})})}),(0,l.jsx)(o,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(n.h2,{id:"usage",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { FloatPanel } from '@/components/ui/float-panel' `,children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FloatPanel "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" '@/components/ui/float-panel'"})]})})})}),` `,(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,l.jsx)(n.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FloatPanel title"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"'demo'"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]})})})}),` `,(0,l.jsxs)(n.h2,{id:"examples",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,l.jsxs)(n.h3,{id:"\u6307\u5B9A\u5BB9\u5668",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u6307\u5B9A\u5BB9\u5668",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u6307\u5B9A\u5BB9\u5668"]}),` `,(0,l.jsx)(s,{name:"float-panel-in-container",description:"\u6307\u5B9A\u5BB9\u5668",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { useEffect, useRef, useState } from "react" import { FloatPanel } from "@/components/ui/float-panel" export function FloatPanelInContainer() { const [container, setContainer] = useState() const containerRef = useRef(null) useEffect(() => { requestAnimationFrame(() => { setContainer(containerRef.current) }) }, []) return (

{container && (

Float Panel

)}

) } `,__src__:"registry/default/example/float-panel-in-container.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FloatPanel "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/float-panel"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" FloatPanelInContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" containerRef "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" requestAnimationFrame"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [])"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-[600px] h-[600px] relative bg-red-300"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FloatPanel"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"cursor-move"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zIndex"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 10"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" initPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" baseSize"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-full h-full bg-white text-center text-black"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Float Panel"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,l.jsxs)(n.h3,{id:"\u6307\u5B9A\u62D6\u52A8\u89E6\u53D1\u5143\u7D20",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u6307\u5B9A\u62D6\u52A8\u89E6\u53D1\u5143\u7D20",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u6307\u5B9A\u62D6\u52A8\u89E6\u53D1\u5143\u7D20"]}),` `,(0,l.jsx)(s,{name:"float-panel-custom-drag",description:"\u6307\u5B9A\u62D6\u52A8\u89E6\u53D1\u5143\u7D20",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { useEffect, useRef, useState } from "react" import { FloatPanel } from "@/components/ui/float-panel" export function FloatPanelInContainer() { const [container, setContainer] = useState() const containerRef = useRef(null) const dragRef = useRef(null) useEffect(() => { requestAnimationFrame(() => { setContainer(containerRef.current) }) }, []) return (

{container && (

Float Panel

\u62D6\u52A8

)}

) } `,__src__:"registry/default/example/float-panel-custom-drag.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FloatPanel "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/float-panel"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" FloatPanelInContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" containerRef "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" dragRef "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" requestAnimationFrame"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [])"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-[600px] h-[600px] relative bg-red-300"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FloatPanel"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zIndex"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 10"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" initPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" baseSize"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" dragRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"dragRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'" w-full h-full bg-white text-center text-black flex flex-col"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Float Panel"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"dragRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"cursor-move bg-red-300 w-20 h-20 m-auto"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" \u62D6\u52A8"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,l.jsxs)(n.h3,{id:"\u81EA\u5B9A\u4E49\u5438\u9644\u5F3A\u5EA6",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u81EA\u5B9A\u4E49\u5438\u9644\u5F3A\u5EA6",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u81EA\u5B9A\u4E49\u5438\u9644\u5F3A\u5EA6"]}),` `,(0,l.jsx)(s,{name:"float-panel-custom-threshold",description:"\u81EA\u5B9A\u4E49\u5438\u9644\u5F3A\u5EA6",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { useEffect, useRef, useState } from "react" import { FloatPanel } from "@/components/ui/float-panel" import { Slider } from "../ui/slider" export function FloatPanelInContainer() { const [container, setContainer] = useState() const containerRef = useRef(null) const dragRef = useRef(null) const [threshold, setThreshold] = useState(20) useEffect(() => { requestAnimationFrame(() => { setContainer(containerRef.current) }) }, []) return (

{ console.log("onValue change ", v) setThreshold(v[0]) }} value={[threshold]} step={1} max={100} /> {container && (

Float Panel

\u62D6\u52A8

)}

) } `,__src__:"registry/default/example/float-panel-custom-threshold.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FloatPanel "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/float-panel"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Slider "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "../ui/slider"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" FloatPanelInContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" containerRef "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" dragRef "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"threshold"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setThreshold"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"number"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(20)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" requestAnimationFrame"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [])"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-[600px] h-[600px] relative bg-red-300"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Slider"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" onValueChange"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"v"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" console"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"log"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"onValue change "'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" v"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setThreshold"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"v"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"[0])"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" value"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"threshold"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" step"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={1}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" max"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={100}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FloatPanel"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" autoFitThreshold"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"threshold"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zIndex"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 10"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" initPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" baseSize"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" dragRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"dragRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'" w-full h-full bg-white text-center text-black flex flex-col"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Float Panel"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"dragRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"cursor-move bg-red-300 w-20 h-20 m-auto"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" \u62D6\u52A8"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,l.jsxs)(n.h3,{id:"\u6DFB\u52A0\u5BF9\u9F50\u8F74\u7EBF",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u6DFB\u52A0\u5BF9\u9F50\u8F74\u7EBF",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u6DFB\u52A0\u5BF9\u9F50\u8F74\u7EBF"]}),` `,(0,l.jsx)(s,{name:"float-panel-multi-axis",description:"\u6DFB\u52A0\u5BF9\u9F50\u8F74\u7EBF",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { useEffect, useRef, useState } from "react" import { FloatPanel } from "@/components/ui/float-panel" import { Switch } from "../ui/switch" export function FloatPanelInContainer() { const [container, setContainer] = useState() const containerRef = useRef(null) const dragRef = useRef(null) const [showAxis, setShowAxis] = useState(true) useEffect(() => { requestAnimationFrame(() => { setContainer(containerRef.current) }) }, []) const fitAxisXList = [0, 300, 600] const fitAxisYList = [0, 300, 600] return (

setShowAxis(v)} /> \u663E\u793A\u8F74\u7EBF

{showAxis && fitAxisXList.map((axis, index) => (

))} {showAxis && fitAxisYList.map((axis, index) => (

))} {container && (

Float Panel

\u62D6\u52A8

)}

) } `,__src__:"registry/default/example/float-panel-multi-axis.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FloatPanel "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/float-panel"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Switch "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "../ui/switch"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" FloatPanelInContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" containerRef "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" dragRef "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"showAxis"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setShowAxis"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"boolean"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(true)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" requestAnimationFrame"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [])"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisXList "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 300,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisYList "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 300,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-[600px] h-[600px] relative p-1"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"flex gap-2"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Switch checked"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"showAxis"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" onCheckedChange"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"v"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setShowAxis"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"v"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" \u663E\u793A\u8F74\u7EBF"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"showAxis "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"axis"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" index"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" axis"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" border"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "dashed #77db89 1px"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-[1px] h-full absolute"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"index "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "_x"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ))}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"showAxis "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"map"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"axis"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" index"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" axis"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" border"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "dashed #77db89 1px"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-full h-[1px] absolute"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" key"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"index "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"+"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "_y"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ))}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FloatPanel"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zIndex"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 10"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" initPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" baseSize"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" dragRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"dragRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'" w-full h-full bg-white text-center text-black flex flex-col"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Float Panel"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"dragRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"cursor-move bg-red-300 w-20 h-20 m-auto"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" \u62D6\u52A8"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,l.jsxs)(n.h3,{id:"\u6DFB\u52A0\u9650\u5236\u4F4D\u7F6E",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u6DFB\u52A0\u9650\u5236\u4F4D\u7F6E",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u6DFB\u52A0\u9650\u5236\u4F4D\u7F6E"]}),` `,(0,l.jsx)(n.p,{children:"max\u7684left,top\u662F\u9488\u5BF9box\u5DE6\u4E0A\u89D2\u7684"}),` `,(0,l.jsx)(s,{name:"float-panel-limiter",description:"\u6DFB\u52A0\u9650\u5236\u4F4D\u7F6E",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { useEffect, useRef, useState } from "react" import { FloatPanel } from "@/components/ui/float-panel" export function FloatPanelInContainer() { const [container, setContainer] = useState() const containerRef = useRef(null) useEffect(() => { requestAnimationFrame(() => { setContainer(containerRef.current) }) }, []) return (

{container && (

Float Panel

)}

) } `,__src__:"registry/default/example/float-panel-limiter.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FloatPanel "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/float-panel"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" FloatPanelInContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" containerRef "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" requestAnimationFrame"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [])"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-[600px] h-[600px] relative bg-red-300"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FloatPanel"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"cursor-move"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" posLimiter"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" max"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 300,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 500"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" -"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" min"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 100,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 100"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zIndex"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 10"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" initPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" baseSize"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-full h-full bg-white text-center text-black"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Float Panel"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,l.jsxs)(n.h3,{id:"\u5141\u8BB8\u6EA2\u51FA",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5141\u8BB8\u6EA2\u51FA",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u5141\u8BB8\u6EA2\u51FA"]}),` `,(0,l.jsx)(n.p,{children:"\u6B64\u65F6limiter\u4E0D\u4F1A\u751F\u6548"}),` `,(0,l.jsx)(s,{name:"float-panel-allow-overflow",description:"\u5141\u8BB8\u6EA2\u51FA",children:(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { useEffect, useRef, useState } from "react" import { FloatPanel } from "@/components/ui/float-panel" export function FloatPanelInContainer() { const [container, setContainer] = useState() const containerRef = useRef(null) useEffect(() => { requestAnimationFrame(() => { setContainer(containerRef.current) }) }, []) return (

{container && (

Float Panel

)}

) } `,__src__:"registry/default/example/float-panel-allow-overflow.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FloatPanel "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/float-panel"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" FloatPanelInContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ["}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"]"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useState"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" |"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" null"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">()"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" containerRef "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">(null)"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useEffect"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" requestAnimationFrame"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" setContainer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"current"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" [])"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div ref"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"containerRef"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-[600px] h-[600px] relative bg-red-300"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"&&"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FloatPanel"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"cursor-move"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"container"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" style"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zIndex"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 10"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisXList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" allowOverflow"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" fitAxisYList"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={[0,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 600]}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" initPos"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" top"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" left"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" baseSize"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" width"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200,"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" height"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 200"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }}"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-full h-full bg-white text-center text-black"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Float Panel"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})})]})}function R(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(f,e)})):f(e)}var S=R;function c(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return P(A);})(); ;return Component;

FloatPanel

Installation

Usage

Examples

指定容器

指定拖动触发元素

自定义吸附强度

添加对齐轴线

添加限制位置

允许溢出