The author will explain the css implementation method of this component according to the use example of the Divider component on the official website. First, we click on the ant design divider use example. We can see that Divider has four usage examples. Let’s start from the perspective of css one by one. explain.
horizontal dividing line
solid line
<div class="ant-divider ant-divider-horizontal" role="separator"></div>
.ant-divider {
box-sizing: border-box;
margin: 0;
padding: 0;
color: #000000d9;
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5715;
list-style: none;
font-feature-settings: "tnum";
border-top: 1px solid rgba(0,0,0,.06);
}
.ant-divider-horizontal {
display: flex;
clear: both;
width: 100%;
min-width: 100%;
margin: 24px 0;
}
According to the above code, we can extract the core code and know that the solid line is realized by a div whose height is 0, border-top and upper and lower margins are set, and left and right margins are 0.
dotted line
<div class="ant-divider ant-divider-horizontal ant-divider-dashed" role="separator">
</div>
According to the html, we know that the dotted horizontal dividing line just has the ant-divider-dashed style more than the solid line. We can see that the core code of the style is to set the border-style as the dashed attribute to realize the display of the dotted line.
.ant-divider-dashed {
background: 0 0;
border-color: #0000000f;
border-style: dashed;
border-width: 1px 0 0;
}
split line with text
center text
The difficulty of text centering is how to add dividing lines on the left and right sides of the text, and the dividing lines always evenly occupy the remaining space of the parent element except the text.
<div class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center" role="separator">
<span class="ant-divider-inner-text">Text</span>
</div>
.ant-divider-inner-text {
display: inline-block;
padding: 0 1em;
}
.ant-divider-horizontal.ant-divider-with-text:before,
.ant-divider-horizontal.ant-divider-with-text:after {
position: relative;
top: 50%;
width: 50%;
border-top: 1px solid transparent;
border-top-color: inherit;
border-bottom: 0;
transform: translateY(50%);
content: "";
}
Key points for layout implementation:
(1) Source of dividing line:
Through the css code, we know that the dividing line on the left and right sides of the text is to use a pseudo-class to insert an inline element containing the content specified by the content attribute before and after the element corresponding to the text, set the border-top of the pseudo-class element, and pass The transform attribute realizes the vertical centering of the dividing line.
(2) Setting of dividing line width
Because the width of the text content is uncertain, we hope that the dividing line on both sides always occupies half of the width of the parent element minus the text content, so the flex layout is used here, and we can set the width of the dividing line to 50 of the parent element %, because the default flex-shrink is 1, flex-grow is 0, and flex-basis is auto in the flex layout, then there will be a case where the dividing line on both sides and the text are on the same line as shown in the figure below, but the text content is squeezed into multiple lines.
(3) How to prevent the text from being squeezed into multiple lines?
In the source code, it is realized by setting the white-space of span to nowrap without line break.
The author believes that setting the flex-shrink of the text span to 0 here can also achieve the effect that the text will not be squeezed and displayed completely.
text left
.ant-divider-horizontal.ant-divider-with-text-left:before {
top: 50%;
width: 5%;
}
.ant-divider-horizontal.ant-divider-with-text-left:after {
top: 50%;
width: 95%;
}
In this case, on the basis of the centered text, the width ratio of the left and right dividing lines is modified. The width of the left dividing line is set to 5%, and the width of the right dividing line is set to 95%.
text to the right
In this case, similar to the case where the text is on the left, the width ratio of the left and right dividing lines is modified based on the case where the text is centered. The width of the left dividing line is set to 95%, and the width of the right dividing line is set to 5%.
Split text using body style
ant-divider-plain.ant-divider-with-text {
color: #000000d9;
font-weight: 400;
font-size: 14px;
}
As above, using the body text style only sets the thickness and color of the text, making it possible to have a lighter split text style.
vertical dividing line
<div class="ant-divider ant-divider-vertical" role="separator"></div>
.ant-divider-vertical {
position: relative;
top: -0.06em;
display: inline-block;
height: 0.9em;
margin: 0 8px;
vertical-align: middle;
border-top: 0;
border-left: 1px solid rgba(0,0,0,.06);
}
.ant-divider {
box-sizing: border-box;
margin: 0;
padding: 0;
color: #000000d9;
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5715;
list-style: none;
font-feature-settings: "tnum";
border-top: 1px solid rgba(0,0,0,.06);
}
According to the source code, the implementation of the small vertical line is done by using the border-left of an inline block element with a certain height and a width of 0.
But how do we realize the vertical centering of the small vertical line, the small vertical line is an inline block element, and the parent element is a block-level element.
The vertical-align attribute is used in the source code. First, let's analyze this CSS style attribute in detail.
Use of vertical-align
(1) Usage 1: In a table cell, this property will set the alignment of the cell content in the cell box
This is easy to understand. If you add a vertical-align:middle style to the td of a table, the content in the table will be vertically centered. Similarly, if you give a vertical-align:bottom, it will be aligned at the bottom. If you give a vertical-align :top will align to the top.
(2) Use method 2: This property defines the vertical alignment of the baseline of the element in the row relative to the baseline of the row where the element is located vertical-align:middle
is the vertical midpoint of the element box and the baseline of the parent box plus the x- of the parent box Half of height is aligned.
As shown in the figure below, when the vertical-align attribute is not set, these inline elements are aligned with the baseline.
When only vertical-align:middle is set for img, the vertical midpoint of the image is aligned with the baseline of the parent box plus half of the x-height of the parent box.
When only vertical-align:middle is set for text1 and img, the vertical midpoint of text1 and the picture is aligned with the baseline of the parent box plus half of the x-height of the parent box.
So in the Divider source code, set vertical-align to middle for the dividing line, the purpose is to align the vertical midpoint of the element box of the dividing line with the baseline of the parent box plus half of the x-height of the parent box.