feat: update

This commit is contained in:
Wanpan 2024-08-16 17:53:52 +08:00
parent f441a83922
commit 70f5f809f6
7 changed files with 9 additions and 79 deletions

View File

@ -56,4 +56,4 @@ const NotFoundPage: React.FC<NotFoundProps> = ({ router }) => {
);
};
export default NotFoundPage;
export default NotFoundPage;

View File

@ -171,4 +171,4 @@ export { default as version } from './version';
export { default as Watermark } from './watermark';
export type { WatermarkProps } from './watermark';
export { default as Splitter } from './splitter';
export type { SplitterProps, PanelProps } from './splitter';
export type { SplitterProps } from './splitter';

View File

@ -1,10 +1,12 @@
/* eslint-disable react/no-array-index-key */
import React from 'react';
import type { PanelProps } from 'antd';
import { Splitter } from 'antd';
import type { GetProps } from 'antd';
import { render, waitFakeTimer } from '../../../tests/utils';
type PanelProps = GetProps<typeof Splitter.Panel>;
// jsdom 不执行任何布局,因此不会计算值 https://github.com/jsdom/jsdom/issues/1590
global.HTMLElement.prototype.getBoundingClientRect = () =>
({

View File

@ -1,7 +1,7 @@
## zh-CN
简单案例
测试
## en-US
A simple case.
debugger

View File

@ -1,7 +1,6 @@
import Panel from './Panel';
import SplitterComp from './Splitter';
export type { PanelProps } from './Panel';
export type { SplitterProps } from './Splitter';
type CompoundedComponent = typeof SplitterComp & {

View File

@ -13,6 +13,8 @@ tag: 5.21.0
需要展示多个内容,并且希望用户可以自由调整每个内容的大小。
- Splitter 组件需要通过子元素计算面板大小,因而其子元素仅支持 `Splitter.Panel`
## 代码演示
<!-- prettier-ignore -->

View File

@ -1,73 +0,0 @@
## Motivation
分割面板用于隔离区域,展示多个内容.
## Components
- Splitter
- 对外暴露组件
- Panel
- 对外暴露面板组件
- SplitBar
- 操作组件
## API
### Splitter
| Props | Descriptions | Type | Default |
| ------------- | ---------------- | --------------------------- | ------------ |
| layout | 布局方向 | `horizontal` \| `vertical` | `horizontal` |
| style | 容器样式 | `css-properties` | - |
| onResizeStart | 开始拖拽之前回调 | `(sizes: number[]) => void` | - |
| onResize | 面板大小变化回调 | `(sizes: number[]) => void` | - |
| onResizeEnd | 拖拽结束回调 | `(sizes: number[]) => void` | - |
### Panel
| Props | Descriptions | Type | Default |
| ----------- | --------------------------------------------- | ------------------ | ------- |
| min | 最小阈值 `1-100 \| '10%' \| '200px'` | `number \| string` | - |
| max | 最大阈值 `1-100 \| '10%' \| '200px'` | `number \| string` | - |
| size | 受控面板大小 `1-100 \| '10%' \| '200px'` | `number` | - |
| defaultSize | 初始面板大小 `1-100 \| '10%' \| '200px'` | `number` | - |
| collapsible | 快速折叠 `collapsible=true`时将忽略`min``max` | `boolean` | `false` |
| resizable | 是否支持拖拽伸缩 | `boolean` | `true` |
## Token
| Props | Descriptions | Type | Default |
| ------------------- | ---------------------- | -------- | ------- |
| resizableSize | 可改变大小标识元素大小 | `number` | `10` |
| collapsibleIconSize | 快速折叠图标大小 | `number` | `12` |
## Example
[preview](https://github.com/ant-design/ant-design/pull/50038#issuecomment-2246752430)
```ts
const App: React.FC = () => (
<Splitter
layout={layout}
style={{
height: 300,
borderRadius: '4px',
boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',
}}
>
<Splitter.Panel defaultSize="220px" collapsible>
<Card title="first" bordered={false}>
<div>collapsible: true</div>
</Card>
</Splitter.Panel>
<Splitter.Panel>
<Card title="second" bordered={false}>
<div>something</div>
</Card>
</Splitter.Panel>
</Splitter>
);
```
<img width="1192" alt="image" src="https://github.com/user-attachments/assets/17da525c-77f9-4856-a190-a207f3670ec6">