@canlooks/can-ui 0.0.41 → 0.0.43

package/documentation/dist/components/actionSheet.md

@@ -30,7 +30,7 @@ export default function Index() {
 | 属性             | 类型                                      | 默认值   | 说明                  |
 |----------------|-----------------------------------------|-------|---------------------|
 | title          | ReactNode                               | -     | 标题                  |
-| actions        | [MenuItemProps](/components/menuItem)[] | -     | 菜单                  |
+| actions        | [MenuItemProps](/components/menuItem#MenuItemProps)[] | -     | 菜单                  |
 | placement      | 'top' \| 'bottom'                       | -     | 弹出菜单的位置             |
 | maskClosable   | boolean                                 | false | 是否可通过点击遮罩层关闭对话框     |
 | escapeClosable | boolean                                 | true  | 是否可通过键盘的【ESC】键关闭对话框 |
@@ -42,8 +42,8 @@ export default function Index() {
 | onClose        | (reason) => void                        | -     | 关闭回调                |
 | showConfirm    | boolean                                 | false | 是否显示确定选项            |
 | confirmText    | ReactNode                               | '确定'  |                     |
-| confirmProps   | [MenuItemProps](/components/menuItem)   | -     |                     |
+| confirmProps   | [MenuItemProps](/components/menuItem#MenuItemProps)   | -     |                     |
 | showCancel     | boolean                                 | true  | 是否显示取消选项            |
 | cancelText     | ReactNode                               | '取消'  |                     |
-| cancelProps    | [MenuItemProps](/components/menuItem)   | -     |                     |
+| cancelProps    | [MenuItemProps](/components/menuItem#MenuItemProps)   | -     |                     |
 | slideProps     | TransitionBaseProps                     | -     | 传递给<Slide/>动画组件的属性  |

package/documentation/dist/components/autocomplete.md

@@ -56,13 +56,13 @@ export default function Index() {
 
 `<Autocomplete/>`组件继承了`<Input/>`组件的所有属性外，还有如下属性：
 
-| 属性          | 类型                                           | 默认值     | 说明               |
-|-------------|----------------------------------------------|---------|------------------|
-| options     | [MenuItemProps](/components/menuItem)[]      | -       | 选项               |
-| loadOptions | (inputValue) => options \| Promise\<options> | -       | 动态加载的选项          |
-| primaryKey  | string \| number                             | 'value' | 指定选项中的主键名        |
-| labelKey    | string \| number                             | 'label' | 指定选项中用于当作label的键 |
-| onSelect    | (selectedValue, option) => void              | -       | 选中回调             |
-| renderInput | (inputProps) => ReactElement                 | -       | 自定义渲染输入框         |
-| popperProps | [PopperProps](/components/popper)            | -       | 传递给`Popper`组件的属性 |
-| popperRef   | [PopperRef](/components/popper)              | -       |                  |
+| 属性          | 类型                                                    | 默认值     | 说明               |
+|-------------|-------------------------------------------------------|---------|------------------|
+| options     | [MenuItemProps](/components/menuItem#MenuItemProps)[] | -       | 选项               |
+| loadOptions | (inputValue) => options \| Promise\<options>          | -       | 动态加载的选项          |
+| primaryKey  | string \| number                                      | 'value' | 指定选项中的主键名        |
+| labelKey    | string \| number                                      | 'label' | 指定选项中用于当作label的键 |
+| onSelect    | (selectedValue, option) => void                       | -       | 选中回调             |
+| renderInput | (inputProps) => ReactElement                          | -       | 自定义渲染输入框         |
+| popperProps | [PopperProps](/components/popper)                     | -       | 传递给`Popper`组件的属性 |
+| popperRef   | [PopperRef](/components/popper)                       | -       |                  |

package/documentation/dist/components/breadcrumb.md

@@ -23,6 +23,6 @@ export default function Index() {
 
 | 属性        | 类型                                  | 默认值   | 说明  |
 |-----------|-------------------------------------|-------|-----|
-| items     | [ButtonProps](/components/button)[] | -     |     |
+| items     | [ButtonProps](/components/button#Props)[] | -     |     |
 | separator | ReactNode                           | '/'   | 分隔符 |
 | readOnly  | boolean                             | false |     |

package/documentation/dist/components/checkbox.md

@@ -3,11 +3,34 @@
 ## 示例
 
 ```tsx
-import {Checkbox, CheckboxGroup} from '@canlooks/can-ui'
+import {Checkbox} from '@canlooks/can-ui'
 
 export default function Index() {
     return (
         <Checkbox label="选择"/>
     )
 }
+```
+
+### CheckboxGroup
+
+```tsx
+import {CheckboxGroup} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <CheckboxGroup
+            items={[
+                {
+                    label: '选项1',
+                    value: 1
+                },
+                {
+                    label: '选项2',
+                    value: 2
+                }
+            ]}
+        />
+    )
+}
 ```

package/documentation/dist/components/contextMenu.md

@@ -24,4 +24,4 @@ export default function Index() {
 
 | 属性    | 类型                                                     | 默认值 | 说明 |
 |-------|--------------------------------------------------------|-----|----|
-| items | ([MenuItemProps](/components/menuItem) \| ReactNode)[] | -   |    |
+| items | ([MenuItemProps](/components/menuItem#MenuItemProps) \| ReactNode)[] | -   |    |

package/documentation/dist/components/counter.md

@@ -14,16 +14,16 @@ export default function Index() {
 
 ## Props
 
-| 属性            | 类型                                | 默认值      | 说明              |
-|---------------|-----------------------------------|----------|-----------------|
-| size          | 'small' \| 'medium' \| 'large'    | 'medium' |                 |
-| min           | number                            | -        |                 |
-| max           | number                            | -        |                 |
-| step          | number                            | 1        | 每次减少或增加的步长      |
-| precision     | number                            | 0        | 数值精度            |
-| defaultValue  | number                            | -        |                 |
-| value         | number                            | -        |                 |
-| onChange      | (value) => void                   | -        |                 |
-| decreaseProps | [ButtonProps](/components/button) | -        | 减少按钮的属性         |
-| increaseProps | [ButtonProps](/components/button) | -        | 增加按钮的属性         |
-| inputProps    | [InputProps](/components/input)   | -        | `<Input/>`组件的属性 |
+| 属性            | 类型                                      | 默认值      | 说明              |
+|---------------|-----------------------------------------|----------|-----------------|
+| size          | 'small' \| 'medium' \| 'large'          | 'medium' |                 |
+| min           | number                                  | -        |                 |
+| max           | number                                  | -        |                 |
+| step          | number                                  | 1        | 每次减少或增加的步长      |
+| precision     | number                                  | 0        | 数值精度            |
+| defaultValue  | number                                  | -        |                 |
+| value         | number                                  | -        |                 |
+| onChange      | (value) => void                         | -        |                 |
+| decreaseProps | [ButtonProps](/components/button#Props) | -        | 减少按钮的属性         |
+| increaseProps | [ButtonProps](/components/button#Props) | -        | 增加按钮的属性         |
+| inputProps    | [InputProps](/components/input#Props)   | -        | `<Input/>`组件的属性 |

package/documentation/dist/components/dialog.md

@@ -38,15 +38,15 @@ export default function Index() {
 | minWidth       | number                            | -     |                 |
 | maxWidth       | number                            | -     |                 |
 | showClose      | boolean                           | true  |                 |_
-| closeProps     | [ButtonProps](/components/button) | -     |                 |_
+| closeProps     | [ButtonProps](/components/button#Props) | -     |                 |_
 | showConfirm    | boolean                           | true  |                 |
 | confirmText    | ReactNode                         | '确定'  |                 |
-| confirmProps   | [ButtonProps](/components/button) | -     |                 |
+| confirmProps   | [ButtonProps](/components/button#Props) | -     |                 |
 | onConfirm      | (e) => void                       | -     |                 |
 | confirmLoading | boolean                           | false | 确定按钮的loading状态  |
 | showCancel     | boolean                           | true  |                 |
 | cancelText     | ReactNode                         | '确定'  |                 |
-| cancelProps    | [ButtonProps](/components/button) | -     |                 |
+| cancelProps    | [ButtonProps](/components/button#Props) | -     |                 |
 | onCancel       | (e) => void                       | -     |                 |
 | draggable      | boolean                           | true  | 对话框是否可拖拽        |
 | maskClosable   | boolean                           | true  | 点击遮罩层是否可关闭对话框   |

package/documentation/dist/components/formDialog.md

@@ -28,9 +28,9 @@ export default function Index() {
 
 `<FormDialog/>`组件继承了`<Dialog/>`组件的所有属性，此外还有如下属性：
 
-| 属性        | 类型                                  | 默认值 | 说明                |
-|-----------|-------------------------------------|-----|-------------------|
-| formProps | [FormProps](/components/form)       | -   | 传递给`<Form/>`组件的属性 |
-| formRef   | [FormRef](/components/form)         | -   |                   |
-| items     | [FormItemProps](/components/form)[] | -   |                   |
-| onFinish  | (formValue) => void                 | -   |                   |
+| 属性        | 类型                                                | 默认值 | 说明                |
+|-----------|---------------------------------------------------|-----|-------------------|
+| formProps | [FormProps](/components/form#FormProps)           | -   | 传递给`<Form/>`组件的属性 |
+| formRef   | [FormRef](/components/form#FormRef)               | -   |                   |
+| items     | [FormItemProps](/components/form#FormItemProps)[] | -   |                   |
+| onFinish  | (formValue) => void                               | -   |                   |

package/documentation/dist/components/image.md

@@ -15,11 +15,12 @@ export default function Index() {
 ## 相册预览示例
 
 ```tsx
-import {Flex, Image} from '@canlooks/can-ui'
+import {Flex, Gallery, Image} from '@canlooks/can-ui'
 
 export default function Index() {
     const src1 = 'https://picsum.photos/seed/seed1/100'
     const src2 = 'https://picsum.photos/seed/seed2/100'
+    const src3 = 'https://files.codelife.cc/wallhaven/full/gj/wallhaven-gj8v93.png'
 
     const [open, setOpen] = React.useState(false)
     const [index, setIndex] = React.useState(0)
@@ -35,14 +36,15 @@ export default function Index() {
             <Flex gap={12}>
                 <Image src={src1} style={{width: 100, height: 100}} onPreview={e => previewHandler(e, 0)}/>
                 <Image src={src2} style={{width: 100, height: 100}} onPreview={e => previewHandler(e, 1)}/>
+                <Image src={src3} style={{width: 100, height: 100}} onPreview={e => previewHandler(e, 2)}/>
             </Flex>
 
-            <Image.Preview
+            <Gallery
                 open={open}
                 onOpenChange={setOpen}
                 index={index}
                 onIndexChange={setIndex}
-                src={[src1, src2]}
+                src={[src1, src2, src3]}
             />
         </>
     )

package/documentation/dist/components/menu.md

@@ -63,7 +63,7 @@ export default function Index() {
 }
 ```
 
-## menuItemProps
+## MenuItemProps
 
 | 属性               | 类型                                                  | 默认值     | 说明                                           |
 |------------------|-----------------------------------------------------|---------|----------------------------------------------|

package/documentation/dist/components/pagination.md

@@ -21,4 +21,18 @@ export default function Index() {
         </Flex>
     )
 }
-```
+```
+
+## Props
+
+| 属性               | 类型                             | 默认值      | 说明      |
+|------------------|--------------------------------|----------|---------|
+| size             | 'small' \| 'medium' \| 'large' | 'medium' |         |
+| total            | number                         |          | 数据的总条数  |
+| defaultPage      | number                         |          | 页码，从1开始 |
+| page             | number                         |          |         |
+| onPageChange     | (page) => void                 |          |         |
+| defaultPageSize  | number                         | 10       | 每页的条数   |
+| pageSize         | number                         |          |         |
+| onPageSizeChange | (pageSize) => void             |          |         |
+| onChange         | (page, pageSize) => void       |          |         |

package/documentation/dist/components/pickerDialog.md

@@ -0,0 +1,56 @@
+# PickerDialog 选择对话框
+
+## 示例
+
+```tsx
+import {Button, DataGrid, PickerDialog} from '@canlooks/can-ui'
+
+export default function Index() {
+    const [open, setOpen] = React.useState(false)
+    
+    const rows = React.useMemo(() => [
+        {value: 1, label: '选项1', description: '这是选项1'},
+        {value: 2, label: '选项2', description: '这是选项2'},
+        {value: 3, label: '选项3', description: '这是选项3'},
+        {value: 4, label: '选项4', description: '这是选项4'},
+        {value: 5, label: '选项5', description: '这是选项5'},
+        {value: 6, label: '选项6', description: '这是选项6'},
+        {value: 7, label: '选项7', description: '这是选项7'},
+        {value: 8, label: '选项8', description: '这是选项8'}
+    ], [])
+    
+    const rowsGroup = React.useMemo(() => Map.groupBy(rows, item => item.value), [rows])
+
+    return (
+        <>
+            <Button onClick={() => setOpen(true)}>打开选择对话框</Button>
+            <PickerDialog
+                open={open}
+                onClose={() => setOpen(false)}
+                title="选择对话框"
+                options={rows}
+                multiple
+                primaryKey="value"
+                selectedItemProps={value => {
+                    const item = rowsGroup.get(value)[0]
+                    return {
+                        title: item.label,
+                        description: item.description
+                    }
+                }}
+            >
+                <DataGrid
+                    primaryKey="value"
+                    columns={[
+                        {
+                            title: 'Label',
+                            field: 'label',
+                        }
+                    ]}
+                    rows={rows}
+                />
+            </PickerDialog>
+        </>
+    )
+}
+```

package/documentation/dist/components/placeholder.md

@@ -0,0 +1,30 @@
+# Placeholder 占位符
+
+## 示例
+
+```tsx
+import {Flex, Placeholder} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex wrap="wrap" gap={12}>
+            <Placeholder/>
+            <Placeholder status="searching"/>
+            <Placeholder status="success"/>
+            <Placeholder status="error"/>
+            <Placeholder status="warning"/>
+            <Placeholder status="info" description="这是描述信息"/>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性          | 类型                                                                   | 默认值     | 说明 |
+|-------------|----------------------------------------------------------------------|---------|----|
+| status      | 'empty' \| 'searching' \|'success' \| 'error' \| 'warning' \| 'info' | 'empty' |    |
+| image       | ReactNode                                                            |         |
+| title       | ReactNode                                                            |         |
+| description | ReactNode                                                            |         |
+| extra       | ReactNode                                                            |         |

package/documentation/dist/components/progress.md

@@ -0,0 +1,43 @@
+# Progress 进度条
+
+## 示例
+
+```tsx
+import {Progress} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width="100%" direction="column" gap={24}>
+            <Progress value={23.45}/>
+            <Flex>
+                <Flex flex={1} justifyContent="center">
+                    <Progress variant="circular" value={23.45}/>
+                </Flex>
+                <Flex flex={1} justifyContent="center">
+                    <Progress variant="gauge" value={23.45}/>
+                </Flex>
+                <Flex flex={1} justifyContent="center">
+                    <Progress variant="circular" indeterminate/>
+                </Flex>
+            </Flex>
+            <Progress indeterminate/>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性            | 类型                                                              | 默认值       | 说明                              |
+|---------------|-----------------------------------------------------------------|-----------|---------------------------------|
+| showInfo      | boolean                                                         | true      | 是否显示文字                          |
+| renderInfo    | (value: number) => ReactNode                                    | -         |                                 |
+| color         | string                                                          | 'primary' |                                 |
+| status        | 'default' \| 'processing'    \| 'success' \| 'error'            | 'default' |                                 |
+| variant       | 'linear' \| 'circular'                               \| 'gauge' | 'linear'  |                                 |
+| gapDegree     | number                                                          | 90        | `variant`为`gauge`时有效，下方缺口的角度    |
+| size          | number                                                          | 60        | `variant`为`circular`时有效，表示圆圈的大小 |
+| barWidth      | number                                                          | 4         | 表示进度条粗细,或圆环的宽度                  |
+| indeterminate | boolean                                                         | false     | 若为`true`，则会一直播放动画               |
+| strokeLinecap | SVGAttributes<SVGCircleElement>['strokeLinecap']                | -         | 传递至`<circle/>`元素的属性             |
+| value         | number                                                          | 0         | 百分比，0 - 100                     |

package/documentation/dist/components/radio.md

@@ -0,0 +1,37 @@
+# Radio 单选框
+
+## 示例
+
+```tsx
+import {Radio} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Radio label="选择"/>
+    )
+}
+```
+
+## RadioGroup
+
+```tsx
+import {RadioGroup} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <RadioGroup
+            defaultValue={1}
+            items={[
+                {
+                    label: '选项1',
+                    value: 1
+                },
+                {
+                    label: '选项2',
+                    value: 2
+                }
+            ]}
+        />
+    )
+}
+```

package/documentation/dist/components/rating.md

@@ -0,0 +1,35 @@
+# Rating 评分
+
+## 示例
+
+```tsx
+import {Flex, Rating} from '@canlooks/can-ui'
+import React from 'react'
+
+export default function Index() {
+    const [value, setValue] = React.useState(1.5)
+
+    return (
+        <Flex gap={24}>
+            <Rating value={value} onChange={setValue} allowHalf/>
+            <div>{value.toFixed(1)}分</div>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性                    | 类型                                                | 默认值       | 说明                                 |
+|-----------------------|---------------------------------------------------|-----------|------------------------------------|
+| color                 | string                                            | '#FFCC00' |                                    |
+| size                  | 'small' \| 'medium' \| 'large'                    | 'medium'  |                                    |
+| count                 | number                                            | 5         | 星星的数量                              |
+| renderStar            | ReactNode \| ({index, active, half}) => ReactNode | -         | 自定义渲染星星                            |
+| allowHalf             | boolean                                           | false     | 允许选中半颗星                            |
+| highlightSelectedOnly | boolean                                           | false     | 是否只高亮选中的星星，默认`false`表示从第一颗星开始高亮至选中 |
+| defaultValue          | number                                            | -         |                                    |
+| value                 | number                                            | -         |                                    |
+| onChange              | (value) => void                                   | -         |                                    |
+| readOnly              | boolean                                           |           |                                    |
+| disabled              | boolean                                           |           |                                    |

package/documentation/dist/components/resizable.md

@@ -0,0 +1,41 @@
+# Resizable 尺寸调整
+
+## 示例
+
+鼠标可拖拽`left`与`right`之间的边框调整尺寸
+
+```tsx
+import {Flex, Resizable} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width="100%">
+            <Resizable
+                handlers="r"
+                style={{padding: 24, background: 'pink'}}
+            >
+                left
+            </Resizable>
+            <Flex
+                flex={1}
+                style={{padding: 24, background: 'yellow'}}
+            >
+                right
+            </Flex>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性             | 类型                      | 默认值                                          | 说明                   |
+|----------------|-------------------------|----------------------------------------------|----------------------|
+| variant        | 'mouse' \| 'touch'      | 'mouse'                                      | 触屏端建议使用`touch`       |
+| handles        | string \| string[]      | ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'] |                      |
+| handleSize     | number                  |                                              |                      |
+| handleColor    | string                  |                                              |                      |
+| handlePosition | 'outside' \| 'inside'   | 'outside'                                    | `variant`为`touch`时生效 |
+| fixedRatio     | boolean                 | false                                        | 是否固定长宽比例             |
+| onResize       | (width, height) => void | -                                            |                      |
+| onResizeEnd    | (width, height) => void | -                                            |                      |

package/documentation/dist/components/scrollbar.md

@@ -0,0 +1,31 @@
+# Scrollbar 滚动条
+
+## 示例
+
+```tsx
+import {Scrollbar} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Scrollbar style={{height: 200}}>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+        </Scrollbar>
+    )
+}
+```
+
+## Props
+
+| 属性       | 类型                   | 默认值       | 说明                                           |
+|----------|----------------------|-----------|----------------------------------------------|
+| variant  | 'contain' \| 'cover' | 'contain' | `contain`: 滚动条会挤压内容区域<br/>`cover` 滚动条会覆盖在内容上 |
+| autoHide | boolean              | true      | 是否自动隐藏滚动条                                    |
+| size     | string \| number     | '0.8em'   | 是否自动隐藏滚动条                                    |

package/documentation/dist/components/segmented.md

@@ -0,0 +1,56 @@
+# Segmented 段落选择器
+
+## 示例
+
+```tsx
+import {Segmented} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Segmented
+            options={[
+                {
+                    label: '选项1',
+                    value: 1
+                },
+                {
+                    label: '选项2',
+                    value: 2
+                },
+                {
+                    label: '选项3',
+                    value: 3
+                }
+            ]}
+            defaultValue={1}
+        />
+    )
+}
+```
+
+## SegmentedProps
+
+| 属性           | 类型                                                                     | 默认值          | 说明                   |
+|--------------|------------------------------------------------------------------------|--------------|----------------------|
+| options      | [SegmentedOptionProps](#SegmentedOptionProps)[]                        | -            |                      |
+| orientation  | 'horizontal'                                             \| 'vertical' | 'horizontal' |                      |
+| size         | 'small' \| 'medium'                           \| 'large'               | 'medium'     |                      |
+| labelKey     | string                                                                 | 'label'      | `option`中用做`label`的键 |
+| primaryKey   | string                                                                 | 'value'      | `option`中用做主键的键      |
+| fullWidth    | boolean                                                                | false        | 是否占满整行               |
+| defaultValue |                                                                        | -            |                      |
+| value        |                                                                        | -            |                      |
+| onChange     | (value) => void                                                        | -            |                      |
+| readOnly     | boolean                                                                | false        |                      |
+| disabled     | boolean                                                                | false        |                      |
+
+## SegmentedOptionProps
+
+| 属性          | 类型                                                                     | 默认值   | 说明          |
+|-------------|------------------------------------------------------------------------|-------|-------------|
+| orientation | 'horizontal'                                             \| 'vertical' | -     |             |
+| prefix      | ReactNode                                                              | -     | 前缀，通常用于渲染图标 |
+| suffix      | ReactNode                                                              | -     | 后缀          |
+| value       | string \| number                                                       | -     |             |
+| label       | ReactNode                                                              | -     |             |
+| disabled    | boolean                                                                | false |             |

package/documentation/dist/components/select.md

@@ -0,0 +1,30 @@
+# Select 选择器
+
+## 示例
+
+```tsx
+import {Select} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Select
+            style={{width: 200}}
+            options={[
+                {
+                    label: '选项1',
+                    value: 1
+                },
+                {
+                    label: '选项2',
+                    value: 2
+                },
+                {
+                    label: '选项3',
+                    value: 3
+                }
+            ]}
+            defaultValue={1}
+        />
+    )
+}
+```

package/documentation/dist/components/skeleton.md

@@ -0,0 +1,26 @@
+# Skeleton 骨架屏
+
+## 示例
+
+```tsx
+import {Flex, Skeleton} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width="100%" direction="column" gap={24}>
+            <Skeleton/>
+            <Skeleton.Card/>
+            <Skeleton.Table/>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性        | 类型                                       | 默认值       | 说明              |
+|-----------|------------------------------------------|-----------|-----------------|
+| variant   | 'circular' \| 'rectangular' \| 'rounded' | 'rounded' |                 |
+| animation | boolean                                  | true      | 是否播放动画          |
+| width     | string \| number                         | -         | 同`style.width`  |
+| height    | string \| number                         | -         | 同`style.height` |