Replies: 1 comment 2 replies
-
I agree that it would be nice to have a splitter, but I've impression that one way of splitting would be OK (horizontal or vertical, but not both in the same time). |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I miss a simple splitter.
The Splitter would support resizing two adjacent panes by serving as a draggable separation line.
拆分器(Splitter)组件允许通过可拖动的分隔条在垂直和/或水平方向上拆分容器。
It could look like the QSplitter in Qt (https://doc.qt.io/qt-5/qsplitter.html) or the QSplitter in Quasar.
Note: The graphical representation of a Splitter is somewhat similar to a Divider (ElDivider) but with the ability to be draggable.
By dragging an ElSplitter (separation line) downwards, the height of the upper pane is increased while the height of the lower pane is decreased.
+-----------------------------------+
| Upper pane ////////////////////// |
| //////////////////////////////////// |
| //////////////////////////////////// |
| //////////////////////////////////// |
| //////////////////////////////////// |
======= ElSplitter =========
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| Lower pane \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
+-----------------------------------+
After dragging downwards:
+-----------------------------------+
| Upper pane ////////////////////// |
| //////////////////////////////////// |
| //////////////////////////////////// |
| //////////////////////////////////// |
| //////////////////////////////////// |
| //////////////////////////////////// |
| //////////////////////////////////// |
======= ElSplitter =========
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| Lower pane \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
+-----------------------------------+
Optionally the ElSplitter could also support vertical splitting.
So, by dragging the ElSplitter to the right, the width of the left pane would be increased while the width of the right pane is decreased.
Optionally the ElSplitter could simultaneously support horizontal and vertical splitting of four panes.
Thus, the width of the two left panes (and two right panes) would always change simultaneously.
+------------------------------------||------------------------------------+
| Top left pane ///////////////////// || /////////////////// Top right pane |
| //////////////////////////////////// || //////////////////////////////////// |
| //////////////////////////////////// || //////////////////////////////////// |
| //////////////////////////////////// || //////////////////////////////////// |
| //////////////////////////////////// || //////////////////////////////////// |
===================ElSplitter====================
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ || \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ || \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ || \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ || \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| Lower pane \ \ \ \ \ \ \ \ \ \ \ \ \ \ || \ \ \ \ \ \ \ \ \ Bottom right pane |
+------------------------------------||------------------------------------+
After dragging towards the bottom right:
+-----------------------------------------||-------------------------------+
| Top left pane ////////////////////////// || ////////////// Top right pane |
| ///////////////////////////////////////// || /////////////////////////////// |
| ///////////////////////////////////////// || /////////////////////////////// |
| ///////////////////////////////////////// || /////////////////////////////// |
| ///////////////////////////////////////// || /////////////////////////////// |
| ///////////////////////////////////////// || /////////////////////////////// |
| ///////////////////////////////////////// || /////////////////////////////// |
======================ElSplitter=================
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ || \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ || \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ |
| Lower pane \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ || \ \ \ \ \ \ Bottom right pane |
+-----------------------------------------||-------------------------------+
Preferably the graphical representation could be a bit different as compared to that of a ElDivider, e.g. indicated as a raised line (via 3D effect), or by two parallel lines.
The shape of the cursor should be changed (e.g. like <-||-> for vertical resizing) while the mouse is hovering over the separation line.
Beta Was this translation helpful? Give feedback.
All reactions