FAQ for column and span for descriptions components

[zhangpaopao0609]

Here I will first pose the questions and case, and then give a full response for above.

Q1. Is there any relationship between column and span?

CASE: In our document, column refers to the "count of DescriptionItem in one row". Therefore, can I assume that if I set the column to 3, it will consistently render 3 DescriptionItems in one row under any circumstances?

However, based on my testing:

This is true when the items do not set a span property.

<template>
  <t-descriptions title="Shipping address" :column="3" bordered>
    <t-descriptions-item label="Name" >
      TDesign Shenzhen Penguin Island D1 4A Mail Center Shenzhen Penguin Island D1 4A Mail Center Shenzhen Penguin
      Island D1 4A Mail Center Shenzhen Penguin Island D1 4A Mail Center
    </t-descriptions-item>
    <t-descriptions-item label="Telephone Number"> 139****0609 </t-descriptions-item>
    <t-descriptions-item label="Area"> China Tencent Headquarters </t-descriptions-item>
  </t-descriptions>
</template>

However, when I set the span of the first item to 10, something goes wrong.

It only renders the first item in the first row.

So, there must be some relationship between column and span, but our document doesn't mention anything about it.

Q2. Does the layout affect the column or span?

Q3. Does item-layout also affect the column or span?

Q4. How can I evenly distribute multiple items in a row?

CASE:

  <t-descriptions title="Shipping address" :column="3" bordered>
    <t-descriptions-item label="Name">
      TDesign Shenzhen Penguin Island D1 4A Mail Center Shenzhen Penguin Island D1 4A Mail Center Shenzhen Penguin
      Island D1 4A Mail Center Shenzhen Penguin Island D1 4A Mail Center
    </t-descriptions-item>
    <t-descriptions-item label="Telephone Number"> 139****0609 </t-descriptions-item>
    <t-descriptions-item label="Area"> China Tencent Headquarters </t-descriptions-item>
  </t-descriptions>

ANSWER:

• column: This determines how many items will be rendered in each row, but it is affected by layout and item-layout.

  • If layout is set to vertical: Each row will render one item, and the column and span properties will be invalid.
  • If itemLayout is set to vertical: if column is set to 3, each row will render 3 items, and in HTML, 3 td elements will be rendered
  • Otherwise, if the column is set to 3, each row will still render 3 items. However, in HTML, 6 td elements will be rendered. This is because when item-layout is set to horizontal, each item consists of 2 td elements (one for the label and one for the content).

• span: In fact, it is an alias of colspan, so it determines how many td elements this item will occupy in this tr. However, it is also affected by layout and item-layout.

  • If layout is set to vertical: It behaves the same as column.
  • If item-layout is set to vertical: span directly corresponds to colspan. If you set span to 3, then this item will occupy 3 td elements in HTML. (both label and content will be 3)
  • Otherwise, if you set span to 3, then this item will occupy 6 td elements in HTML. (The label will be 1 and the content will be 5)

• The component will automatically calculate the total span amount for each row. If the span number exceeds the td number, it will automatically layout to the next row. For example, if both layout and item-layout are set to their default values, and you set column to 3, and set the first item span to 2, you will find that there are only two items in the first row. This is because the descriptions component will automatically calculate the span amount and adjust the layout accordingly.

• Unfortunately, we haven't added this feature yet, but we are currently working on it. It will be available soon.
  [Descriptions] support evenly distribute multiple items in a row #4253

TODO

[ ] descriptions components document need more descriptions for column and span.

[github-actions]

👋 @zhangpaopao0609，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。