The introduction

There are a lot of CSS styles, and when they work with each other they can actually do quite well, and they can also reduce a lot of JavaScript code. The increased number of JavsScript scripts due to a lack of style understanding is not worth the cost.

Case scenario

Previously we designed a tab-toggle UI with a body style similar to that of the Vue component library iView, elementUI tabs, with a few variations. Similar renderings are shown below.

The TAB tiles are full, but the dynamic transition blue line below is shorter. ElementUI provides the Stretch property to automatically stretch, iView does not but can change the width itself by setting the overall width. But the bottom line does look something like this.

Just make the blue line shorter. If you only want to change the width value by style, then you can only achieve this effect with a fixed width, and the line position is offset by changing the width (depending on screen adaptation).

Put an effect of the changed width to see.

Is it so bad that you think this style can’t be implemented? Either you have to transition this style without the following line, or you can write your own instead of using the Tabs component/plug-in.

The solution

If this is what you really think, then look below. There are at least three solutions that can do this and automatically adapt to different widths.

Background-clip + background-clip + box-sizing (left and right) Then background-clip sets the content-box so that the background color is displayed only within the padding area, and box-sizing: border-box so that the padding blue line does not change width.

.el-tabs__active-bar.is-top {
	padding: 0 20px;
	box-sizing: border-box;
	background-clip: content-box;
}
Copy the code

Again, a picture.

2. Through background

Reset the background color and add the gradient

.el-tabs__active-bar.is-top {
	background: red linear-gradient(90deg, transparent 20px, blue 20px, blue calc(100% - 20px), transparent calc(100% - 20px));
}
Copy the code

Just change the red background to Transparent above to illustrate the difference

Background can also be background-size + background-repeat + background-position, you can try by yourself.

Three. Through pseudo-elements ::after, ::before

.el-tabs__active-bar.is-top {
	background-color: transparent;
}
.el-tabs__active-bar.is-top::before {
    content: ' ';
    display: block;
    background: red;
    height: 2px;
    width: 90px;
    margin: auto;
}
Copy the code

The renderings are as follows

conclusion

There are so many ways to do this. This is just an example of using elementUI’s Tabs. Other plugins can do the same.

Ok, so much for sharing above, if any questions or omissions, welcome to correct.