We are.Kangaroo Cloud Stack UED Team, is committed to building an excellent one-stop data middleware product. We always maintain the spirit of craftsmanship and explore the front-end path to accumulate and spread the value of experience for the community.
This article was written by Shunen
What's?
The Descriptions component in the Digital Stack product is actually the Descriptions component of antd, so what is the Descriptions component of antd?
The way we usually use it in counting stack products is the bordered + small pattern.
To wit:
<Descriptions bordered size="small">
< label="Task name">
{taskName}
</>
< label="Name of indicator table">
{tableName}
</>
</Descriptions>
Displayed below:
Plain and simple, even very ordinary. But, there is a hidden mystery.
Why？
We want to implement a design where there is only one Item in a row. We can do this with the help of the column API of the Descriptions component.
- <Descriptions bordered size="small">
+ <Descriptions bordered size="small" column={1}>
At this point, a pretty boy wondered, "How come it's so wide?"
Then, just set the width according to the size of the design.
contentStyle={{
width: 630,
}}
labelStyle={{
width: 140,
}}
May I?No can do!Since we have this module in a drawer of details and the width of the drawer is not fixed, then setting a fixed value here will cause a problem! There is something wrong with ......, isn't there?
The width of the label here doesn't follow what's set, it's adaptively stretched out.
stillThe UI designer confirms that this is not what we want, but that the size of the label should be the same, and the size of the content should be adaptive.
How do you realize that?
Set the width of contentStyle to'calc(100% - 140px)'
Looks like the need is taken care of? Actually, there are still problems!
Here, we need to simulate that the task name is very long and use theButton The case of the component.
Here, it occurs to us that it is possible to useEllipsisText Component to resolve overflow omissions.
Crap, it doesn't seem to be taking effect, theWhy is that?
The reasons are analyzed below:
Let's here the reasons why, first of all, our omission logic here is as follows
- By setting maxWidth to a percentage (you can't set a specific value, why?) by setting maxWidth to a percentage (you can't set a value, why not?), and then with the overflow
We can see from the DOM tree that, theoretically, we should be a percentage of the width of the td element, and also the width of the td element is set as a percentage, so theoretically it's a percentage of the tr element.
Here we see that the width of the tr element is not inherited from the parent element, as we had envisioned, but is instead stretched out by the child element. So, let's try adding thewidth：100% Make its width the width of the inherited parent element.
It's still not working, why is that?
We notice here that width is required to inherit the width of the parent element, which is also propped up. We'll skip some of the positioning here and fast-forward to positioning the table element.
The root element of this Descriptions component is the table element. table elements are more complex than regular div elements, and their associated CSS properties are more elusive.
Observe that the table component here has the following properties on it
The width of table is set to 100%, but instead of inheriting the width of the parent element, it's being stretched out by the child element.
Here we notice that table has an attribute table-layout, which is defined in MDN as:
table-layout CSS properties define the properties that are used to lay out thetabularThe algorithm for cells, rows and columns of the
If set to auto, the
By default, most browsers use an automatic table layout algorithm. The width of the table and its cells are automatically resized according to the content.
This is where the case is solved. If you set it to auto, the cell will adapt according to the content, which will cause the parent element (i.e., the cell) to be stretched out by the width of the child element, and even if you set a fixed value for the parent's width, it will still not work.
If the table layout is auto, the table will be automatically scaled according to its content, regardless of the specified width.
It can be confirmed, then, that if we want to implement copy omission with the Descriptions component, we will inevitably need to set the table-layout to the fixed property.
How
However, the default table-layout of the Descriptions component is auto, and there is no property to change this value.
So here we can only change it via global CSS? （Theme can do it.)
But here, I chose to rewrite the Descriptions component in the metrics to make it controllable for the user to use the Descriptions component.
As an aside, I should insert a note that if table-layout is set to auto, and the contents of the cell are not overflowing, that is, the way it was set in the first place, then the width of the cell is not actually the value we set. Then the width of the cell is not actually the value we set, but based on the width we set for different cells to calculate the proportion of the proportion to zoom in or out.
For example, I'm setting 140px and 280px for the cells.
At this point, if the table is exactly 420px wide, the label (i.e., the th element) is exactly 140px and the content (i.e., the td element) is exactly 280px.
If the table width is larger than 420px, it will be scaled up in 1:2 ratio.
The width of the table is:
Calculation gives: 806 * 1/3 ≈ 248.
ultimate
Welcome to [Kangaroo Cloud Digital Stack UED team]~
Kangaroo Cloud Digital Stack UED team continues to share the results of technology for the majority of developers, successively participated in the open source welcome star
- Big Data Distributed Task Scheduler - Taier
- Lightweight Web IDE UI framework - Molecule
- SQL Parser Project for Big Data - dt-sql-parser
- Kangaroo Cloud Digital Stack front-end team code review engineering practices document - code-review-practices
- A faster, more flexible configuration and easier to use module packager - ko
- A component testing library for antd - ant-design-testing