lingee-ui 0.0.15 → 0.0.16
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 +2 -2
- package/dist/button/index.d.mts +1 -1
- package/dist/button/index.d.ts +1 -1
- package/dist/{chunk-P36XWLE4.js → chunk-22TFFOQL.js} +1 -1
- package/dist/chunk-CB2FRG23.js +1 -0
- package/dist/{chunk-K7VTWIZJ.mjs → chunk-CGHN44HV.mjs} +1 -1
- package/dist/chunk-ES5A2ZO6.js +1 -0
- package/dist/{chunk-E3NN26A5.js → chunk-ITHSP4P3.js} +1 -1
- package/dist/{chunk-XWFDVFPJ.mjs → chunk-LAIK6VBD.mjs} +1 -1
- package/dist/chunk-N5L3OI7Q.mjs +1 -0
- package/dist/chunk-Q5MDN5PA.js +2 -0
- package/dist/chunk-YNDT7LQA.mjs +1 -0
- package/dist/chunk-ZX6JEZS3.mjs +2 -0
- package/dist/{index-89atTLPD.d.mts → index-7pb5YOcq.d.mts} +2 -2
- package/dist/{index-89atTLPD.d.ts → index-7pb5YOcq.d.ts} +2 -2
- package/dist/index-CZhoE8dw.d.mts +36 -0
- package/dist/index-CZhoE8dw.d.ts +36 -0
- package/dist/index.css +1 -1
- package/dist/index.d.mts +42 -7
- package/dist/index.d.ts +42 -7
- package/dist/index.js +2 -2
- package/dist/index.mjs +2 -2
- package/dist/input/index.js +1 -1
- package/dist/input/index.mjs +1 -1
- package/dist/tabs/index.css +1 -1
- package/dist/tabs/index.js +1 -1
- package/dist/tabs/index.mjs +1 -1
- package/dist/textarea/index.css +1 -1
- package/dist/textarea/index.d.mts +2 -22
- package/dist/textarea/index.d.ts +2 -22
- package/dist/textarea/index.js +1 -1
- package/dist/textarea/index.mjs +1 -1
- package/dist/toast/index.js +1 -1
- package/dist/toast/index.mjs +1 -1
- package/dist/tokens.css +1 -1
- package/dist/tree/index.css +1 -1
- package/dist/tree/index.js +1 -1
- package/dist/tree/index.mjs +1 -1
- package/package.json +6 -6
- package/skill/AGENTS-SNIPPET.md +50 -37
- package/skill/SKILL.md +7 -7
- package/skill/VERSION.json +4 -4
- package/skill/references/components/checkbox.md +2 -0
- package/skill/references/components/color-picker.md +2 -0
- package/skill/references/components/date-picker.md +3 -0
- package/skill/references/components/dialog.md +34 -11
- package/skill/references/components/drawer.md +3 -0
- package/skill/references/components/dropdown.md +97 -79
- package/skill/references/components/ellipsis-tooltip.md +8 -0
- package/skill/references/components/empty.md +1 -1
- package/skill/references/components/form.md +8 -0
- package/skill/references/components/pagination.md +5 -0
- package/skill/references/components/popover.md +17 -6
- package/skill/references/components/radio.md +5 -1
- package/skill/references/components/range-picker.md +8 -0
- package/skill/references/components/select.md +3 -0
- package/skill/references/components/slider.md +1 -0
- package/skill/references/components/steps.md +1 -0
- package/skill/references/components/table.md +11 -2
- package/skill/references/components/textarea.md +8 -5
- package/skill/references/components/time-picker.md +2 -0
- package/skill/references/components/toast.md +35 -12
- package/skill/references/components/tooltip.md +5 -0
- package/skill/references/components/upload.md +3 -0
- package/skill/references/icons.md +22 -7
- package/skill/references/setup.md +1 -1
- package/skill/references/tokens.md +49 -36
- package/dist/chunk-K3345E52.mjs +0 -2
- package/dist/chunk-OC42BRM5.mjs +0 -1
- package/dist/chunk-R5EGWXDT.mjs +0 -1
- package/dist/chunk-TVE57POC.js +0 -1
- package/dist/chunk-UGDPRB5F.js +0 -1
- package/dist/chunk-XTBZBKJT.js +0 -2
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Dropdown 下拉菜单
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
从指定方向弹出的操作菜单列表,支持图标、分组、危险操作、子菜单等。
|
|
4
4
|
|
|
5
5
|
- 导入:`import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem, DropdownCheckboxItem, DropdownRadioGroup, DropdownRadioItem, DropdownLabel, DropdownSeparator, DropdownGroup, DropdownStatus, DropdownSub, DropdownSubTrigger, DropdownSubContent, DropdownButton } from "lingee-ui";`
|
|
6
6
|
- 可用类型:`DropdownEllipsisTooltip`, `DropdownProps`, `DropdownTriggerProps`, `DropdownContentProps`, `DropdownItemProps`, `DropdownCheckboxItemProps`, `DropdownRadioGroupProps`, `DropdownRadioItemProps`, `DropdownLabelProps`, `DropdownSeparatorProps`, `DropdownGroupProps`, `DropdownStatusProps`, `DropdownStatusType`, `DropdownStatusText`, `DropdownSubProps`, `DropdownSubTriggerProps`, `DropdownSubContentProps`, `DropdownItemData`, `DropdownMenuItemData`, `DropdownSeparatorData`, `DropdownLabelData`, `DropdownButtonProps`
|
|
@@ -29,58 +29,62 @@ export default function BasicDemo() {
|
|
|
29
29
|
|
|
30
30
|
### Dropdown
|
|
31
31
|
|
|
32
|
-
| 属性
|
|
33
|
-
|
|
34
|
-
| `items`
|
|
35
|
-
| `open`
|
|
36
|
-
| `defaultOpen`
|
|
37
|
-
| `onOpenChange`
|
|
38
|
-
| `modal`
|
|
39
|
-
| `disabled`
|
|
40
|
-
| `selectedKeys`
|
|
41
|
-
| `loading`
|
|
42
|
-
| `loadError`
|
|
43
|
-
| `onRetry`
|
|
44
|
-
| `statusText`
|
|
45
|
-
| `loadingContent` | 自定义加载中内容
|
|
46
|
-
| `errorContent`
|
|
47
|
-
| `emptyContent`
|
|
48
|
-
| `dropdownRender` | 包裹菜单内容
|
|
49
|
-
| `header`
|
|
50
|
-
| `footer`
|
|
51
|
-
| `
|
|
32
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
33
|
+
| ---------------- | ---------------------------------------------------------- | ---------------------------------------- | ------- |
|
|
34
|
+
| `items` | 菜单项数据(快捷模式) | `DropdownItemData[]` | - |
|
|
35
|
+
| `open` | 受控打开状态 | `boolean` | - |
|
|
36
|
+
| `defaultOpen` | 非受控默认打开状态 | `boolean` | `false` |
|
|
37
|
+
| `onOpenChange` | 打开状态变化回调 | `(open: boolean) => void` | - |
|
|
38
|
+
| `modal` | 是否为模态弹出 | `boolean` | `true` |
|
|
39
|
+
| `disabled` | 是否禁用 | `boolean` | `false` |
|
|
40
|
+
| `selectedKeys` | 选中项 key 数组(显示勾选) | `string[]` | - |
|
|
41
|
+
| `loading` | 加载中,面板显示加载占位 | `boolean` | `false` |
|
|
42
|
+
| `loadError` | 加载失败,面板显示失败占位(优先级低于 `loading`) | `boolean` | `false` |
|
|
43
|
+
| `onRetry` | 失败占位的重试回调,传入后占位可点击 | `() => void` | - |
|
|
44
|
+
| `statusText` | 覆盖三态文案,未传的键走语言包 | `DropdownStatusText` | - |
|
|
45
|
+
| `loadingContent` | 自定义加载中内容 | `ReactNode` | - |
|
|
46
|
+
| `errorContent` | 自定义失败内容 | `ReactNode` | - |
|
|
47
|
+
| `emptyContent` | 自定义空态内容 | `ReactNode` | - |
|
|
48
|
+
| `dropdownRender` | 包裹菜单内容 | `(menu: ReactNode) => ReactNode` | - |
|
|
49
|
+
| `header` | 固定头部内容 | `ReactNode` | - |
|
|
50
|
+
| `footer` | 固定底部内容 | `ReactNode` | - |
|
|
51
|
+
| `contentProps` | `items` 快捷模式下面板的定位配置,取值同 `DropdownContent` | `Omit<DropdownContentProps, "children">` | - |
|
|
52
|
+
| `children` | 触发器元素 | `ReactNode` | - |
|
|
52
53
|
|
|
53
54
|
### DropdownStatus
|
|
54
55
|
|
|
55
56
|
面板内三态占位。`items` 模式下由 Dropdown 自动渲染,Compound Component 模式需手动使用。
|
|
56
57
|
|
|
57
|
-
| 属性
|
|
58
|
-
|
|
59
|
-
| `status`
|
|
60
|
-
| `description` | 覆盖该状态的默认文案
|
|
61
|
-
| `onRetry`
|
|
62
|
-
| `className`
|
|
58
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
59
|
+
| ------------- | ---------------------------------- | --------------------------------- | ---------- |
|
|
60
|
+
| `status` | 占位状态 | `"loading" \| "empty" \| "error"` | - |
|
|
61
|
+
| `description` | 覆盖该状态的默认文案 | `ReactNode` | 取自语言包 |
|
|
62
|
+
| `onRetry` | 重试回调,仅 `status="error"` 生效 | `() => void` | - |
|
|
63
|
+
| `className` | 额外类名 | `string` | - |
|
|
63
64
|
|
|
64
65
|
### DropdownSubTrigger
|
|
65
66
|
|
|
66
|
-
| 属性
|
|
67
|
-
|
|
68
|
-
| `icon`
|
|
69
|
-
| `disabled`
|
|
70
|
-
| `onMouseEnter`
|
|
71
|
-
| `ellipsisTooltip` | 文本溢出时悬浮显示完整内容,见 [长文本溢出提示](#长文本溢出提示) | `boolean \| ReactNode` | -
|
|
72
|
-
| `children`
|
|
67
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
68
|
+
| ----------------- | ---------------------------------------------------------------- | ---------------------- | ------- |
|
|
69
|
+
| `icon` | 前缀图标 | `ReactNode` | - |
|
|
70
|
+
| `disabled` | 是否禁用 | `boolean` | `false` |
|
|
71
|
+
| `onMouseEnter` | 鼠标进入回调,在内部展开子菜单后执行,可用于懒加载数据 | `MouseEventHandler` | - |
|
|
72
|
+
| `ellipsisTooltip` | 文本溢出时悬浮显示完整内容,见 [长文本溢出提示](#长文本溢出提示) | `boolean \| ReactNode` | - |
|
|
73
|
+
| `children` | 触发项内容 | `ReactNode` | - |
|
|
73
74
|
|
|
74
75
|
### DropdownSubContent
|
|
75
76
|
|
|
76
|
-
| 属性
|
|
77
|
-
|
|
78
|
-
| `side`
|
|
79
|
-
| `align`
|
|
80
|
-
| `sideOffset`
|
|
81
|
-
| `
|
|
82
|
-
| `
|
|
83
|
-
| `
|
|
77
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
78
|
+
| ------------------ | ----------------------------------- | ---------------------------------------- | --------------- |
|
|
79
|
+
| `side` | 弹出方向 | `"top" \| "bottom" \| "left" \| "right"` | `"right"` |
|
|
80
|
+
| `align` | 对齐方式 | `"start" \| "center" \| "end"` | `"start"` |
|
|
81
|
+
| `sideOffset` | 侧向偏移 | `number` | `8` |
|
|
82
|
+
| `alignOffset` | 对齐方向偏移(px) | `number` | `0` |
|
|
83
|
+
| `collisionPadding` | 碰撞边界内边距(px),防止浮层贴边 | `number` | `8` |
|
|
84
|
+
| `container` | 挂载容器;传 `null` 则不使用 Portal | `HTMLElement \| null` | `document.body` |
|
|
85
|
+
| `style.maxHeight` | 覆盖面板高度上限 | `number \| string` | `346` |
|
|
86
|
+
| `footer` | 固定底部内容(不随列表滚动) | `ReactNode` | - |
|
|
87
|
+
| `children` | 子菜单内容 | `ReactNode` | - |
|
|
84
88
|
|
|
85
89
|
子菜单与主面板同口径限高:默认上限 346px(10 个菜单项),并始终与视口可用空间取较小值,超出部分由内置 ScrollArea 滚动。选项数量不受控的场景(如租户列表)无需额外处理。
|
|
86
90
|
|
|
@@ -97,42 +101,55 @@ export default function BasicDemo() {
|
|
|
97
101
|
|
|
98
102
|
### DropdownContent
|
|
99
103
|
|
|
100
|
-
| 属性
|
|
101
|
-
|
|
102
|
-
| `side`
|
|
103
|
-
| `align`
|
|
104
|
-
| `sideOffset`
|
|
105
|
-
| `header`
|
|
106
|
-
| `footer`
|
|
107
|
-
| `autoFocusFirstItem`
|
|
104
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
105
|
+
| ---------------------- | ------------------------------------------------ | ---------------------------------------- | --------------- |
|
|
106
|
+
| `side` | 弹出方向 | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` |
|
|
107
|
+
| `align` | 对齐方式 | `"start" \| "center" \| "end"` | `"start"` |
|
|
108
|
+
| `sideOffset` | 与触发器沿弹出方向的距离 | `number` | `4` |
|
|
109
|
+
| `header` | 固定头部内容 | `ReactNode` | - |
|
|
110
|
+
| `footer` | 固定底部内容 | `ReactNode` | - |
|
|
111
|
+
| `autoFocusFirstItem` | 打开时是否聚焦第一项,不传则按输入模态自动判断 | `boolean` | - |
|
|
112
|
+
| `borderless` | 隐藏面板默认描边 | `boolean` | `false` |
|
|
113
|
+
| `alignOffset` | 对齐方向偏移(px) | `number` | `0` |
|
|
114
|
+
| `collisionPadding` | 碰撞边界内边距(px),防止浮层贴边 | `number` | `8` |
|
|
115
|
+
| `container` | 挂载容器;传 `null` 则不使用 Portal | `HTMLElement \| null` | `document.body` |
|
|
116
|
+
| `onEscapeKeyDown` | Escape 按下回调,可 `preventDefault` 阻止关闭 | `(event: KeyboardEvent) => void` | - |
|
|
117
|
+
| `onPointerDownOutside` | 点击外部回调,可 `preventDefault` 阻止关闭 | `(event: CustomEvent) => void` | - |
|
|
118
|
+
| `onInteractOutside` | 外部交互回调(pointerDown + focus 的合集) | `(event: CustomEvent) => void` | - |
|
|
119
|
+
| `onCloseAutoFocus` | 关闭时自动回焦回调,可 `preventDefault` 阻止回焦 | `(event: Event) => void` | - |
|
|
108
120
|
|
|
109
121
|
打开面板时的焦点落点默认按最近一次输入方式自动判断:键盘(Enter / Space / Tab / 方向键)打开聚焦第一项,鼠标点击打开则把焦点留在菜单容器上。这样鼠标用户不会看到第一项自带 hover 态,键盘用户仍能看到焦点位置。仅在需要强制某一种行为时才传 `autoFocusFirstItem`。
|
|
110
122
|
|
|
111
123
|
### DropdownItem
|
|
112
124
|
|
|
113
|
-
| 属性
|
|
114
|
-
|
|
115
|
-
| `onSelect`
|
|
116
|
-
| `disabled`
|
|
117
|
-
| `danger`
|
|
118
|
-
| `icon`
|
|
119
|
-
| `description`
|
|
120
|
-
| `selected`
|
|
121
|
-
| `ellipsisTooltip` | 文本溢出时悬浮显示完整内容,详见下方章节 | `boolean \| ReactNode`
|
|
122
|
-
| `children`
|
|
125
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
126
|
+
| ----------------- | ---------------------------------------- | ------------------------ | ------- |
|
|
127
|
+
| `onSelect` | 选中回调 | `(event: Event) => void` | - |
|
|
128
|
+
| `disabled` | 是否禁用 | `boolean` | `false` |
|
|
129
|
+
| `danger` | 是否为危险操作(红色) | `boolean` | `false` |
|
|
130
|
+
| `icon` | 前缀图标 | `ReactNode` | - |
|
|
131
|
+
| `description` | 副标题描述(显示在主文本下方) | `ReactNode` | - |
|
|
132
|
+
| `selected` | 是否选中(显示勾选) | `boolean` | `false` |
|
|
133
|
+
| `ellipsisTooltip` | 文本溢出时悬浮显示完整内容,详见下方章节 | `boolean \| ReactNode` | - |
|
|
134
|
+
| `children` | 菜单项内容 | `ReactNode` | - |
|
|
123
135
|
|
|
124
136
|
### 长文本溢出提示
|
|
125
137
|
|
|
126
138
|
面板宽度默认随内容撑开,长文案会把浮层顶出屏幕。给菜单项传 `ellipsisTooltip` 后文本带最大宽度(240px)并单行截断,**仅在真正被截断时**悬浮显示完整内容 —— 未截断不弹,不会出现重复可见文字的干扰提示。
|
|
127
139
|
|
|
128
140
|
```tsx
|
|
129
|
-
{
|
|
130
|
-
|
|
141
|
+
{
|
|
142
|
+
/* true:取 children 作为提示内容 */
|
|
143
|
+
}
|
|
144
|
+
<DropdownItem ellipsisTooltip>{tenantName}</DropdownItem>;
|
|
131
145
|
|
|
132
|
-
{
|
|
146
|
+
{
|
|
147
|
+
/* children 是 JSX 时显式传纯文本,否则整块 JSX 会被塞进浮层 */
|
|
148
|
+
}
|
|
133
149
|
<DropdownItem ellipsisTooltip={file.name}>
|
|
134
|
-
<span>{file.name}</span
|
|
135
|
-
</
|
|
150
|
+
<span>{file.name}</span>
|
|
151
|
+
<Tag>new</Tag>
|
|
152
|
+
</DropdownItem>;
|
|
136
153
|
```
|
|
137
154
|
|
|
138
155
|
`DropdownItem` / `DropdownRadioItem` / `DropdownCheckboxItem` / `DropdownSubTrigger` 均支持,`items` 快捷模式在数据项上同名传入即可。
|
|
@@ -148,6 +165,7 @@ export default function BasicDemo() {
|
|
|
148
165
|
## DropdownButton 触发器按钮
|
|
149
166
|
|
|
150
167
|
统一的下拉触发器按钮组件,提供两种视觉态:
|
|
168
|
+
|
|
151
169
|
- **Default**:透明背景 + 深色文字,hover 时浅灰底
|
|
152
170
|
- **Selected**:蓝色浅底 + 蓝色文字,支持 hover 显示清除图标
|
|
153
171
|
- **Glassy**:半透明白底 + 描边,适用于有色背景
|
|
@@ -160,17 +178,17 @@ export default function BasicDemo() {
|
|
|
160
178
|
|
|
161
179
|
### DropdownButton
|
|
162
180
|
|
|
163
|
-
| 属性
|
|
164
|
-
|
|
165
|
-
| `children`
|
|
166
|
-
| `variant`
|
|
167
|
-
| `size`
|
|
168
|
-
| `icon`
|
|
169
|
-
| `selected`
|
|
170
|
-
| `open`
|
|
171
|
-
| `clearable` | hover 时是否显示清除图标
|
|
172
|
-
| `hideArrow` | 隐藏箭头(用于纯 toggle 按钮) | `boolean`
|
|
173
|
-
| `disabled`
|
|
174
|
-
| `onClear`
|
|
175
|
-
| `onClick`
|
|
176
|
-
| `className` | 额外类名
|
|
181
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
182
|
+
| ----------- | ------------------------------ | ------------------------- | ----------- |
|
|
183
|
+
| `children` | 按钮文本 | `ReactNode` | - |
|
|
184
|
+
| `variant` | 按钮变体 | `"default" \| "glassy"` | `"default"` |
|
|
185
|
+
| `size` | 尺寸 | `"sm" \| "lg"` | `"sm"` |
|
|
186
|
+
| `icon` | 前置图标 | `ReactNode` | - |
|
|
187
|
+
| `selected` | 是否已有选中内容(蓝色态) | `boolean` | `false` |
|
|
188
|
+
| `open` | 是否展开态(箭头旋转 180°) | `boolean` | `false` |
|
|
189
|
+
| `clearable` | hover 时是否显示清除图标 | `boolean` | `false` |
|
|
190
|
+
| `hideArrow` | 隐藏箭头(用于纯 toggle 按钮) | `boolean` | `false` |
|
|
191
|
+
| `disabled` | 是否禁用 | `boolean` | `false` |
|
|
192
|
+
| `onClear` | 清除回调 | `(e: MouseEvent) => void` | - |
|
|
193
|
+
| `onClick` | 点击回调 | `(e: MouseEvent) => void` | - |
|
|
194
|
+
| `className` | 额外类名 | `string` | - |
|
|
@@ -40,5 +40,13 @@ export default function BasicDemo() {
|
|
|
40
40
|
| `getPopupContainer` | 浮层挂载容器,接收触发节点 | `(node: HTMLElement) => HTMLElement` | - |
|
|
41
41
|
| `placement` | 弹出方向 | `TooltipPlacement` | `"top"` |
|
|
42
42
|
| `maxWidth` | 浮层最大宽度(px),`anchorClassName` 命中时以后者为准 | `number` | `280` |
|
|
43
|
+
| `disabled` | 禁用后不渲染浮层,直接展示 `children` | `boolean` | `false` |
|
|
44
|
+
| `delayDuration` | hover 延迟展示时间(ms) | `number` | `200` |
|
|
45
|
+
| `sideOffset` | 浮层与触发元素的间距(px) | `number` | `6` |
|
|
46
|
+
| `arrow` | 是否显示箭头 | `boolean` | `true` |
|
|
47
|
+
| `defaultOpen` | 非受控默认打开状态 | `boolean` | `false` |
|
|
48
|
+
| `scrollable` | 内容超出限高时是否滚动;传 `false` 则完整撑开 | `boolean` | `true` |
|
|
49
|
+
|
|
50
|
+
其余属性继承 `Omit<TooltipProps, "children" \| "content" \| "open" \| "onOpenChange" \| "container">`。
|
|
43
51
|
|
|
44
52
|
其余属性透传给 `Tooltip`(`delayDuration`、`sideOffset`、`arrow` 等)。
|
|
@@ -23,7 +23,7 @@ export default function BasicDemo() {
|
|
|
23
23
|
| `icon` | 图标:传 lingee-icon 组件自动注入渐变,传 ReactNode 完全自定义,不传使用默认图标 | `ComponentType<SvgIconProps> \| ReactNode` | 默认 DocumentLibrary |
|
|
24
24
|
| `description` | 描述文字 | `ReactNode` | - |
|
|
25
25
|
| `size` | 尺寸:`lg` 页面级 / `md` 局部(默认)/ `sm` 迷你 | `"sm" \| "md" \| "lg"` | `"md"` |
|
|
26
|
-
| `children` |
|
|
26
|
+
| `children` | 描述下方的自定义内容(如操作按钮),渲染在 `.lg-empty__extra` 内,间距由组件提供无需自行加 margin | `ReactNode` | - |
|
|
27
27
|
| `className` | 自定义类名 | `string` | - |
|
|
28
28
|
| `style` | 自定义内联样式 | `CSSProperties` | - |
|
|
29
29
|
|
|
@@ -41,6 +41,8 @@ export default function BasicDemo() {
|
|
|
41
41
|
| `form` | Form 实例(useForm 创建) | `FormInstance` | - |
|
|
42
42
|
| `onFinish` | 提交且校验通过回调 | `(values) => void` | - |
|
|
43
43
|
| `onFinishFailed` | 校验失败回调 | `() => void` | - |
|
|
44
|
+
| `onValuesChange` | 字段值变化回调 | `(changedValues, allValues) => void` | - |
|
|
45
|
+
| `requiredMark` | 是否在必填项标签后显示 `*` | `boolean` | `true` |
|
|
44
46
|
|
|
45
47
|
### Form.Item
|
|
46
48
|
|
|
@@ -51,6 +53,12 @@ export default function BasicDemo() {
|
|
|
51
53
|
| `required` | 是否必填 | `boolean` | `false` |
|
|
52
54
|
| `rules` | 校验规则 | `Rule[]` | - |
|
|
53
55
|
| `valuePropName` | 值属性名 | `string` | `"value"` |
|
|
56
|
+
| `trigger` | 触发 onChange 的 prop 名 | `string` | `"onChange"` |
|
|
57
|
+
| `getValueFromEvent` | 从事件参数中提取值 | `(...args: unknown[]) => unknown` | - |
|
|
58
|
+
| `requiredMessage` | 必填提示文案,配合 `required` 使用 | `string` | - |
|
|
59
|
+
| `tooltip` | 标签后的提示信息 | `ReactNode` | - |
|
|
60
|
+
| `extra` | 额外说明,显示在控件下方 | `ReactNode` | - |
|
|
61
|
+
| `injectError` | 校验失败时是否向子控件注入 `error={true}` | `boolean` | `true` |
|
|
54
62
|
|
|
55
63
|
### Form.useForm
|
|
56
64
|
|
|
@@ -40,3 +40,8 @@ export default function BasicDemo() {
|
|
|
40
40
|
| `showQuickJumper` | 是否显示快速跳转 | `boolean` | `false` |
|
|
41
41
|
| `variant` | 样式变体 | `"simple" \| "bordered" \| "borderless"` | `"bordered"` |
|
|
42
42
|
| `disabled` | 是否禁用 | `boolean` | `false` |
|
|
43
|
+
| `align` | 水平对齐方式 | `"start" \| "center" \| "end"` | - |
|
|
44
|
+
| `defaultPageSize` | 非受控默认每页条数 | `number` | - |
|
|
45
|
+
| `pageSizeOptions` | 每页条数下拉选项 | `number[]` | - |
|
|
46
|
+
| `hideOnSinglePage` | 仅一页时是否隐藏整个分页器 | `boolean` | `false` |
|
|
47
|
+
| `onPageSizeChange` | 每页条数变化回调 | `(current: number, size: number) => void` | - |
|
|
@@ -17,7 +17,7 @@ export default function BasicDemo() {
|
|
|
17
17
|
<PopoverTrigger>
|
|
18
18
|
<Button>Click me</Button>
|
|
19
19
|
</PopoverTrigger>
|
|
20
|
-
<PopoverContent>
|
|
20
|
+
<PopoverContent className="lg-popover--card">
|
|
21
21
|
<p style={{ margin: 0 }}>This is the content of the popover.</p>
|
|
22
22
|
</PopoverContent>
|
|
23
23
|
</Popover>
|
|
@@ -42,8 +42,19 @@ export default function BasicDemo() {
|
|
|
42
42
|
|
|
43
43
|
### PopoverContent
|
|
44
44
|
|
|
45
|
-
| 属性
|
|
46
|
-
|
|
47
|
-
| `side`
|
|
48
|
-
| `align`
|
|
49
|
-
| `sideOffset` |
|
|
45
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
46
|
+
|------|------|------|--------|
|
|
47
|
+
| `side` | 期望弹出方向;空间不足时可能自动翻转 | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` |
|
|
48
|
+
| `align` | 沿弹出方向的对齐方式 | `"start" \| "center" \| "end"` | `"center"` |
|
|
49
|
+
| `sideOffset` | 弹出层与触发器的间距(px) | `number` | `4` |
|
|
50
|
+
| `alignOffset` | 沿对齐轴的偏移(px) | `number` | `0` |
|
|
51
|
+
| `collisionPadding` | 与碰撞边界的最小距离(px) | `number` | `8` |
|
|
52
|
+
| `container` | Portal 挂载容器;传 `null` 时就地渲染 | `HTMLElement \| null` | `document.body` |
|
|
53
|
+
| `className` | 自定义类名;使用 `lg-popover--card` 启用标准卡片外观 | `string` | - |
|
|
54
|
+
| `onEscapeKeyDown` | Escape 按下回调,可 `preventDefault` 阻止关闭 | `(event: KeyboardEvent) => void` | - |
|
|
55
|
+
| `onPointerDownOutside` | 点击外部回调,可 `preventDefault` 阻止关闭 | `(event: CustomEvent) => void` | - |
|
|
56
|
+
| `onFocusOutside` | 焦点移出回调 | `(event: CustomEvent) => void` | - |
|
|
57
|
+
| `onInteractOutside` | 外部交互回调(pointerDown + focus) | `(event: CustomEvent) => void` | - |
|
|
58
|
+
| `onOpenAutoFocus` | 打开时自动聚焦回调,可 `preventDefault` 阻止自动聚焦 | `(event: Event) => void` | - |
|
|
59
|
+
| `onCloseAutoFocus` | 关闭时自动回焦回调,可 `preventDefault` 阻止回焦 | `(event: Event) => void` | - |
|
|
60
|
+
| `children` | 浮层内容 | `ReactNode` | - |
|
|
@@ -29,10 +29,14 @@ export default function BasicDemo() {
|
|
|
29
29
|
|------|------|------|--------|
|
|
30
30
|
| `value` | 受控选中值 | `string` | - |
|
|
31
31
|
| `defaultValue` | 默认选中值 | `string` | - |
|
|
32
|
-
| `
|
|
32
|
+
| `onChange` | 选中值变化回调 | `(value: string) => void` | - |
|
|
33
33
|
| `disabled` | 是否整组禁用 | `boolean` | `false` |
|
|
34
34
|
| `orientation` | 排列方向 | `"horizontal" \| "vertical"` | `"vertical"` |
|
|
35
35
|
| `size` | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
|
|
36
|
+
| `name` | 组名(用于原生 form) | `string` | - |
|
|
37
|
+
| `children` | 子元素(`RadioItem` 列表) | `ReactNode` | - |
|
|
38
|
+
| `className` | 自定义类名 | `string` | - |
|
|
39
|
+
| `style` | 自定义样式 | `CSSProperties` | - |
|
|
36
40
|
|
|
37
41
|
### RadioItem
|
|
38
42
|
|
|
@@ -38,6 +38,14 @@ export default function BasicDemo() {
|
|
|
38
38
|
| `errorMessage` | 错误提示信息 | `string` | - |
|
|
39
39
|
| `minDate` | 最小可选日期 | `Date` | - |
|
|
40
40
|
| `maxDate` | 最大可选日期 | `Date` | - |
|
|
41
|
+
| `disabledDate` | 禁用日期判断函数 | `(date: Date) => boolean` | - |
|
|
42
|
+
| `format` | 日期格式化 | `string` | `"yyyy/MM/dd"` |
|
|
43
|
+
| `separator` | 起止日期之间的分隔符 | `string` | `"~"` |
|
|
44
|
+
| `size` | 尺寸 | `"sm" \| "md" \| "lg"` | `"md"` |
|
|
45
|
+
| `allowClear` | 是否显示清空按钮 | `boolean` | `true` |
|
|
46
|
+
| `weekStartsOn` | 一周起始日,`0` 为周日 | `0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` | `1` |
|
|
47
|
+
| `getPopupContainer` | 浮层挂载容器,用于在 `overflow` 裁剪的滚动容器内就地挂载 | `() => HTMLElement` | - |
|
|
48
|
+
| `onOpenChange` | 面板展开/收起回调 | `(open: boolean) => void` | - |
|
|
41
49
|
|
|
42
50
|
### DateRange
|
|
43
51
|
|
|
@@ -51,3 +51,6 @@ export default function BasicDemo() {
|
|
|
51
51
|
| `suffixIcon` | 后缀图标 | `ReactNode` | - |
|
|
52
52
|
| `maxTagCount` | 多选模式最多显示 Tag 数 | `number` | - |
|
|
53
53
|
| `dropdown` | 下拉面板配置 | `SelectDropdownProps` | - |
|
|
54
|
+
| `defaultValue` | 非受控默认值 | `T \| T[]` | - |
|
|
55
|
+
| `onDropdownVisibleChange` | 下拉展开/收起回调 | `(open: boolean) => void` | - |
|
|
56
|
+
| `labelRender` | 自定义选中值在触发器中的渲染。用于下拉面板展示丰富内容(如头像+名字+工号)、触发器只显示简短文本的场景 | `(value: T, option?: SelectOption<T>) => ReactNode` | 渲染 `option.label` |
|
|
@@ -40,3 +40,4 @@ export default function BasicDemo() {
|
|
|
40
40
|
| `orientation` | 方向 | `"horizontal" \| "vertical"` | `"horizontal"` |
|
|
41
41
|
| `tooltip` | 是否显示 Tooltip | `boolean` | `true` |
|
|
42
42
|
| `tipFormatter` | Tooltip 格式化 | `(value: number) => string` | - |
|
|
43
|
+
| `onValueCommit` | 拖拽结束时回调,适合只在最终值上触发请求的场景 | `(value: number[]) => void` | - |
|
|
@@ -31,4 +31,5 @@ export default function BasicDemo() {
|
|
|
31
31
|
| `size` | 尺寸 | `"default" \| "small"` | `"default"` |
|
|
32
32
|
| `status` | 当前步骤状态 | `"process" \| "error"` | `"process"` |
|
|
33
33
|
| `titlePlacement` | 标题方向 | `"vertical" \| "horizontal"` | `"vertical"` |
|
|
34
|
+
| `initial` | 起始序号 | `number` | `0` |
|
|
34
35
|
| `onChange` | 步骤点击回调 | `(current: number) => void` | - |
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
用于展示行列数据的表格组件,支持排序、行选择、加载态等。
|
|
4
4
|
|
|
5
5
|
- 导入:`import { Table } from "lingee-ui";`
|
|
6
|
-
- 可用类型:`TableProps`, `TableColumnType`, `TableRowSelection`, `TableSize`, `TableSorterState`
|
|
6
|
+
- 可用类型:`TableProps`, `TableColumnType`, `TableRowSelection`, `TableSize`, `TableSorterState`, `TableStatusType`, `TableStatusText`
|
|
7
7
|
|
|
8
8
|
## 最小示例
|
|
9
9
|
|
|
@@ -33,7 +33,10 @@ export default function BasicDemo() {
|
|
|
33
33
|
|------|------|------|--------|
|
|
34
34
|
| `columns` | 列定义 | `Array<{ title, dataIndex, key, render?, width?, align?, fixed?, sorter? }>` | - |
|
|
35
35
|
| `dataSource` | 数据源 | `Array<Record<string, any>>` | `[]` |
|
|
36
|
-
| `loading` |
|
|
36
|
+
| `loading` | 加载中。无数据时表体展示加载缺省态,已有数据时展示遮罩 | `boolean` | `false` |
|
|
37
|
+
| `loadError` | 加载失败,表体展示失败缺省态。优先级低于 `loading` | `boolean` | `false` |
|
|
38
|
+
| `onRetry` | 失败缺省态的重试回调,传入后缺省态可点击 | `() => void` | - |
|
|
39
|
+
| `statusText` | 覆盖三态缺省文案 | `{ loading?, empty?, error? }` | - |
|
|
37
40
|
| `rowKey` | 行唯一标识字段 | `string \| ((record) => string)` | `"key"` |
|
|
38
41
|
| `rowSelection` | 行选择配置 | `{ selectedRowKeys, onChange }` | - |
|
|
39
42
|
| `onRow` | 行事件 | `(record, index) => HTMLAttributes` | - |
|
|
@@ -42,3 +45,9 @@ export default function BasicDemo() {
|
|
|
42
45
|
| `striped` | 是否显示斑马纹 | `boolean` | `false` |
|
|
43
46
|
| `hoverable` | 是否行悬浮高亮 | `boolean` | `true` |
|
|
44
47
|
| `scroll` | 滚动设置 | `{ x?: number, y?: number }` | - |
|
|
48
|
+
| `showHeader` | 是否显示表头 | `boolean` | `true` |
|
|
49
|
+
| `title` | 表格标题 | `ReactNode \| (() => ReactNode)` | - |
|
|
50
|
+
| `footer` | 表格底部 | `ReactNode \| (() => ReactNode)` | - |
|
|
51
|
+
| `empty` | 自定义空态内容,覆盖内置空缺省态 | `ReactNode` | - |
|
|
52
|
+
| `errorContent` | 自定义失败内容,覆盖内置失败缺省态 | `ReactNode` | - |
|
|
53
|
+
| `onSortChange` | 排序变化回调 | `(sorter: TableSorterState) => void` | - |
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
多行纯文本编辑控件,支持字数统计和自动高度。
|
|
4
4
|
|
|
5
5
|
- 导入:`import { Textarea } from "lingee-ui";`
|
|
6
|
-
- 可用类型:`TextareaProps`
|
|
6
|
+
- 可用类型:`TextareaProps`, `TextareaAutoSizeConfig`
|
|
7
7
|
|
|
8
8
|
## 最小示例
|
|
9
9
|
|
|
@@ -20,11 +20,14 @@ export default function BasicDemo() {
|
|
|
20
20
|
| 属性 | 说明 | 类型 | 默认值 |
|
|
21
21
|
|------|------|------|--------|
|
|
22
22
|
| `placeholder` | 占位文本 | `string` | - |
|
|
23
|
-
| `rows` |
|
|
23
|
+
| `rows` | 显示行数,开启 `autoSize` 后失效 | `number` | - |
|
|
24
24
|
| `maxLength` | 最大字符数 | `number` | - |
|
|
25
|
-
| `showCount` |
|
|
26
|
-
| `autoSize` |
|
|
25
|
+
| `showCount` | 是否显示字数统计(需配合 `maxLength`) | `boolean` | `false` |
|
|
26
|
+
| `autoSize` | 高度随内容自适应;对象形式约束行数区间 | `boolean \| { minRows?: number; maxRows?: number }` | `false` |
|
|
27
27
|
| `disabled` | 是否禁用 | `boolean` | `false` |
|
|
28
28
|
| `error` | 是否为错误状态 | `boolean` | `false` |
|
|
29
29
|
| `value` | 受控值 | `string` | - |
|
|
30
|
-
| `onChange` | 值变化回调 | `(e: ChangeEvent) => void` | - |
|
|
30
|
+
| `onChange` | 值变化回调 | `(e: ChangeEvent<HTMLTextAreaElement>) => void` | - |
|
|
31
|
+
| `onPressEnter` | 按下 Enter 时的回调(不含 Shift+Enter) | `(e: KeyboardEvent<HTMLTextAreaElement>) => void` | - |
|
|
32
|
+
|
|
33
|
+
其余原生 `<textarea>` 属性均可透传。`TextareaProps` 继承 `Omit<TextareaHTMLAttributes, "onChange">`。
|
|
@@ -37,6 +37,8 @@ export default function BasicDemo() {
|
|
|
37
37
|
| `error` | 是否显示错误状态 | `boolean` | `false` |
|
|
38
38
|
| `errorMessage` | 错误提示信息 | `string` | - |
|
|
39
39
|
| `allowClear` | 是否允许清除 | `boolean` | `true` |
|
|
40
|
+
| `getPopupContainer` | 浮层挂载容器,用于在 `overflow` 裁剪的滚动容器内就地挂载 | `() => HTMLElement` | - |
|
|
41
|
+
| `onOpenChange` | 面板展开/收起回调 | `(open: boolean) => void` | - |
|
|
40
42
|
|
|
41
43
|
### TimeValue
|
|
42
44
|
|
|
@@ -29,19 +29,42 @@ Toast 通过命令式方法调用,无需手动渲染组件。
|
|
|
29
29
|
|
|
30
30
|
### 方法
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|------|------|------|
|
|
34
|
-
| `toast.success(message)` | 成功提示 | `string \| ToastOptions` |
|
|
35
|
-
| `toast.error(message)` | 错误提示 | `string \| ToastOptions` |
|
|
36
|
-
| `toast.warning(message)` | 警告提示 | `string \| ToastOptions` |
|
|
37
|
-
| `toast.info(message)` | 信息提示 | `string \| ToastOptions` |
|
|
38
|
-
| `toast.destroy()` | 销毁所有消息 | - |
|
|
32
|
+
四个提示方法均返回**关闭函数**,调用即可手动关掉该条提示。
|
|
39
33
|
|
|
40
|
-
|
|
34
|
+
| 方法 | 说明 | 参数 | 返回值 |
|
|
35
|
+
|------|------|------|--------|
|
|
36
|
+
| `toast.info(message)` | 信息提示 | `string \| ToastConfig` | `() => void` |
|
|
37
|
+
| `toast.success(message)` | 成功提示 | `string \| ToastConfig` | `() => void` |
|
|
38
|
+
| `toast.warning(message)` | 警告提示 | `string \| ToastConfig` | `() => void` |
|
|
39
|
+
| `toast.error(message)` | 错误提示 | `string \| ToastConfig` | `() => void` |
|
|
40
|
+
| `toast.destroy()` | 销毁所有提示 | - | `void` |
|
|
41
|
+
| `toast.config(options)` | 设置全局默认项 | `ToastGlobalConfig` | `void` |
|
|
42
|
+
|
|
43
|
+
设 `duration: 0` 的常驻提示不会自动消失,也不随发起页卸载而消失,**必须持有返回的关闭函数并主动调用**:
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
const close = toast.info({ content: "正在同步…", duration: 0 });
|
|
47
|
+
// 时机合适时
|
|
48
|
+
close();
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### ToastConfig
|
|
52
|
+
|
|
53
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
54
|
+
|------|------|------|--------|
|
|
55
|
+
| `content` | 提示内容 | `ReactNode` | - |
|
|
56
|
+
| `icon` | 自定义图标,替换默认类型图标;传 `null` 不显示图标 | `ReactNode \| null` | 按类型取 |
|
|
57
|
+
| `duration` | 自动关闭延时(ms),`0` 为不自动关闭 | `number` | `3000` |
|
|
58
|
+
| `closable` | 是否显示关闭按钮 | `boolean` | `false` |
|
|
59
|
+
| `onClose` | 关闭时回调 | `() => void` | - |
|
|
60
|
+
| `key` | 唯一标识,相同 key 会更新已有提示 | `string` | - |
|
|
61
|
+
| `className` | 自定义类名 | `string` | - |
|
|
62
|
+
|
|
63
|
+
### ToastGlobalConfig
|
|
41
64
|
|
|
42
65
|
| 属性 | 说明 | 类型 | 默认值 |
|
|
43
66
|
|------|------|------|--------|
|
|
44
|
-
| `
|
|
45
|
-
| `duration` |
|
|
46
|
-
| `
|
|
47
|
-
| `
|
|
67
|
+
| `maxCount` | 同时显示的最大提示数 | `number` | - |
|
|
68
|
+
| `duration` | 默认自动关闭延时(ms) | `number` | `3000` |
|
|
69
|
+
| `top` | 距顶部距离(px) | `number` | - |
|
|
70
|
+
| `getContainer` | 自定义挂载容器 | `() => HTMLElement` | - |
|
|
@@ -31,6 +31,11 @@ export default function BasicDemo() {
|
|
|
31
31
|
| `sideOffset` | 箭头尖端与触发元素的间距(px) | `number` | `4` |
|
|
32
32
|
| `maxWidth` | 浮层最大宽度(px),覆盖档位默认宽度 | `number` | 按档位取 240 / 240 / 320 / 500 |
|
|
33
33
|
| `scrollable` | 内容超出限高时滚动(单行档不生效) | `boolean` | `true` |
|
|
34
|
+
| `disabled` | 禁用后不渲染浮层,直接展示 `children` | `boolean` | `false` |
|
|
35
|
+
| `open` | 受控开关 | `boolean` | - |
|
|
36
|
+
| `defaultOpen` | 非受控默认打开状态 | `boolean` | `false` |
|
|
37
|
+
| `onOpenChange` | 开关变化回调 | `(open: boolean) => void` | - |
|
|
38
|
+
| `container` | 挂载容器;传 `null` 则不使用 Portal(就地渲染) | `HTMLElement \| null` | `document.body` |
|
|
34
39
|
|
|
35
40
|
| `children` | 触发元素 | `ReactNode` | - |
|
|
36
41
|
|
|
@@ -46,6 +46,9 @@ export default function BasicDemo() {
|
|
|
46
46
|
| `beforeUpload` | 上传前钩子,返回 `false` 阻止、返回 `File`/`Blob` 替换待传文件 | `(file, fileList) => boolean \| File \| Blob \| Promise<...>` | - |
|
|
47
47
|
| `pasteable` | 是否支持粘贴文件(如截图) | `boolean` | `false` |
|
|
48
48
|
| `validateAccept` | 是否按 `accept` 校验类型,拦住拖拽与粘贴 | `boolean` | `false` |
|
|
49
|
+
| `defaultFileList` | 非受控默认文件列表 | `UploadFile[]` | - |
|
|
50
|
+
| `onRemove` | 移除前拦截,返回 `false` 或 reject 阻止移除 | `(file: UploadFile) => boolean \| void \| Promise<boolean>` | - |
|
|
51
|
+
| `renderItem` | 自定义文件列表项渲染 | `(file: UploadFile, actions: FileItemActions) => ReactNode` | - |
|
|
49
52
|
| `children` | 触发区域 | `ReactNode` | - |
|
|
50
53
|
|
|
51
54
|
## 内置 XHR 上传
|