This is the 17th day of my participation in the First Challenge 2022.

Hello ~ I’m Milo! I am building an open source interface testing platform from 0 to 1, and also writing a set of corresponding tutorials, I hope you can support more. Welcome to follow my public account Milo test diary, get the latest article tutorial!

review

In the last section, we wrote the system Settings page related functions. In this section, we will optimize the use case directory and use case page display.

Let’s look at how to implement a split screen.

What is split screen

Our current use case list page does not support split screens, because the width of the left and right cards is relatively fixed, meaning you cannot drag and drop them to zoom in and out.

As shown, if I had a long directory name now, it would probably look bad. (Because the left side is not wide enough)

Let’s look at the split-screen component, which we’ll show in a GIF:

Components research

I stumbled a bit at first and had no idea how to search for the corresponding component on Github, but of course writing it myself was impossible (after all, it wasn’t).

Later, I saw some recommended components on the Ant.Design website:

This is the power of ecology!

Then we found the humble split screen component:

Check out the demo on the website

The demo on the official website is really very rough, and does not even write import. This reminds me of a star first Java excel library that doesn’t even have maven/ Gradle dependencies.

A brief description of its API:

  • split

    There are vertical and horizontal segmentation modes, that is, left and right split screen and up and down split screen. We need to use vertical here.

  • minSize

    Minimum size, usually the left div.

  • defaultSize

    The default size

  • maxSize

    Maximum size, which is the maximum width that the left div can be dragged to.

Matters needing attention

In the figure, we can see that the two divs wrapped by SplitPane have split screen operations. Is it feasible for us to perform the same operation on Col of ANTD?

The blogger tried it himself, but no, it would lead to page confusion. So we’re going to stick with the div tag.

Apply it to pity

  1. Install dependencies
npm install --save react-split-pane
Copy the code

We mainly want to make a case and directories, so we find a directory that JSX: SRC/pages/ApiTest/TestCaseDirectory JSX adjust the following contents:

  1. The new reference
import SplitPane from 'react-split-pane';

Copy the code
  1. Modify the case and use case views

Find the Row here and add the SplitPane component below, changing the two Col components to divs.

Let’s take a look at the effect:

You can see the style change, but it doesn’t actually work.

Troubleshoot problems

So that’s why I said the demo on the website wasn’t very good, because we had to write some extra CSS styles.

  • Write the SRC/pages/ApiTest/TestCaseDirectory. Less file (not new)
.Resizer {
  background: # 000;
  opacity: 0.2;
  z-index: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.Resizer:hover {
  -webkit-transition: all 2s ease;
  transition: all 2s ease;
}

.Resizer.horizontal {
  height: 11px;
  margin: -5px 0;
  border-top: 5px solid rgba(255.255.255.0);
  border-bottom: 5px solid rgba(255.255.255.0);
  cursor: row-resize;
  width: 100%;
}

.Resizer.horizontal:hover {
  border-top: 5px solid rgba(0.0.0.0.5);
  border-bottom: 5px solid rgba(0.0.0.0.5);
}

.Resizer.vertical {
  width: 11px;
  margin: 0 -5px;
  border-left: 5px solid rgba(255.255.255.0);
  border-right: 5px solid rgba(255.255.255.0);
  cursor: col-resize;
}

.Resizer.vertical:hover {
  border-left: 5px solid rgba(0.0.0.0.5);
  border-right: 5px solid rgba(0.0.0.0.5);
}
.Resizer.disabled {
  cursor: not-allowed;
}
.Resizer.disabled:hover {
  border-color: transparent;
}

Copy the code
  • The introduction of

The final result

With this capability, we can easily write similar components, which can easily split divs from other pages.