mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-15 17:19:11 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity
fbf8b10425
ant-design/components/splitter/index.en-US.md
Wanpan 742ce37887
feat:🔥New Component: Splitter (#50038) 
* feat: SplitPanel init

* feat: SplitPanel update

* feat: SplitPanel update

* feat: splitPanel update useResize

* feat: SplitPanel update

* feat: splitPanel update useResize

* feat: SplitPanel update

* feat: splitPanel demo

* feat: splitPanel update

* feat: splitPanel support complicated combination

* feat: SplitPanel rename to Splitter

* feat: Splitter support onRize

* feat: support collapsible

* feat: support token and collapsible

* feat: update docs

* feat: size defaultSize support string

* feat: min max support string

* feat: update

* feat: support DOM structure

* feat: Optimize UI

* feat: Optimize Code

* fix: Add a default size during initialization to prevent failure to obtain container size

* feat: optimized code

* feat: optimized code

* feat: Optimize Code

* Update components/splitter/demo/layout.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: Wanpan <wanpan96@163.com>

* Update components/splitter/demo/multiple.tsx

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: Wanpan <wanpan96@163.com>

* docs: update

* feat: Modify the style and optimize the interface

* feat: use PropsWithChildren

* feat: support rtl

* feat: collapsible supports object types

* fix: when collapsible is boolean not work

* feat: Splitter add test

* feat: update

* test: update snapshots

* docs: update

* test: update snapshots

* test: update

* test: update

* test: update

* test: update

* fix: Removed invalid min and max restrictions when collapsible exists

* test: update

* test: update

* test: update

* test: test coverage

* Revert "test: test coverage"

This reverts commit d247193722.

* test: test coverage

* feat: rename

* feat: optimized code

* ci: lint

* feat: optimized code

* feat: add useag tips

* feat: optimized code

* feat: Modify splitbar layout

* feat: optimized code

* feat: numerical precision

* feat: optimized code

* feat: Optimized trigger region

* feat: Support configuration animation

* fix: Fix Collapsible exception when using multiple panels

* fix: Fixed the issue of drag area overlapping when multiple panels are folded

* feat: optimized code

* feat: annotation

* feAt: optimized code

* fix: bgcolor

* fix: Modify the initial value calculation method

* test: update

* feat: add cover image

* chore: adjust logic

* chore: use items size

* chore: rtl

* chore: limit

* chore: controlled

* docs: update demo

* docs: adjust style

* chore: add split style

* chore: hor collapisble style

* chore: collapse icon

* chore: update warning

* chore: clean up

* chore: collapse logic

* chore: adjust demo

* chore: clean up

* test: adjust logic

* docs: update demo

* docs: rm useless demo

* docs: demo

* test: add demo test

* test: test of them

* test: 100% coverage

* chore: fix lint

* docs: update demo

* refactor: unique resize config

* docs: add demo

* fix: support virtual resiable

* chore: add cursor mask

* test: update snapshot

* test: add test case

* test: update snapshot

* chore: use px base

* chore: rm useless code

---------

Signed-off-by: Wanpan <wanpan96@163.com>
Co-authored-by: lijianan <574980606@qq.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
Co-authored-by: ice <49827327+coding-ice@users.noreply.github.com>
2024-09-09 19:23:25 +08:00

2.1 KiB
Raw Blame History

category group title description cover coverDark demo tag
Components Layout Splitter Split panels are used to isolate areas and display multiple contents. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mQmMTYq6OjYAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7v4GTo2Ely8AAAAAAAAAAAAADrJ8AQ/original
cols
1
5.21.0

When To Use

You need to display multiple contents, and you want users to be able to adjust the size of each content freely.

  • The Splitter component needs to calculate the panel size through its child elements, so its child elements only support Splitter.Panel。

Examples

Basic Control mode Vertical Collapsible Multiple panels Complex combination Debug

API

Common props ref：Common props

Splitter

Property Description Type Default Version
layout Layout direction horizontal | vertical horizontal -
onResizeStart Callback before dragging starts (sizes: number[]) => void - -
onResize Panel size change callback (sizes: number[]) => void - -
onResizeEnd Drag end callback (sizes: number[]) => void - -

Panel

Property Description Type Default Version
min Minimum threshold support number for px or 'percent%' usage number | string - -
max Maximum threshold support number for px or 'percent%' usage number | string - -
size Controlled panel size support number for px or 'percent%' usage number | string - -
collapsible Quick folding boolean | { start?: boolean; end?: boolean } false -
resizable Whether to enable drag and drop boolean true -

Design Token