{"id":23857029,"url":"https://github.com/uiwjs/react-split","last_synced_at":"2025-09-08T04:32:10.425Z","repository":{"id":37032011,"uuid":"255828288","full_name":"uiwjs/react-split","owner":"uiwjs","description":"A piece of view can be divided into areas where the width or height can be adjusted by dragging.","archived":false,"fork":false,"pushed_at":"2024-12-21T10:50:58.000Z","size":121868,"stargazers_count":78,"open_issues_count":6,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-20T10:53:42.627Z","etag":null,"topics":["react","react-components","split","typescript","uiw"],"latest_commit_sha":null,"homepage":"https://uiwjs.github.io/react-split","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uiwjs.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"jaywcjlove","buy_me_a_coffee":"jaywcjlove","custom":["https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"]}},"created_at":"2020-04-15T06:41:43.000Z","updated_at":"2025-07-22T15:02:25.000Z","dependencies_parsed_at":"2024-06-18T16:55:23.187Z","dependency_job_id":"3db7ea2b-6e60-45e5-9e6f-7ac27b384ff5","html_url":"https://github.com/uiwjs/react-split","commit_stats":null,"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/uiwjs/react-split","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-split","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-split/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-split/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-split/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uiwjs","download_url":"https://codeload.github.com/uiwjs/react-split/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-split/sbom","scorecard":{"id":907642,"data":{"date":"2025-08-11","repo":{"name":"github.com/uiwjs/react-split","commit":"47e8ab7b78759b85651d9681cd24c67c35a54ce8"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/27 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-split/ci.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-split/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-split/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-split/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-split/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-split/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-split/ci.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/uiwjs/react-split/ci.yml/master?enable=pin","Warn: npmCommand not pinned by hash: .github/workflows/ci.yml:23","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   6 third-party GitHubAction dependencies pinned","Info:   0 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Token-Permissions","score":9,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 3 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-24T17:54:20.150Z","repository_id":37032011,"created_at":"2025-08-24T17:54:20.150Z","updated_at":"2025-08-24T17:54:20.150Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274134665,"owners_count":25228198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-08T02:00:09.813Z","response_time":121,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-components","split","typescript","uiw"],"created_at":"2025-01-03T02:02:31.619Z","updated_at":"2025-09-08T04:32:10.414Z","avatar_url":"https://github.com/uiwjs.png","language":"TypeScript","readme":"# Split 面板分割\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-split.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-split)\n[![Build \u0026 Deploy](https://github.com/uiwjs/react-split/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-split/actions/workflows/ci.yml)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-split/file/README.md)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-split.svg)](https://www.npmjs.com/package/@uiw/react-split)\n[![Coverage Status](https://uiwjs.github.io/react-split/badges.svg)](https://uiwjs.github.io/react-split/coverage/lcov-report/)\n[![Open in Gitpod](https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod)](https://gitpod.io/#https://github.com/uiwjs/react-split)\n[![Repo Dependents](https://badgen.net/github/dependents-repo/uiwjs/react-split)](https://github.com/uiwjs/react-split/network/dependents)\n\n可将一块内容，分割为可以拖拽调整宽度或高度的区域。\n\n```jsx\nimport { Split } from 'uiw';\n```\n\n从组件库 `uiw` 中抽离出来的 `@uiw/react-split`，可以单独使用。\n\n```jsx\nimport Split from '@uiw/react-split';\n```\n\n### 基础用法\n\n\u003e ~~通过设置子节点的 `minWidth` 样式，即可设置拖拽最小宽度值。通过设置子节点样式 `flexBasis` 样式即可设置默认分割内容的占比宽度。~~\n\n- 固定初始宽度或者高度，可通过设置子节点，样式 `width: '80%'` 宽度百分百来计算。\n- 拖拽至最小宽度，可通过设置子节点样式 `minWidth: 30`，来达到效果\n- 默认情况下，不设置样式 `width`，需要将某个子节点样式设为 `flex: 1`，来自适应\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () =\u003e (\n  \u003cdiv\u003e\n    \u003cSplit style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\u003e\n      \u003cdiv style={{ width: '20%', minWidth: 30 }}\u003e\n        \u003ciframe\n          srcDoc=\"\u003cdiv\u003etest\u003c/div\u003e\"\n          style={{ width: '100%', height: '100%' }}\n          title=\"Code Preview\"\n          sandbox=\"allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts\"\n        /\u003e\n      \u003c/div\u003e\n      \u003cdiv style={{ width: '80%', minWidth: 100 }}\u003eRight Pane\u003c/div\u003e\n    \u003c/Split\u003e\n    \u003cSplit style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\u003e\n      \u003cdiv style={{ minWidth: 60 }}\u003etest\u003c/div\u003e\n      \u003cdiv style={{ minWidth: 80, flex: 1 }}\u003eRight Pane\u003c/div\u003e\n    \u003c/Split\u003e\n  \u003c/div\u003e\n);\nexport default Demo;\n```\n\n### 可用于布局\n\n设置 `visiable={false}` 禁用拖拽栏，可用于布局。\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () =\u003e (\n  \u003cdiv\u003e\n    \u003cSplit mode=\"vertical\" visiable={false}\u003e\n      \u003cdiv style={{ minHeight: 45, background: '#dcdcdc' }}\u003eHeader\u003c/div\u003e\n      \u003cSplit visiable={false}\u003e\n        \u003cdiv style={{ minWidth: 200, maxWidth: 200, minHeight: 120, background: '#b5b5b5' }}\u003eSider\u003c/div\u003e\n        \u003cdiv style={{ width: '100%', background: '#ececec' }}\u003eContent\u003c/div\u003e\n      \u003c/Split\u003e\n      \u003cdiv style={{ minHeight: 45, background: '#dcdcdc' }}\u003eFooter\u003c/div\u003e\n    \u003c/Split\u003e\n    \u003cdiv style={{ height: 20 }}\u003e\u003c/div\u003e\n    \u003cSplit visiable={false}\u003e\n      \u003cdiv style={{ minWidth: 200, maxWidth: 200, minHeight: 85, background: '#a9a9a9' }}\u003eSider\u003c/div\u003e\n      \u003cSplit mode=\"vertical\" visiable={false} style={{ width: '100%' }}\u003e\n        \u003cdiv style={{ minHeight: 45, background: '#dcdcdc' }}\u003eHeader\u003c/div\u003e\n        \u003cdiv style={{ minHeight: 85, background: '#b5b5b5' }}\u003eContent\u003c/div\u003e\n        \u003cdiv style={{ minHeight: 45, background: '#dcdcdc' }}\u003eFooter\u003c/div\u003e\n      \u003c/Split\u003e\n    \u003c/Split\u003e\n  \u003c/div\u003e\n);\nexport default Demo;\n```\n\n### 多栏分割\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () =\u003e (\n  \u003cSplit style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\u003e\n    \u003cdiv\u003eLeft Pane\u003c/div\u003e\n    \u003cdiv\u003eCenter Pane\u003c/div\u003e\n    \u003cdiv\u003eCenter Pane\u003c/div\u003e\n    \u003cdiv style={{ flex: 1 }}\u003eRight Pane\u003c/div\u003e\n  \u003c/Split\u003e\n);\nexport default Demo;\n```\n\n### 线条拖拽\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () =\u003e (\n  \u003cdiv\u003e\n    \u003cSplit lineBar style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\u003e\n      \u003cdiv\u003eLeft Pane\u003c/div\u003e\n      \u003cdiv\u003eCenter Pane\u003c/div\u003e\n      \u003cdiv\u003eCenter Pane\u003c/div\u003e\n      \u003cdiv style={{ flex: 1 }}\u003eRight Pane\u003c/div\u003e\n    \u003c/Split\u003e\n    \u003cSplit mode=\"vertical\" lineBar style={{ height: 210, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}\u003e\n      \u003cdiv style={{ height: '33.3%' }}\u003eLeft Pane\u003c/div\u003e\n      \u003cdiv style={{ height: '33.3%' }}\u003eCenter Pane\u003c/div\u003e\n      \u003cdiv style={{ flex: 1 }}\u003eRight Pane\u003c/div\u003e\n    \u003c/Split\u003e\n  \u003c/div\u003e\n);\nexport default Demo;\n```\n\n### 垂直分割\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () =\u003e (\n  \u003cSplit mode=\"vertical\" style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}\u003e\n    \u003cdiv style={{ height: '50%' }}\u003eTop Pane\u003c/div\u003e\n    \u003cdiv style={{ height: '50%' }}\u003eBottom Pane\u003c/div\u003e\n  \u003c/Split\u003e\n);\nexport default Demo;\n```\n\n### 嵌套使用\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () =\u003e (\n  \u003cSplit style={{ height: 200, border: '1px solid #d5d5d5', borderRadius: 3 }}\u003e\n    \u003cSplit mode=\"vertical\"\u003e\n      \u003cdiv style={{ height: '50%' }}\u003eTop Pane\u003c/div\u003e\n      \u003cSplit style={{ height: '50%' }}\u003e\n        \u003cdiv\u003eLeft Pane\u003c/div\u003e\n        \u003cdiv style={{ flex: 1 }}\u003eRight Pane\u003c/div\u003e\n      \u003c/Split\u003e\n    \u003c/Split\u003e\n    \u003cdiv style={{ flex: 1 }}\u003eRight Pane\u003c/div\u003e\n  \u003c/Split\u003e\n);\nexport default Demo;\n```\n\n### 拖拽工具不显示\n\n下面实例通过设置 `visiable` 的值来设置拖拽工具是否可见\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () =\u003e (\n  \u003cdiv\u003e\n    \u003cSplit visiable={false} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\u003e\n      \u003cdiv style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}\u003eLeft Pane\u003c/div\u003e\n      \u003cdiv style={{ flex: 1 }}\u003eRight Pane\u003c/div\u003e\n    \u003c/Split\u003e\n    \u003cSplit visiable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}\u003e\n      \u003cdiv style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}\u003ePane 1\u003c/div\u003e\n      \u003cdiv style={{ maxWidth: 60 }}\u003ePane 2\u003c/div\u003e\n      \u003cdiv\u003ePane 3\u003c/div\u003e\n      \u003cdiv\u003ePane 4\u003c/div\u003e\n      \u003cdiv style={{ flex: 1 }}\u003ePane 5\u003c/div\u003e\n    \u003c/Split\u003e\n  \u003c/div\u003e\n);\nexport default Demo;\n```\n\n### 禁用拖拽\n\n通过设置 `disable` 的值，禁用拖拽工具拖拽。\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () =\u003e (\n  \u003cdiv\u003e\n    \u003cSplit disable style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\u003e\n      \u003cdiv style={{ maxWidth: 100, backgroundColor: '#eaeaea' }}\u003eLeft Pane\u003c/div\u003e\n      \u003cSplit disable mode=\"vertical\"\u003e\n        \u003cdiv\u003eTop Pane\u003c/div\u003e\n        \u003cdiv\u003eBottom Pane\u003c/div\u003e\n      \u003c/Split\u003e\n      \u003cdiv style={{ flex: 1 }}\u003eRight Pane\u003c/div\u003e\n    \u003c/Split\u003e\n    \u003cSplit disable={[4, 5]} style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3, marginTop: 10 }}\u003e\n      \u003cdiv style={{ maxWidth: 50, backgroundColor: '#eaeaea' }}\u003ePane 1\u003c/div\u003e\n      \u003cdiv style={{ maxWidth: 60 }}\u003ePane 2\u003c/div\u003e\n      \u003cdiv\u003ePane 3\u003c/div\u003e\n      \u003cdiv\u003ePane 4\u003c/div\u003e\n      \u003cdiv style={{ flex: 1 }}\u003ePane 5\u003c/div\u003e\n    \u003c/Split\u003e\n  \u003c/div\u003e\n);\nexport default Demo;\n```\n\n### 抽屉\n\n可拖拽左边栏宽度。\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\nimport { Menu, Button } from 'uiw';\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      width: 210,\n    };\n  }\n  onClick() {\n    this.setState({\n      width: this.state.width === 0 ? 210 : 0,\n    });\n  }\n  render() {\n    const styl = { lineHeight: 0 };\n    if (this.state.width === 0) {\n      styl.width = `0%`;\n    } else {\n      styl.width = this.state.width;\n    }\n    return (\n      \u003c\u003e\n        \u003cdiv style={{ marginBottom: 10 }}\u003e\n          \u003cButton type=\"primary\" onClick={this.onClick.bind(this)}\u003e\n            {this.state.width === 0 ? '隐藏菜单' : '展示菜单'}\n          \u003c/Button\u003e\n        \u003c/div\u003e\n        \u003cSplit lineBar visiable={this.state.width !== 0} style={{ border: '1px solid #d5d5d5', borderRadius: 3 }}\u003e\n          \u003cdiv style={{ ...styl, overflow: 'hidden' }}\u003e\n            \u003cMenu\u003e\n              \u003cMenu.Item icon=\"heart-on\" text=\"另存为\" active /\u003e\n              \u003cMenu.Item icon=\"appstore\" text=\"应用商城\" /\u003e\n              \u003cMenu.Item icon=\"bar-chart\" text=\"月统计报表导出\" /\u003e\n              \u003cMenu.Item icon=\"setting\" text=\"偏好设置\" /\u003e\n              \u003cMenu.Divider /\u003e\n              \u003cMenu.Item icon=\"map\" text=\"谷歌地图\" /\u003e\n            \u003c/Menu\u003e\n          \u003c/div\u003e\n          \u003cdiv style={{ flex: 1, minWidth: 30 }}\u003eRight Pane\u003c/div\u003e\n        \u003c/Split\u003e\n      \u003c/\u003e\n    );\n  }\n}\nexport default Demo;\n```\n\n### 支持自定义拖拽工具栏\n\n```jsx mdx:preview\u0026background=#fff\u0026codeSandbox=true\u0026codePen=true\nimport React from 'react';\nimport Split from '@uiw/react-split';\n\nconst Demo = () =\u003e (\n  \u003cdiv\u003e\n    \u003cSplit\n      renderBar={({ onMouseDown, ...props }) =\u003e {\n        return (\n          \u003cdiv {...props} style={{ boxShadow: 'none', background: 'transparent' }}\u003e\n            \u003cdiv onMouseDown={onMouseDown} style={{ backgroundColor: '#ff000057', boxShadow: 'none' }} /\u003e\n          \u003c/div\u003e\n        );\n      }}\n      style={{ height: 100, border: '1px solid #d5d5d5', borderRadius: 3 }}\n    \u003e\n      \u003cdiv style={{ minWidth: 60 }}\u003etest\u003c/div\u003e\n      \u003cdiv style={{ minWidth: 80, flex: 1 }}\u003eRight Pane\u003c/div\u003e\n    \u003c/Split\u003e\n  \u003c/div\u003e\n);\nexport default Demo;\n```\n\n## Props\n\n```ts\nexport interface SplitProps extends Omit\u003cReact.HTMLAttributes\u003cHTMLDivElement\u003e, 'onDragEnd'\u003e {\n  style?: React.CSSProperties;\n  className?: string;\n  prefixCls?: string;\n  /**\n   * 拖拽宽度/高度变化回调函数，宽度或者高度根据 mode 参数来确定\n   */\n  onDragging?: (preSize: number, nextSize: number, paneNumber: number) =\u003e void;\n  /**\n   * 拖拽结束的回调函数\n   */\n  onDragEnd?: (preSize: number, nextSize: number, paneNumber: number) =\u003e void;\n  /** 支持自定义拖拽工具栏 */\n  renderBar?: (props: React.HTMLAttributes\u003cHTMLDivElement\u003e) =\u003e JSX.Element;\n  /**\n   * 设置拖拽的工具条，为线条样式。\n   */\n  lineBar?: boolean;\n  /**\n   * 设置拖拽的工具条，是否可见\n   */\n  visiable?: boolean | number[];\n  /**\n   * 设置拖拽的工具条，禁用\n   */\n  disable?: boolean | number[];\n  /**\n   * 类型，可选值为 `horizontal` 或 `vertical`\n   */\n  mode?: 'horizontal' | 'vertical';\n}\n```\n\n## Development\n\nRuns the project in development mode.\n\n```bash\n# Step 1, run first, listen to the component compile and output the .js file\nnpm run watch\nnpm run build\n# Step 2, development mode, listen to compile preview website instance\nnpm run doc\n```\n\n**production**\n\nBuilds the app for production to the build folder.\n\n```bash\nnpm run released\n```\n\nThe build is minified and the filenames include the hashes.\nYour app is ready to be deployed!\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\u003ca href=\"https://github.com/uiwjs/react-split/graphs/contributors\"\u003e\n  \u003cimg src=\"https://uiwjs.github.io/react-split/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\nMade with [action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n### License\n\nLicensed under the MIT License.\n","funding_links":["https://ko-fi.com/jaywcjlove","https://buymeacoffee.com/jaywcjlove","https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Freact-split","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuiwjs%2Freact-split","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Freact-split/lists"}