react-tech-ui 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -718,7 +718,9 @@ const items = [
|
|
|
718
718
|
|
|
719
719
|
### FloatingButton — 浮动按钮
|
|
720
720
|
|
|
721
|
-
|
|
721
|
+
可拖拽的浮动操作按钮，支持边缘吸附和命令式调用。
|
|
722
|
+
|
|
723
|
+
**声明式用法：**
|
|
722
724
|
|
|
723
725
|
```tsx
|
|
724
726
|
<FloatingButton
|
|
@@ -732,6 +734,32 @@ const items = [
|
|
|
732
734
|
</FloatingButton>
|
|
733
735
|
```
|
|
734
736
|
|
|
737
|
+
**命令式调用（方法触发）：**
|
|
738
|
+
|
|
739
|
+
```tsx
|
|
740
|
+
import { FloatingButton, Icon } from 'react-tech-ui';
|
|
741
|
+
|
|
742
|
+
// 显示悬浮按钮（默认右侧，可拖拽）
|
|
743
|
+
FloatingButton.show({
|
|
744
|
+
icon: <Icon name="setting" />,
|
|
745
|
+
children: '设置',
|
|
746
|
+
variant: 'neon',
|
|
747
|
+
draggable: true,
|
|
748
|
+
position: 'right', // 支持 'left' | 'right' | { x, y }
|
|
749
|
+
onClick: () => console.log('点击了'),
|
|
750
|
+
onDragEnd: (pos) => console.log('拖拽结束', pos),
|
|
751
|
+
});
|
|
752
|
+
|
|
753
|
+
// 更新配置
|
|
754
|
+
FloatingButton.update({
|
|
755
|
+
icon: <Icon name="refresh" />,
|
|
756
|
+
variant: 'glow',
|
|
757
|
+
});
|
|
758
|
+
|
|
759
|
+
// 隐藏
|
|
760
|
+
FloatingButton.hide();
|
|
761
|
+
```
|
|
762
|
+
|
|
735
763
|
| 属性 | 说明 | 类型 | 默认值 |
|
|
736
764
|
|------|------|------|--------|
|
|
737
765
|
| icon | 图标 | `ReactNode` | - |
|
|
@@ -745,6 +773,21 @@ const items = [
|
|
|
745
773
|
| onClick | 点击回调 | `(e: MouseEvent) => void` | - |
|
|
746
774
|
| onDragEnd | 拖拽结束回调 | `(position: { x: number, y: number }) => void` | - |
|
|
747
775
|
|
|
776
|
+
**命令式 API：**
|
|
777
|
+
|
|
778
|
+
| 方法 | 说明 | 参数 |
|
|
779
|
+
|------|------|------|
|
|
780
|
+
| `FloatingButton.show(options)` | 显示悬浮按钮 | `FloatingButtonOptions` |
|
|
781
|
+
| `FloatingButton.hide()` | 隐藏悬浮按钮 | - |
|
|
782
|
+
| `FloatingButton.update(options)` | 更新悬浮按钮配置 | `FloatingButtonOptions` |
|
|
783
|
+
|
|
784
|
+
**FloatingButtonOptions：**
|
|
785
|
+
|
|
786
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
787
|
+
|------|------|------|--------|
|
|
788
|
+
| position | 初始位置 | `'left' \| 'right' \| { x: number, y: number }` | `'right'` |
|
|
789
|
+
| 其他 | 同 FloatingButtonProps | - | - |
|
|
790
|
+
|
|
748
791
|
---
|
|
749
792
|
|
|
750
793
|
## 主题定制
|