logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
6.0.0-alpha.1
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Masonry
      6.0.0
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
      DEPRECATED
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
When To Use
Examples
Basic
Control mode
Vertical
Collapsible
Control collapsible icons
Multiple panels
Complex combination
Lazy
Customize
API
Splitter
Panel
Semantic DOM
Design Token

Splitter

Split panels to isolate
Importimport { Splitter } from "antd";
Sourcecomponents/splitter
Docs
Edit this pageChangelog
Versionsupported since 5.21.0
contributors
  • SpaceAnchor

    Resources

    Ant Design X
    Ant Design Charts
    Ant Design Pro
    Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Web3
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    X
    yuque logoAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconf logoSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTech logoMore Products

    yuque logoYuQue-Document Collaboration Platform
    AntV logoAntV-Data Visualization
    Egg logoEgg-Enterprise Node.js Framework
    Kitchen logoKitchen-Sketch Toolkit
    Galacean logoGalacean-Interactive Graphics Solution
    xtech logoAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community
    loading

    When To Use

    Can be used to separate areas horizontally or vertically. When you need to freely drag and adjust the size of each area. When you need to specify the maximum and minimum width and height of an area.

    Examples

    API

    Common props ref:Common props

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

    Splitter

    PropertyDescriptionTypeDefaultVersion
    classNamesSemantic structure classNameRecord<SemanticDOM, string>-6.0.0
    collapsibleIconcustom collapsible icon{start: ReactNode; end: ReactNode}-6.0.0
    draggerIconcustom dragger iconReactNode-6.0.0
    layoutLayout directionhorizontal | verticalhorizontal-
    lazyLazy modebooleanfalse5.23.0
    orientationOrientation directionhorizontal | verticalhorizontal
    stylesSemantic structure styleRecord<SemanticDOM, CSSProperties>-6.0.0
    verticalOrientation,Simultaneously existing with orientation, orientation takes prioritybooleanfalse
    onResizePanel size change callback(sizes: number[]) => void--
    onResizeEndDrag end callback(sizes: number[]) => void--
    onResizeStartCallback before dragging starts(sizes: number[]) => void--

    Panel

    PropertyDescriptionTypeDefaultVersion
    collapsibleQuick foldingboolean | { start?: boolean; end?: boolean; showCollapsibleIcon?: boolean | 'auto' }falseshowCollapsibleIcon: 5.27.0
    defaultSizeInitial panel size support number for px or 'percent%' usagenumber | string--
    maxMaximum threshold support number for px or 'percent%' usagenumber | string--
    minMinimum threshold support number for px or 'percent%' usagenumber | string--
    resizableWhether to enable drag and dropbooleantrue-
    sizeControlled panel size support number for px or 'percent%' usagenumber | string--

    Semantic DOM

    Design Token

    Component TokenHow to use?
    Token NameDescriptionTypeDefault Value
    splitBarDraggableSizeDrag and drop the identity element sizenumber20
    splitBarSizeDrag the element display sizenumber2
    splitTriggerSizeDrag and drop trigger area sizenumber6
    Global TokenHow to use?
    Basic

    Initialize panel size, panel size limit.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Control mode

    Control the size of the splitter. When one of the panels disables resizable, dragging will be disabled.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Vertical

    Use vertical layout.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Collapsible

    Set collapsible to enable collapse. Can through min to limit dragging to expand when collapsed.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Control collapsible icons

    Set collapsible.showCollapsibleIcon to control the display mode of collapsible icons.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    5.27.0
    Multiple panels

    Multiple panels.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Complex combination

    Complex combination panel, quick folding, prohibited from changing size

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    Lazy

    Lazy mode, dragging does not update the size immediately, but updates when released.

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    5.23.0
    Customize

    customize handle elements and style

    CodeSandbox Icon
    Hitu Icon
    codepen icon
    External Link Icon
    Expand Icon
    6.0.0
    First
    Second
    First
    Second
    First
    Second
    First
    Second
    First
    Second

    ShowCollapsibleIcon:

    First
    Second
    Third
    Panel 1
    Panel 2
    Panel 3
    Left
    Top
    Bottom
    First
    Second
    First
    Second
    Panel 1
    Panel 2
    Panel 3
    First
    Second
    First
    Second
    • root
      6.0.0
      Root element
    • panel
      6.0.0
      Panel element
    • dragger
      6.0.0
      Panel control element