@canlooks/can-ui 0.0.88 → 0.0.90
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/dist/cjs/components/calendar/calendar.d.ts +5 -2
- package/dist/cjs/components/calendar/calendar.js +3 -1
- package/dist/cjs/components/calendar/calendar.style.js +124 -124
- package/dist/cjs/components/calendar/panelDates.d.ts +1 -1
- package/dist/cjs/components/calendar/panelDates.js +5 -2
- package/dist/cjs/components/clickAway/clickAway.d.ts +1 -1
- package/dist/cjs/components/curd/curd.js +14 -14
- package/dist/cjs/components/curd/curd.style.js +1 -1
- package/dist/cjs/components/dataGrid/dataGrid.style.js +1 -0
- package/dist/cjs/components/dateTimePicker/dateTimePicker.js +2 -2
- package/dist/cjs/components/dateTimePicker/timer.d.ts +1 -1
- package/dist/cjs/components/dateTimePicker/timer.js +16 -8
- package/dist/cjs/components/popper/popperContext.d.ts +1 -1
- package/dist/cjs/components/popper/popperContext.js +11 -9
- package/dist/cjs/components/status/status.d.ts +6 -6
- package/dist/cjs/extensions/reactiveForm/reactiveFormItem.js +1 -0
- package/dist/esm/components/calendar/calendar.d.ts +5 -2
- package/dist/esm/components/calendar/calendar.js +3 -1
- package/dist/esm/components/calendar/calendar.style.js +124 -124
- package/dist/esm/components/calendar/panelDates.d.ts +1 -1
- package/dist/esm/components/calendar/panelDates.js +5 -2
- package/dist/esm/components/clickAway/clickAway.d.ts +1 -1
- package/dist/esm/components/curd/curd.js +14 -14
- package/dist/esm/components/curd/curd.style.js +1 -1
- package/dist/esm/components/dataGrid/dataGrid.style.js +1 -0
- package/dist/esm/components/dateTimePicker/dateTimePicker.js +2 -2
- package/dist/esm/components/dateTimePicker/timer.d.ts +1 -1
- package/dist/esm/components/dateTimePicker/timer.js +15 -8
- package/dist/esm/components/popper/popperContext.d.ts +1 -1
- package/dist/esm/components/popper/popperContext.js +12 -10
- package/dist/esm/components/status/status.d.ts +6 -6
- package/dist/esm/extensions/reactiveForm/reactiveFormItem.js +1 -0
- package/extensions/curd.cjs +5 -5
- package/extensions/documentViewer.cjs +5 -5
- package/extensions/textFormatter.cjs +5 -5
- package/package.json +1 -1
- package/documentation/dist/assets/index-DvrKS6Tv.js +0 -7747
- package/documentation/dist/atom-one-dark.min.css +0 -1
- package/documentation/dist/components/accordion.md +0 -38
- package/documentation/dist/components/actionSheet.md +0 -49
- package/documentation/dist/components/alert.md +0 -38
- package/documentation/dist/components/anchorList.md +0 -36
- package/documentation/dist/components/autocomplete.md +0 -68
- package/documentation/dist/components/avatar.md +0 -79
- package/documentation/dist/components/badge.md +0 -33
- package/documentation/dist/components/bottomNavigation.md +0 -39
- package/documentation/dist/components/breadcrumb.md +0 -28
- package/documentation/dist/components/bubbleConfirm.md +0 -34
- package/documentation/dist/components/button.md +0 -62
- package/documentation/dist/components/card.md +0 -30
- package/documentation/dist/components/cascade.md +0 -48
- package/documentation/dist/components/checkbox.md +0 -36
- package/documentation/dist/components/colorPicker.md +0 -27
- package/documentation/dist/components/contextMenu.md +0 -27
- package/documentation/dist/components/counter.md +0 -29
- package/documentation/dist/components/dataGrid.md +0 -112
- package/documentation/dist/components/dateTimePicker.md +0 -35
- package/documentation/dist/components/dateTimeRangePicker.md +0 -36
- package/documentation/dist/components/descriptions.md +0 -35
- package/documentation/dist/components/dialog.md +0 -56
- package/documentation/dist/components/divider.md +0 -26
- package/documentation/dist/components/drawer.md +0 -40
- package/documentation/dist/components/flex.md +0 -20
- package/documentation/dist/components/form.md +0 -131
- package/documentation/dist/components/formDialog.md +0 -36
- package/documentation/dist/components/grid.md +0 -34
- package/documentation/dist/components/highlight.md +0 -26
- package/documentation/dist/components/image.md +0 -90
- package/documentation/dist/components/input.md +0 -39
- package/documentation/dist/components/loading.md +0 -46
- package/documentation/dist/components/menu.md +0 -85
- package/documentation/dist/components/pagination.md +0 -38
- package/documentation/dist/components/pickerDialog.md +0 -56
- package/documentation/dist/components/placeholder.md +0 -30
- package/documentation/dist/components/progress.md +0 -43
- package/documentation/dist/components/radio.md +0 -37
- package/documentation/dist/components/rating.md +0 -35
- package/documentation/dist/components/resizable.md +0 -41
- package/documentation/dist/components/scrollbar.md +0 -31
- package/documentation/dist/components/segmented.md +0 -57
- package/documentation/dist/components/select.md +0 -30
- package/documentation/dist/components/skeleton.md +0 -26
- package/documentation/dist/components/slidableActions.md +0 -53
- package/documentation/dist/guide/appComponent.md +0 -30
- package/documentation/dist/guide/globalMethods.md +0 -238
- package/documentation/dist/guide/icon.md +0 -57
- package/documentation/dist/guide/introduction.md +0 -2
- package/documentation/dist/guide/overrideProps.md +0 -0
- package/documentation/dist/guide/startup.md +0 -23
- package/documentation/dist/guide/theme.md +0 -249
- package/documentation/dist/index.html +0 -13
- package/documentation/dist/logo.png +0 -0
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
# ContextMenu 右键菜单
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {ContextMenu} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
return (
|
|
10
|
-
<ContextMenu items={[
|
|
11
|
-
{label: '菜单1', onClick: () => console.log('菜单1')},
|
|
12
|
-
{label: '菜单2', onClick: () => console.log('菜单2')},
|
|
13
|
-
{label: '菜单3', onClick: () => console.log('菜单3'), color: 'error', emphasized: true}
|
|
14
|
-
]}>
|
|
15
|
-
<Card elevation={2}>请点击右键</Card>
|
|
16
|
-
</ContextMenu>
|
|
17
|
-
)
|
|
18
|
-
}
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Props
|
|
22
|
-
|
|
23
|
-
`<ContextMenu/>`继承了`<Popper/>`组件的所有属性,除此之外还有:
|
|
24
|
-
|
|
25
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
26
|
-
|-------|--------------------------------------------------------|-----|----|
|
|
27
|
-
| items | ([MenuItemProps](/components/menuItem#MenuItemProps) \| ReactNode)[] | - | |
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
# Counter 数量输入框
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {Counter} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
return (
|
|
10
|
-
<Counter/>
|
|
11
|
-
)
|
|
12
|
-
}
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Props
|
|
16
|
-
|
|
17
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
18
|
-
|---------------|-----------------------------------------|----------|-----------------|
|
|
19
|
-
| size | 'small' \| 'medium' \| 'large' | 'medium' | |
|
|
20
|
-
| min | number | - | |
|
|
21
|
-
| max | number | - | |
|
|
22
|
-
| step | number | 1 | 每次减少或增加的步长 |
|
|
23
|
-
| precision | number | 0 | 数值精度 |
|
|
24
|
-
| defaultValue | number | - | |
|
|
25
|
-
| value | number | - | |
|
|
26
|
-
| onChange | (value) => void | - | |
|
|
27
|
-
| decreaseProps | [ButtonProps](/components/button#Props) | - | 减少按钮的属性 |
|
|
28
|
-
| increaseProps | [ButtonProps](/components/button#Props) | - | 增加按钮的属性 |
|
|
29
|
-
| inputProps | [InputProps](/components/input#Props) | - | `<Input/>`组件的属性 |
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
# DataGrid 数据表格
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {DataGrid} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
const columns = [
|
|
10
|
-
{
|
|
11
|
-
title: '姓名',
|
|
12
|
-
field: 'name'
|
|
13
|
-
},
|
|
14
|
-
{
|
|
15
|
-
title: '年龄',
|
|
16
|
-
field: 'age',
|
|
17
|
-
sorter: (a: any, b: any) => a.age - b.age
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
title: '住址',
|
|
21
|
-
children: [
|
|
22
|
-
{
|
|
23
|
-
title: '城市',
|
|
24
|
-
field: 'city'
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
title: '街道',
|
|
28
|
-
field: 'address'
|
|
29
|
-
}
|
|
30
|
-
]
|
|
31
|
-
},
|
|
32
|
-
]
|
|
33
|
-
|
|
34
|
-
const rows = [
|
|
35
|
-
{
|
|
36
|
-
id: 1,
|
|
37
|
-
name: '胡彦斌',
|
|
38
|
-
age: 32,
|
|
39
|
-
city: '杭州',
|
|
40
|
-
address: '西湖区湖底公园1号',
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
id: 2,
|
|
44
|
-
name: '胡彦祖',
|
|
45
|
-
age: 42,
|
|
46
|
-
city: '杭州',
|
|
47
|
-
address: '西湖区湖底公园2号',
|
|
48
|
-
},
|
|
49
|
-
]
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<DataGrid
|
|
53
|
-
columns={columns}
|
|
54
|
-
rows={rows}
|
|
55
|
-
selectable
|
|
56
|
-
bordered
|
|
57
|
-
/>
|
|
58
|
-
)
|
|
59
|
-
}
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
## DataGrid Props
|
|
63
|
-
|
|
64
|
-
`<DataGrid/>` 组件继承了[<Table\/>](/components/table)组件的所有属性,除此之外还有以下属性:
|
|
65
|
-
|
|
66
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
67
|
-
|--------------------|-----------------------------------------------------------------------------|-----------------------------------------|----------------------------------|
|
|
68
|
-
| columns | [ColumnType](#ColumnType)[] | - | 列的定义 |
|
|
69
|
-
| rows | Array | - | 行数据 |
|
|
70
|
-
| primaryKey | Id | 'id' | 数据的主键 |
|
|
71
|
-
| childrenKey | Id | 'children' | 当数据中存在该字段,则会渲染可展开的子行 |
|
|
72
|
-
| indent | number | 24 | 子行的缩进 |
|
|
73
|
-
| renderExpandIcon | (key: Id, isExpand: boolean, expanded: Id[]) => void | - | 自定义渲染展开按钮 |
|
|
74
|
-
| defaultExpanded | Id[] | [] | 默认展开的行 |
|
|
75
|
-
| expanded | Id[] | - | 受控的展开行 |
|
|
76
|
-
| onExpandedChange | (expanded: Id[], key: Id, isExpand: boolean) => void | - | 展开行变化的回调 |
|
|
77
|
-
| rowProps | (row: R, index: number, rows: R[]) => RowProps | - | 传递给`<tr/>`标签的属性 |
|
|
78
|
-
| selectable | boolean | false | 行是否可选择 |
|
|
79
|
-
| clickRowToSelect | boolean | true | 点击行时是否触发选中 |
|
|
80
|
-
| selectorProps | (row: R, index: number, rows: R[]) => CheckboxProps \| RadioProps | - | 传递给`<Checkbox/>`或`<Radiu/>`组件的属性 |
|
|
81
|
-
| relation | 'dependent' \| 'standalone' | 'dependent' | 选中行之间的关系 |
|
|
82
|
-
| integration | 'shallowest' \| 'deepest' \| 'all' | 'shallowest' | 所选值的归集方式 |
|
|
83
|
-
| allowSelectAll | boolean | true | |
|
|
84
|
-
| defaultOrderColumn | Id | - | 默认排序的列 |
|
|
85
|
-
| orderColumn | Id | - | 受控的排序的列 |
|
|
86
|
-
| defaultOrderType | 'ascend' \| 'descend' | 'descend' | 默认排序方法 |
|
|
87
|
-
| orderType | 'ascend' \| 'descend' | - | 受控的排序方法排序方法 |
|
|
88
|
-
| onOrderChange | (orderColumn, orderType) => void | - | 排序变化回调 |
|
|
89
|
-
| loading | boolean | false | |
|
|
90
|
-
| emptyPlaceholder | ReactNode | [Placeholder/](/components/placeholder) | 空行占位符 |
|
|
91
|
-
| paginatable | boolean | true | 是否使用内置分页 |
|
|
92
|
-
| paginationProps | [PaginationProps](/components/pagination) | - | 传递给`<Pagination/>`组件的属性 |
|
|
93
|
-
| renderPagination | (paginationProps) => ReactNode | - | 自定义渲染分页器 |
|
|
94
|
-
| multiple | boolean | false | `selectable`指定为`true`时有效 |
|
|
95
|
-
| defaultValue | Id \| Id[] | - | `selectable`指定为`true`时有效 |
|
|
96
|
-
| value | Id \| Id[] | - | `selectable`指定为`true`时有效 |
|
|
97
|
-
| onChange | (Id \| Id[]) => void | - | `selectable`指定为`true`时有效 |
|
|
98
|
-
| columnResizable | boolean | false | 是否可以拖拽调整列宽,开启该功能后,表头分组将失效 |
|
|
99
|
-
|
|
100
|
-
## ColumnType
|
|
101
|
-
|
|
102
|
-
`ColumnType`继承了`<td/>`的所有属性,除此之外还有以下属性:
|
|
103
|
-
|
|
104
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
105
|
-
|----------|---------------------------------------------------|-----|-----------------------------------------------------------------------|
|
|
106
|
-
| title | ReactNode | - | 列标题 |
|
|
107
|
-
| key | Id | - | 若不指定,则使用`field`作为key |
|
|
108
|
-
| field | Id \| Id[] | - | 该列在数据中对应的字段名 |
|
|
109
|
-
| sorter | boolean \| ((a, b) => number) | - | 指定为`true`时表示使用服务端排序,组件只做样式处理,不做数据排序处理;<br/>本地排序需指定 “正序” 的排序方法,倒序会自动处理 |
|
|
110
|
-
| sticky | 'left' \| 'right' | - | 是否将列固定在左侧或右侧 |
|
|
111
|
-
| children | ColumnType[] | - | 使用组合的表头 |
|
|
112
|
-
| render | (row: R, index?: number, rows?: R[]) => ReactNode | - | 单元格内容的渲染方法 |
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
# DateTimePicker 日期时间选择器
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {DateTimePicker} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
return (
|
|
10
|
-
<DateTimePicker format="YYYY-MM-DD hh:mm:ss"/>
|
|
11
|
-
)
|
|
12
|
-
}
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Props
|
|
16
|
-
|
|
17
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
18
|
-
|-----------------|-------------------------------------------|-------|-----------------------|
|
|
19
|
-
| inputProps | InputHTMLAttributes | - | 传递给`<input/>`的属性 |
|
|
20
|
-
| inputRef | Ref<HTMLInputElement> | - | |
|
|
21
|
-
| popperProps | [PopperProps](/components/popper) | - | 传递给`<Popper/>`组件的属性 |
|
|
22
|
-
| defaultOpen | boolean | false | 默认打开状态 |
|
|
23
|
-
| open | boolean | - | 受控的打开状态 |
|
|
24
|
-
| onOpenChange | (open) => void | - | 打开状态变化的回调 |
|
|
25
|
-
| autoClose | boolean | true | 是否自动关闭 |
|
|
26
|
-
| format | string | - | 选择器的样式会根据`format`自动改变 |
|
|
27
|
-
| defaultValue | [DayJs](https://day.js.org/) \| null | null | 默认值 |
|
|
28
|
-
| value | [DayJs](https://day.js.org/) \| null | - | 受控的值 |
|
|
29
|
-
| onChange | (dayJs) => void | - | 变化回调 |
|
|
30
|
-
| min | Dayjs | - | |
|
|
31
|
-
| max | Dayjs | - | |
|
|
32
|
-
| disabledDates | (date: Dayjs) => boolean | - | 禁用日期选择 |
|
|
33
|
-
| disabledHours | (date: Dayjs, hours: number) => boolean | - | 禁用小时选择 |
|
|
34
|
-
| disabledMinutes | (date: Dayjs, minutes: number) => boolean | - | 禁用分钟选择 |
|
|
35
|
-
| disabledSeconds | (date: Dayjs, seconds: number) => boolean | - | 禁用秒选择 |
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
# DateTimeRangePicker 日期时间范围选择器
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {DateTimeRangePicker} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
return (
|
|
10
|
-
<DateTimeRangePicker/>
|
|
11
|
-
)
|
|
12
|
-
}
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
## Props
|
|
16
|
-
|
|
17
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
18
|
-
|------------------|-------------------------------------------------------------------------|------------|-----------------------------|
|
|
19
|
-
| startPickerProps | [DateTimePickerProps](/components/dateTimePicker) | - | 传递给`<DateTimePicker/>`组件的属性 |
|
|
20
|
-
| endPickerProps | [DateTimePickerProps](/components/dateTimePicker) | - | 传递给`<DateTimePicker/>`组件的属性 |
|
|
21
|
-
| format | string | - | 选择器的样式会根据`format`自动改变 |
|
|
22
|
-
| defaultValue | [DayJs](https://day.js.org/) \| null | null | 默认值 |
|
|
23
|
-
| value | [DayJs](https://day.js.org/) \| null | - | 受控的值 |
|
|
24
|
-
| onChange | (dayJs) => void | - | 变化回调 |
|
|
25
|
-
| min | Dayjs | - | |
|
|
26
|
-
| max | Dayjs | - | |
|
|
27
|
-
| disabledDates | (date: Dayjs) => boolean | - | 禁用日期选择 |
|
|
28
|
-
| disabledHours | (date: Dayjs, hours: number) => boolean | - | 禁用小时选择 |
|
|
29
|
-
| disabledMinutes | (date: Dayjs, minutes: number) => boolean | - | 禁用分钟选择 |
|
|
30
|
-
| disabledSeconds | (date: Dayjs, seconds: number) => boolean | - | 禁用秒选择 |
|
|
31
|
-
| variant | 'outlined' \| 'underlined' \| 'plain' | 'outlined' | |
|
|
32
|
-
| size | 'small' \| 'medium' \| 'large' | 'medium' | |
|
|
33
|
-
| color | string | - | |
|
|
34
|
-
| disabled | boolean | - | |
|
|
35
|
-
| readOnly | boolean | - | |
|
|
36
|
-
| autoFocus | boolean | - | |
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
# Descriptions 描述列表
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {Descriptions} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
return (
|
|
10
|
-
<Descriptions
|
|
11
|
-
items={[
|
|
12
|
-
{label: '用户名', content: '张三'},
|
|
13
|
-
{label: '手机号', content: '13800138000'},
|
|
14
|
-
{label: '邮箱', content: 'zhangsan@example.com'},
|
|
15
|
-
{label: '地址', content: '浙江省杭州市西湖区文三路 138 号'}
|
|
16
|
-
]}
|
|
17
|
-
/>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
## Props
|
|
23
|
-
|
|
24
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
25
|
-
|----------------|----------------------------------------------------------------|-----------------|-----------------------------------|
|
|
26
|
-
| size | 'small' \| 'medium' \| 'large' | | |
|
|
27
|
-
| labelWidth | number | - | label的宽度,`grid`模式有效 |
|
|
28
|
-
| colon | ReactNode | ':' | 自定义渲染冒号 |
|
|
29
|
-
| labelPlacement | 'top' \| 'bottom' \| 'left' \| 'right' | 'left' | label的位置,`table`模式仅支持`left`与`top` |
|
|
30
|
-
| disableMargin | boolean | false | `grid`模式有效 |
|
|
31
|
-
| disablePadding | boolean | false | `table`模式有效 |
|
|
32
|
-
| items | {label: ReactNode, content: ReactNode}[] | - | |
|
|
33
|
-
| itemComponent | any | DescriptionItem | 自定义渲染Item组件 |
|
|
34
|
-
| variant | 'grid' \| 'table' | | |
|
|
35
|
-
| columnCount | number | 3 | |
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
_# Dialog 对话框
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {Button, Dialog} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
const [open, setOpen] = React.useState(false)
|
|
10
|
-
|
|
11
|
-
return (
|
|
12
|
-
<>
|
|
13
|
-
<Button onClick={() => setOpen(true)}>打开对话框</Button>
|
|
14
|
-
|
|
15
|
-
<Dialog
|
|
16
|
-
open={open}
|
|
17
|
-
onClose={() => setOpen(false)}
|
|
18
|
-
icon={<Icon icon={faUser}/>}
|
|
19
|
-
title="这是标题"
|
|
20
|
-
>
|
|
21
|
-
这里是对话框的内容
|
|
22
|
-
</Dialog>
|
|
23
|
-
</>
|
|
24
|
-
)
|
|
25
|
-
}
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Props
|
|
29
|
-
|
|
30
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
31
|
-
|----------------|-----------------------------------|-------|-----------------|
|
|
32
|
-
| icon | ReactNode | - | |
|
|
33
|
-
| title | ReactNode | - | |
|
|
34
|
-
| footer | ReactNode | - | |
|
|
35
|
-
| suffix | ReactNode | - | |
|
|
36
|
-
| prefix | ReactNode | - | |
|
|
37
|
-
| width | number | - | |
|
|
38
|
-
| minWidth | number | - | |
|
|
39
|
-
| maxWidth | number | - | |
|
|
40
|
-
| showClose | boolean | true | |_
|
|
41
|
-
| closeProps | [ButtonProps](/components/button#Props) | - | |_
|
|
42
|
-
| showConfirm | boolean | true | |
|
|
43
|
-
| confirmText | ReactNode | '确定' | |
|
|
44
|
-
| confirmProps | [ButtonProps](/components/button#Props) | - | |
|
|
45
|
-
| onConfirm | (e) => void | - | |
|
|
46
|
-
| confirmLoading | boolean | false | 确定按钮的loading状态 |
|
|
47
|
-
| showCancel | boolean | true | |
|
|
48
|
-
| cancelText | ReactNode | '确定' | |
|
|
49
|
-
| cancelProps | [ButtonProps](/components/button#Props) | - | |
|
|
50
|
-
| onCancel | (e) => void | - | |
|
|
51
|
-
| draggable | boolean | true | 对话框是否可拖拽 |
|
|
52
|
-
| maskClosable | boolean | true | 点击遮罩层是否可关闭对话框 |
|
|
53
|
-
| escapeClosable | boolean | true | 点击`ESC`是否可关闭对话框 |
|
|
54
|
-
| defaultOpen | boolean | false | |
|
|
55
|
-
| open | boolean | false | |
|
|
56
|
-
| onClose | (reason: string) => void | - | |
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
# Divider 分隔线
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {Divider, Flex} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
return (
|
|
10
|
-
<Flex width="100%" gap={12}>
|
|
11
|
-
<Divider style={{flex: 1}}>分割线</Divider>
|
|
12
|
-
<Divider orientation="vertical"/>
|
|
13
|
-
<Divider style={{flex: 1}}>分割线</Divider>
|
|
14
|
-
</Flex>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Props
|
|
20
|
-
|
|
21
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
22
|
-
|-------------|------------------------------|--------------|-----------------------------------------|
|
|
23
|
-
| textAlign | 'start' \| 'center' \| 'end' | 'center' | 文字所在位置 |
|
|
24
|
-
| alignMargin | number \| string | 36 | `textAlign`为`start`或`end`时有效,表示文字至边缘的距离 |
|
|
25
|
-
| orientation | 'horizontal' \| 'vertical' | 'horizontal' | 分隔线方向 |
|
|
26
|
-
| margin | number \| string | 0 | |
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
# Drawer 抽屉
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {Button, Drawer} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
const [open, setOpen] = React.useState(false)
|
|
10
|
-
|
|
11
|
-
return (
|
|
12
|
-
<>
|
|
13
|
-
<Button onClick={() => setOpen(true)}>打开抽屉</Button>
|
|
14
|
-
<Drawer
|
|
15
|
-
title="抽屉标题"
|
|
16
|
-
open={open}
|
|
17
|
-
onClose={() => setOpen(false)}
|
|
18
|
-
>
|
|
19
|
-
这里是抽屉的内容
|
|
20
|
-
</Drawer>
|
|
21
|
-
</>
|
|
22
|
-
)
|
|
23
|
-
}
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## Props
|
|
27
|
-
|
|
28
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
29
|
-
|----------------|----------------------------------------|---------|--------------------|
|
|
30
|
-
| title | ReactNode | - | |
|
|
31
|
-
| footer | ReactNode | - | |
|
|
32
|
-
| showClose | boolean | true | |
|
|
33
|
-
| size | string \| number | - | |
|
|
34
|
-
| placement | 'left' \| 'right' \| 'top' \| 'bottom' | 'right' | |
|
|
35
|
-
| maskClosable | boolean | true | 点击遮罩层是否可关闭对话框 |
|
|
36
|
-
| escapeClosable | boolean | true | 点击`ESC`是否可关闭对话框 |
|
|
37
|
-
| defaultOpen | boolean | false | |
|
|
38
|
-
| open | boolean | false | |
|
|
39
|
-
| onClose | (reason: string) => void | - | |
|
|
40
|
-
| slideProps | [SlideProps](/components/transition) | - | 传递至`<Slide/>`组件的属性 |
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
# Flex 弹性布局
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {Flex} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
return (
|
|
10
|
-
<Flex width="100%">
|
|
11
|
-
<Flex flex={1}>1</Flex>
|
|
12
|
-
<Flex flex={1}>2</Flex>
|
|
13
|
-
</Flex>
|
|
14
|
-
)
|
|
15
|
-
}
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
## Props
|
|
19
|
-
|
|
20
|
-
`<Flex/>`組件的属性继承于`CSSProperties`
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
# Form 表单
|
|
2
|
-
|
|
3
|
-
## 基础示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {Form, Input, RadioGroup} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
return (
|
|
10
|
-
<Form labelWidth="20%" style={{width: '300px'}}>
|
|
11
|
-
<Form.Item field="name" label="姓名">
|
|
12
|
-
<Input placeholder="请输入姓名"/>
|
|
13
|
-
</Form.Item>
|
|
14
|
-
<Form.Item field="gender" label="性别">
|
|
15
|
-
<RadioGroup
|
|
16
|
-
items={[
|
|
17
|
-
{label: '男', value: 'male'},
|
|
18
|
-
{label: '女', value: 'female'}
|
|
19
|
-
]}
|
|
20
|
-
/>
|
|
21
|
-
</Form.Item>
|
|
22
|
-
<Form.Item
|
|
23
|
-
field="phone"
|
|
24
|
-
label="电话"
|
|
25
|
-
rules={{
|
|
26
|
-
required: true,
|
|
27
|
-
pattern: /^1\d{10}$/,
|
|
28
|
-
message: '电话输入不正确'
|
|
29
|
-
}}
|
|
30
|
-
>
|
|
31
|
-
<Input placeholder="请输入电话"/>
|
|
32
|
-
</Form.Item>
|
|
33
|
-
</Form>
|
|
34
|
-
)
|
|
35
|
-
}
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## 关联字段
|
|
39
|
-
|
|
40
|
-
```tsx
|
|
41
|
-
import {Form, Input, RadioGroup} from '@canlooks/can-ui'
|
|
42
|
-
|
|
43
|
-
export default function Index() {
|
|
44
|
-
return (
|
|
45
|
-
<Form labelWidth="30%" style={{width: '300px'}}>
|
|
46
|
-
<Form.Item
|
|
47
|
-
field="needPassword"
|
|
48
|
-
label="需要密码"
|
|
49
|
-
initialValue={0}
|
|
50
|
-
>
|
|
51
|
-
<RadioGroup
|
|
52
|
-
items={[
|
|
53
|
-
{label: '是', value: 1},
|
|
54
|
-
{label: '否', value: 0}
|
|
55
|
-
]}
|
|
56
|
-
/>
|
|
57
|
-
</Form.Item>
|
|
58
|
-
<Form.Relatable shouldUpdate={(prev, next) => prev.needPassword !== next.needPassword}>
|
|
59
|
-
{({needPassword}) => !!needPassword && (
|
|
60
|
-
<>
|
|
61
|
-
<Form.Item field="password" label="密码">
|
|
62
|
-
<Input type="password" placeholder="请输入密码"/>
|
|
63
|
-
</Form.Item>
|
|
64
|
-
<Form.Item
|
|
65
|
-
field="confirmPassword"
|
|
66
|
-
label="确认密码"
|
|
67
|
-
dependencies={['password']}
|
|
68
|
-
rules={{
|
|
69
|
-
validator: (confirmPassword: string, {password}: any) => {
|
|
70
|
-
if (confirmPassword !== password) {
|
|
71
|
-
throw '两次密码输入不一致'
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}}
|
|
75
|
-
>
|
|
76
|
-
<Input type="password" placeholder="请再次输入密码"/>
|
|
77
|
-
</Form.Item>
|
|
78
|
-
</>
|
|
79
|
-
)}
|
|
80
|
-
</Form.Relatable>
|
|
81
|
-
</Form>
|
|
82
|
-
)
|
|
83
|
-
}
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
## FormProps
|
|
87
|
-
|
|
88
|
-
`FormProps`继承了[DescriptionsProps](/components/descriptions)的所有属性,此外还有如下属性:
|
|
89
|
-
|
|
90
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
91
|
-
|--------------|----------------------------------------------|--------|---------------------------------------------------------------------------------|
|
|
92
|
-
| wrapperRef | Ref<HTMLDivElement> | - | 最外层元素的ref,默认ref属性已经被[FormRef](#FormRef)取代 |
|
|
93
|
-
| requiredMark | ReactNode | '*' | 必填字段的标记 |
|
|
94
|
-
| component | ElementType | 'form' | 自定义渲染组件 |
|
|
95
|
-
| initialValue | Object | - | 初始值 |
|
|
96
|
-
| onChange | (field, value, formValue) => void | - | 值变化回调 |
|
|
97
|
-
| onFinish | (formValue) => void | - | 提交完成后回调 |
|
|
98
|
-
| items | [FormItemProps](#FormItemProps)[] | - | |
|
|
99
|
-
| variant | 'plain' \| 'grid' \| 'table' | 'grid' | 指定为`grid`或`table`时会渲染`<Descriptions/>`组件;<br/>指定为`plain`时不渲染外层组件,直接渲染`children` |
|
|
100
|
-
| columnCount | ResponsiveProps | 3 | |
|
|
101
|
-
|
|
102
|
-
## FormItemProps
|
|
103
|
-
|
|
104
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
105
|
-
|--------------|--------------------------------------------------------------------------------------------------------------------------------------|-------|------------------------------------------------|
|
|
106
|
-
| field | Id \| Id[] | - | 字段键名 |
|
|
107
|
-
| initialValue | any | - | |
|
|
108
|
-
| rules | {<br/>message?: ReactNode,<br/>required?: boolean,<br/>pattern?: RegExp,<br/>validator?(fieldValue, formValue, formRef): any<br/>}[] | - | |
|
|
109
|
-
| required | boolean | false | 是否显示必填标记 |
|
|
110
|
-
| error | boolean | false | 该字段是否存在错误 |
|
|
111
|
-
| helperText | ReactNode | - | 提示文字 |
|
|
112
|
-
| dependencies | Id[] \| Id[][] | - | 依赖其他字段,若依赖的字段发生变化,该字段也会重新执行`validate`操作 |
|
|
113
|
-
| children | ReactNode \| (fieldProps, styleProps) => ReactNode | - | |
|
|
114
|
-
| noStyle | boolean | - | 是否禁用默认样式,若指定为`true`则不会渲染`<DescriptionItem/>`组件 |
|
|
115
|
-
|
|
116
|
-
## FormRef
|
|
117
|
-
|
|
118
|
-
| 方法 | 类型 | 说明 |
|
|
119
|
-
|----------------|---------------------------------|------------------------------------------|
|
|
120
|
-
| submit | (): Promise<FormValue \| null> | |
|
|
121
|
-
| getFieldValue | (field: Id \| Id[]): FieldValue | |
|
|
122
|
-
| getFormValue | (): FormValue | |
|
|
123
|
-
| getFieldError | (field): FieldError | 获取单个字段的错误 |
|
|
124
|
-
| getFormErrors | (): { \[field]: FieldError } | 获取所有字段的错误 |
|
|
125
|
-
| setFormValue | (formValue: FormValue): void | 全量覆盖表单值 |
|
|
126
|
-
| mergeFormValue | (formValue: FormValue): void | 合并表单值 |
|
|
127
|
-
| setFieldValue | (field, value): void | |
|
|
128
|
-
| resetForm | (): void | 重置整个表单<br/>注意:执行改方法前请确保指定了`initialValue` |
|
|
129
|
-
| resetField | (field): void | 重置某个字段<br/>注意:执行改方法前请确保指定了`initialValue` |
|
|
130
|
-
| isFormTouched | (): boolean | 判断该表单是否被改动过 |
|
|
131
|
-
| isFieldTouched | (field): boolean | 判断某个字段是否被改动过 |
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
# FormDialog 表单对话框
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {Button, FormDialog, Input} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
const [open, setOpen] = React.useState(false)
|
|
10
|
-
|
|
11
|
-
return (
|
|
12
|
-
<>
|
|
13
|
-
<Button onClick={() => setOpen(true)}>打开表单对话框</Button>
|
|
14
|
-
<FormDialog
|
|
15
|
-
open={open}
|
|
16
|
-
onClose={() => setOpen(false)}
|
|
17
|
-
title="对话框标题"
|
|
18
|
-
items={[
|
|
19
|
-
{field: 'name', label: '姓名', children: <Input autoFocus/>},
|
|
20
|
-
]}
|
|
21
|
-
/>
|
|
22
|
-
</>
|
|
23
|
-
)
|
|
24
|
-
}
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
## Props
|
|
28
|
-
|
|
29
|
-
`<FormDialog/>`组件继承了`<Dialog/>`组件的所有属性,此外还有如下属性:
|
|
30
|
-
|
|
31
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
32
|
-
|-----------|---------------------------------------------------|-----|-------------------|
|
|
33
|
-
| formProps | [FormProps](/components/form#FormProps) | - | 传递给`<Form/>`组件的属性 |
|
|
34
|
-
| formRef | [FormRef](/components/form#FormRef) | - | |
|
|
35
|
-
| items | [FormItemProps](/components/form#FormItemProps)[] | - | |
|
|
36
|
-
| onFinish | (formValue) => void | - | |
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
# Grid 网格布局
|
|
2
|
-
|
|
3
|
-
## 示例
|
|
4
|
-
|
|
5
|
-
```tsx
|
|
6
|
-
import {Grid} from '@canlooks/can-ui'
|
|
7
|
-
|
|
8
|
-
export default function Index() {
|
|
9
|
-
return (
|
|
10
|
-
<Grid style={{width: '100%'}}>
|
|
11
|
-
<Grid.Item span={3}>3</Grid.Item>
|
|
12
|
-
<Grid.Item span={7}>7</Grid.Item>
|
|
13
|
-
<Grid.Item span={2}>2</Grid.Item>
|
|
14
|
-
</Grid>
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## GridProps
|
|
20
|
-
|
|
21
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
22
|
-
|-------------|---------|-------|--------------------------------------|
|
|
23
|
-
| inline | boolean | false | 若指定为`true`,相当于`display: inline-flex` |
|
|
24
|
-
| columnCount | number | 12 | |
|
|
25
|
-
| gap | number | - | |
|
|
26
|
-
| columnGap | number | - | |
|
|
27
|
-
| rowGap | number | - | |
|
|
28
|
-
|
|
29
|
-
## GridItemProps
|
|
30
|
-
|
|
31
|
-
| 属性 | 类型 | 默认值 | 说明 |
|
|
32
|
-
|--------|--------|-----|-------|
|
|
33
|
-
| span | number | - | 横跨的列数 |
|
|
34
|
-
| offset | number | - | 偏移的列数 |
|