拖动条显示多了

[gamefriends]

我实际给了2个子元素，给我1个split-bar就可以了，但是给了2个，下面的那个bar不能控制，很难看。
另外，有办法自定义bar的icon吗？

<Split mode={'vertical'} style={{height: '300px', overflow: 'hidden'}}>
  <div style={{ height: '50%', overflow: 'auto' }}>
    By dragging 'draggable' surface you can change size of the first pane. The first pane keeps then its size while the second pane is resized by browser window. By default it is the left pane for 'vertical' SplitPane and the top pane for 'horizontal' SplitPane. If you want to keep size of the second pane and let the first pane to shrink or grow by browser window dimensions, set SplitPane prop primary to second. In case of 'horizontal' SplitPane the height of bottom pane remains the same.
  </div>
  <div style={{ height: '50%', overflow: 'auto' }}>
    By dragging 'draggable' surface you can change size of the first pane. The first pane keeps then its size while the second pane is resized by browser window. By default it is the left pane for 'vertical' SplitPane and the top pane for 'horizontal' SplitPane. If you want to keep size of the second pane and let the first pane to shrink or grow by browser window dimensions, set SplitPane prop primary to second. In case of 'horizontal' SplitPane the height of bottom pane remains the same.
  </div>
</Split>

[jaywcjlove]

@gamefriends 自定义这个玩意儿？

滚动条是否能给个示例看看，得空我看看

[gamefriends]

@gamefriends 自定义这个玩意儿？

滚动条是否能给个示例看看，得空我看看

@jaywcjlove

现在滚动条icon我是用::before 的contnt url来给的图片，但是这样很有局限性，比如按钮小了，只能用zoom来缩放，而且，调整位置也比较麻烦。

示例就是这个。

<Split mode={'vertical'} style={{height: '300px', overflow: 'hidden'}}>
  <div style={{ height: '50%', overflow: 'auto' }}>
    By dragging 'draggable' surface you can change size of the first pane. The first pane keeps then its size while the second pane is resized by browser window. By default it is the left pane for 'vertical' SplitPane and the top pane for 'horizontal' SplitPane. If you want to keep size of the second pane and let the first pane to shrink or grow by browser window dimensions, set SplitPane prop primary to second. In case of 'horizontal' SplitPane the height of bottom pane remains the same.
  </div>
  <div style={{ height: '50%', overflow: 'auto' }}>
    By dragging 'draggable' surface you can change size of the first pane. The first pane keeps then its size while the second pane is resized by browser window. By default it is the left pane for 'vertical' SplitPane and the top pane for 'horizontal' SplitPane. If you want to keep size of the second pane and let the first pane to shrink or grow by browser window dimensions, set SplitPane prop primary to second. In case of 'horizontal' SplitPane the height of bottom pane remains the same.
  </div>
</Split>

[jaywcjlove]

可以用 https://codesandbox.io/ 给我展示个示例？

提供一个 renderBar 的 API？
@gamefriends

[gamefriends]

https://codesandbox.io/s/jolly-carlos-brfyo?file=/src/App.js

应该是把style标签页作为显示对象遍历了。

[gamefriends]

可以用 https://codesandbox.io/ 给我展示个示例？

提供一个 renderBar 的 API？
@gamefriends

这样最好，用户可以自己根据需要调整样式结构。
@jaywcjlove

[jaywcjlove]

@gamefriends Upgrade @uiw/react-split@5.8.4