Skip to content

Commit

Permalink
docs: fix resizable docs after move category form show to basic
Browse files Browse the repository at this point in the history
  • Loading branch information
@YyumeiZhang
YyumeiZhang committed Nov 18, 2024
1 parent 6ccee3a commit 4e86e42
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 868 deletions.
17 changes: 8 additions & 9 deletions content/basic/resizable/index-en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ function Demo() {
```

### Control Width/Height

You can control the size of the element through the size prop.

```jsx live=true
Expand Down Expand Up @@ -739,11 +740,9 @@ function Demo() {

### Resizable

单个伸缩框组件。

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ----------------------------------------------------------------------------- | ----------------------- | ---------- | ------ |
| className | 类名 | string | | |
| className | ClassName | string | | |
| size | Controls the size of the resizable box, supports both numeric and string (px/vw/vh/%) formats | [Size](#basic-usage-and-callbacks) | | |
| defaultSize | Sets the initial width and height, supports both numeric and string (px/vw/vh/%) formats | [Size](#basic-usage-and-callbacks) | | |
| minWidth | Specifies the minimum width of the resizable box | string \| number | | |
Expand All @@ -757,7 +756,7 @@ function Demo() {
| handleNode | Custom nodes for the drag handles in each direction | [HandleNode](#customizing-corner-handler-styles) | | |
| handleStyle | Styles for the drag handles in each direction | [HandleNode](#customizing-corner-handler-styles) | | |
| handleClass | Class names for the drag handles in each direction | [HandleNode](#customizing-corner-handler-styles) | | |
| style | | CSSProperties | |
| style | Style | CSSProperties | |
| snapGap | Specifies the minimum gap required to snap to the next target | number | 0 | |
| snap | Specifies the pixel values to snap to during resizing. Both x and y are optional, allowing the definition of specific axes only | [Snap](#allowing-incremental-width-and-height-adjustment) | null | |
| grid | Specifies the increment to align to when resizing | \[number, number\] | \[1,1\] | |
Expand All @@ -769,25 +768,25 @@ function Demo() {

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ | ---- |
| className | | string | | |
| className | ClassName | string | | |
| direction | Specifies the resize direction within the group | 'horizontal' \| 'vertical' | 'horizontal' | |

### ResizeHandler

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ | ---- |
| className | | string | | |
| style | | CSSProperties | |
| className | ClassName | string | | |
| style | Style | CSSProperties | |

### ResizeItem

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ----------------------------------------------------------------------------- | ----------------------- | ---------- | ------ |
| className | | string | | |
| className | ClassName | string | | |
| defaultSize | Used to set the initial width and height. **The string supports % and px units, and when the string is a pure number or a number is set directly, it represents the proportional allocation of the remaining space based on the value.** | string \| number | | |
| min | Specifies the minimum size of the resizable box (as percentage or pixel) | string | | |
| max | Specifies the maximum size of the resizable box (as percentage or pixel) | string | | |
| style | | CSSProperties | |
| style | Style | CSSProperties | |
| onChange | Callback during the dragging process | (size: Size; e: Event; direction: String) => void | - | |
| onResizeStart | Callback when resizing starts | (e: Event; direction: String) => void | - | |
| onResizeEnd | Callback when resizing ends | (size: Size; e: Event; direction: String) => void | - | |
Expand Down
188 changes: 124 additions & 64 deletions content/basic/resizable/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,27 +219,27 @@ import React, { useState } from 'react';
import { Resizable } from '@douyinfe/semi-ui';

function Demo() {
const [size, setSize] = useState({ width: 200, height: 300 });

const onChange = () => {
let realSize = { width: size.width + 10, height: size.height + 10 };
setSize(realSize);
};
return (
<div style={{ width: '500px', height: '60%' }}>
<Button onClick={onChange}>set += 10</Button>
<Resizable
style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginTop: '10px' }}
defaultSize={{
width: 100,
height: 100,
}}
size={size}
>
<div style={{ marginLeft: '20%' }}>受控</div>
</Resizable>
const [size, setSize] = useState({ width: 200, height: 100 });
const onButtonClick = () => {
let realSize = { width: size.width + 10, height: size.height + 10 };
setSize(realSize);
};
const onChange = (s) => { setSize(s); }

return (
<div style={{ width: '500px', height: '60%' }}>
<Button onClick={onButtonClick}>set += 10</Button>
<Resizable
style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', marginTop: '10px' }}
size={size}
onChange={onChange}
>
<div style={{ marginLeft: '20%' }}>
受控
</div>
);
</Resizable>
</div>
);
}
```

Expand Down Expand Up @@ -698,62 +698,122 @@ function Demo() {
}
```

### 动态方向

```jsx live=true
import React, { useState } from 'react';
import { ResizeItem, ResizeHandler, ResizeGroup } from '@douyinfe/semi-ui';

function Demo() {
const [text, setText] = useState('drag to resize')
const [direction, setDirection] = useState('horizontal')

const changeDirection = () => {
if (direction === 'horizontal') {
setDirection('vertical')
} else {
setDirection('horizontal')
}
}
return (
<div style={{ width: '400px', height: '300px' }}>
<Button onClick={changeDirection}>{direction}</Button>
<ResizeGroup direction={direction} >
<ResizeItem
onChange={() => { setText('resizing') }}
onResizeEnd={() => { setText('drag to resize') }}
defaultSize={5}
>
<ResizeGroup direction='horizontal'>
<ResizeItem
style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', }}
onChange={() => { setText('resizing') }}
onResizeEnd={() => { setText('drag to resize') }}
>
<div style={{ marginLeft: '20%', padding:'5px' }}>
{text}
</div>
</ResizeItem>
<ResizeHandler></ResizeHandler>
<ResizeItem
style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', }}
onChange={() => { setText('resizing') }}
>
<div style={{ marginLeft: '20%', padding:'5px' }}>
{text}
</div>
</ResizeItem>
</ResizeGroup>
</ResizeItem>
<ResizeHandler></ResizeHandler>
<ResizeItem
style={{ backgroundColor: 'rgba(var(--semi-grey-1), 1)', }}
defaultSize={1.3}
onChange={() => { setText('resizing') }}
>
<div style={{ marginLeft: '20%', padding:'5px' }}>
{text}
</div>
</ResizeItem>
</ResizeGroup>
</div>
);
}
```

## API 参考

### Resizable

单个伸缩框组件。

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 类名 | string | | |
| size | 控制伸缩框的大小，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) | | |
| defaultSize | 用于设置初始宽高，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) | | |
| minWidth | 指定伸缩框最小宽度 | string \| number | | |
| maxWidth | 指定伸缩框最大宽度 | string \| number | | |
| minHeight | 指定伸缩框最小高度 | string \| number | | |
| maxHeight | 指定伸缩框最大高度 | string \| number | |
| lockAspectRatio | 设置伸缩框横纵比，当为`true`时按照初始宽高锁定 | boolean \| number | | |
| enable | 指定伸缩框可以伸缩的方向，没有设置为 false，则默认允许该方向的拖动 | [Enable](#控制伸缩方向) |
| scale | 可伸缩元素被缩放的比例 | number | 1 | |
| boundElement | 用于限制可伸缩元素宽高的元素,传入 `parent` 设置父节点为限制节点 | string | | |
| handleNode | 用于设置拖拽处理元素各个方向的自定义节点 | [HandleNode](#自定义边角handler样式) | | |
| handleStyle | 用于设置拖拽处理元素各个方向的样式 | [HandleStyles](#自定义边角handler样式) | | |
| handleClass | 用于设置拖拽处理元素各个方向的类名称 | [HandleClasses](#自定义边角handler样式) | | |
| style | 样式 | CSSProperties | |
| snapGap | 用于指定移动到下一个目标所需的最小间隙。 | number | 0 | |
| snap | 指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴 | [Snap](#允许阶段性调整宽高) | null | |
| grid | 指定调整大小应对齐的增量 | \[number, number\] | \[1,1\] | |
| onChange | 拖拽过程中的回调 | (e: Event; direction: String;size: Size) => void | - | |
| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - | |
| onResizeEnd | 结束伸缩的回调 | (e: Event; direction: String) => void | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ----------------------------------------------------------------------------- | ----------------------- | ---------- | ------ |
| className | 类名 | string | | |
| size | 控制伸缩框的大小，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) | | |
| defaultSize | 用于设置初始宽高，支持数字和字符串（px/vw/vh/%）两种格式 | [Size](#基本使用与回调) | | |
| minWidth | 指定伸缩框最小宽度 | string \| number | | |
| maxWidth | 指定伸缩框最大宽度 | string \| number | | |
| minHeight | 指定伸缩框最小高度 | string \| number | | |
| maxHeight | 指定伸缩框最大高度 | string \| number | |
| lockAspectRatio | 设置伸缩框横纵比，当为`true`时按照初始宽高锁定 | boolean \| number | | |
| enable | 指定伸缩框可以伸缩的方向，没有设置为 false，则默认允许该方向的拖动 | [Enable](#控制伸缩方向)
| scale | 可伸缩元素被缩放的比例 | number | 1 | |
| boundElement | 用于限制可伸缩元素宽高的元素,传入 `parent` 设置父节点为限制节点 | string | | |
| handleNode | 用于设置拖拽处理元素各个方向的自定义节点 | [HandleNode](#自定义边角handler样式) | | |
| handleStyle | 用于设置拖拽处理元素各个方向的样式 | [HandleStyles](#自定义边角handler样式) | | |
| handleClass | 用于设置拖拽处理元素各个方向的类名称 | [HandleClasses](#自定义边角handler样式) | | |
| style | 样式 | CSSProperties | |
| snapGap | 用于指定移动到下一个目标所需的最小间隙。 | number | 0 | |
| snap | 指定调整大小时应对齐的绝对像素值。 x 和 y 都是可选的，允许仅包含要定义的轴 | [Snap](#允许阶段性调整宽高) | null | |
| grid | 指定调整大小应对齐的增量 | \[number, number\] | \[1,1\] | |
| onChange | 拖拽过程中的回调 | (size: Size; e: Event; direction: String) => void | - | |
| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - | |
| onResizeEnd | 结束伸缩的回调 | (size: Size; e: Event; direction: String) => void | - | |

### ResizeGroup

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ----------------------- | -------------------------- | ------------ | ---- |
| className | 类名 | string | | |
| direction | 指定 Group 内的伸缩方向 | 'horizontal' \| 'vertical' | 'horizontal' | |

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ | ---- |
| className | 类名 | string | | |
| direction | 指定Group内的伸缩方向 | 'horizontal' \| 'vertical' | 'horizontal' | |
### ResizeHandler

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ---- | ------------- | ------ | ---- |
| className | 类名 | string | | |
| style | 样式 | CSSProperties | |

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------ | ---- |
| className | 类名 | string | | |
| style | 样式 | CSSProperties | |
### ResizeItem
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ----------------------------------------------------------------------------- | ----------------------- | ---------- | ------ |
| className | 类名 | string | | |
| defaultSize | 用于设置初始宽高，**字符串支持%和px单位，当字符串为纯数字或直接设置数字时表示按照值的比例分配剩余空间** | string \| number | | |
| min | 指定伸缩框最小尺寸（百分比或像素值） | string | | |
| max | 指定伸缩框最大尺寸（百分比或像素值） | string | | |
| style | 样式 | CSSProperties | |
| onChange | 拖拽过程中的回调 | (size: Size; e: Event; direction: String) => void | - | |
| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - | |
| onResizeEnd | 结束伸缩的回调 | (size: Size; e: Event; direction: String) => void | - | |

| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 类名 | string | | |
| defaultSize | 用于设置初始宽高，**字符串支持%和 px 单位，当字符串为纯数字或直接设置数字时表示按照值的比例分配剩余空间** | string \| number | | |
| min | 指定伸缩框最小尺寸（百分比或像素值） | string | | |
| max | 指定伸缩框最大尺寸（百分比或像素值） | string | | |
| style | 样式 | CSSProperties | |
| onChange | 拖拽过程中的回调 | (e: Event; direction: String;size: Size) => void | - | |
| onResizeStart | 开始伸缩的回调 | (e: Event; direction: String) => void | - | |
| onResizeEnd | 结束伸缩的回调 | (e: Event; direction: String) => void | - | |

## 设计变量

Expand Down
Loading

0 comments on commit 4e86e42

Please sign in to comment.