悬浮按钮 FloatButton

FloatButton 是一个可点击的浮动按钮，通常用于应用的页面底部，提供快速访问特定功能（如添加、返回顶部等）的入口。

---

📦 引入方式

import { FloatButton } from '@npmqg/react-ui-floatbutton';

---

🧩 使用示例

📚 使用默认样式

示例

源码

<FloatButton icon={<Home />} onClick={() => alert('按钮被点击！')} />

📚 自定义按钮样式和内容

示例

源码

import {Home} from "lucide-react";

<FloatButton
  icon={<Home />}
  className="custom-class"
  style={{ bottom: "20px" }}
  onClick={() => alert("自定义按钮被点击！")}
/>

📚 自定义按钮样式和尺寸

示例

源码

<FloatButton icon={<WandSparkles />} className="large-button" style={{ bottom: '20px', right: '20px' }} />

---

🧩 Props

Prop	类型	默认值	说明
className	string	''	额外的 CSS 样式类名
style	React.CSSProperties	{}	自定义内联样式
onClick	() => void	() => void 0	按钮点击事件回调函数
icon	React.ReactNode	null	按钮内显示的图标组件，支持自定义 SVG 或 iconfont 图标等

---

🧠 组件特性

• ✅ 支持传入自定义图标（如 SVG 图标或其他图标库）
• ✅ 通过 style 和 className 实现按钮的灵活定位与样式定制
• ✅ 使用 memo 优化组件性能，避免不必要的重渲染

---

🧱 组件结构说明

• FloatButton 是一个简单的浮动按钮，通过传递的 icon 内容作为按钮的展示元素。
• 样式通过 styles.FloatButton 类控制默认的浮动按钮样式，同时允许通过 className 和 style 来进行覆盖。

---

⚙️ 性能优化

• 组件使用了 memo 来避免因父组件的重新渲染而导致的性能浪费。只有当传入的 props 发生变化时，FloatButton 才会重新渲染。

---

📝 注意事项

• 确保传入的 icon 是有效的 React 元素，通常为 JSX 或图标组件。
• 使用 onClick 时，确保函数内部不会阻止事件的默认行为，否则可能影响浮动按钮的交互体验。