Descriptions
Display multiple fields in list form.
Basic usage Username kooriookami Telephone 18100000000 Place Suzhou Remarks School Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
export function DescriptionsBasic() { return ( <ElDescriptions title="User Info"> <ElDescriptionsItem label="Username">kooriookami</ElDescriptionsItem> <ElDescriptionsItem label="Telephone">18100000000</ElDescriptionsItem> <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem> <ElDescriptionsItem label="Remarks"> <ElTag size="small">School</ElTag> </ElDescriptionsItem> <ElDescriptionsItem label="Address"> No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </ElDescriptionsItem> </ElDescriptions> ); } Sizes
export function DescriptionsSizes() { const [size, setSize] = useState<DemoSize>("default"); return ( <> <ElRadioGroup value={size} onChange={(value) => setSize(value as DemoSize)} style={{ marginRight: 12 }} > <ElRadio value="large" label="Large" /> <ElRadio value="default" label="Default" /> <ElRadio value="small" label="Small" /> </ElRadioGroup> <ElDescriptions title="With border" column={3} size={size} border style={{ marginTop: 20 }} extra={<ElButton type="primary">Operation</ElButton>} > <ElDescriptionsItem label={iconLabel(<User />, "Username", size)}> kooriookami </ElDescriptionsItem> <ElDescriptionsItem label={iconLabel(<Iphone />, "Telephone", size)}> 18100000000 </ElDescriptionsItem> <ElDescriptionsItem label={iconLabel(<Location />, "Place", size)}> Suzhou </ElDescriptionsItem> <ElDescriptionsItem label={iconLabel(<Tickets />, "Remarks", size)}> <ElTag size="small">School</ElTag> </ElDescriptionsItem> <ElDescriptionsItem label={iconLabel(<OfficeBuilding />, "Address", size)} > No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </ElDescriptionsItem> </ElDescriptions> <ElDescriptions title="Without border" column={3} size={size} style={{ marginTop: BLOCK_MARGIN[size] }} extra={<ElButton type="primary">Operation</ElButton>} > <ElDescriptionsItem label="Username">kooriookami</ElDescriptionsItem> <ElDescriptionsItem label="Telephone">18100000000</ElDescriptionsItem> <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem> <ElDescriptionsItem label="Remarks"> <ElTag size="small">School</ElTag> </ElDescriptionsItem> <ElDescriptionsItem label="Address"> No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </ElDescriptionsItem> </ElDescriptions> </> ); } Vertical List
export function DescriptionsVertical() { const [size, setSize] = useState<DemoSize>("default"); const items = [ <ElDescriptionsItem key="username" label="Username"> kooriookami </ElDescriptionsItem>, <ElDescriptionsItem key="telephone" label="Telephone"> 18100000000 </ElDescriptionsItem>, <ElDescriptionsItem key="place" label="Place" span={2}> Suzhou </ElDescriptionsItem>, <ElDescriptionsItem key="remarks" label="Remarks"> <ElTag size="small">School</ElTag> </ElDescriptionsItem>, <ElDescriptionsItem key="address" label="Address"> No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </ElDescriptionsItem>, ]; return ( <> <ElRadioGroup value={size} onChange={(value) => setSize(value as DemoSize)} style={{ marginRight: 12 }} > <ElRadio value="large" label="Large" /> <ElRadio value="default" label="Default" /> <ElRadio value="small" label="Small" /> </ElRadioGroup> <ElDescriptions title="Vertical list with border" direction="vertical" column={4} size={size} border style={{ marginTop: 20 }} > {items} </ElDescriptions> <ElDescriptions title="Vertical list without border" direction="vertical" column={4} size={size} style={{ marginTop: BLOCK_MARGIN[size] }} > {items} </ElDescriptions> </> ); } Rowspan 2.8.1 Photo Username kooriookami Telephone 18100000000 Place Suzhou Remarks School Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
Photo Username Telephone kooriookami 18100000000 Place Remarks Suzhou School Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
export function DescriptionsRowspan() { return ( <> <ElDescriptions title="Width horizontal list" border> <ElDescriptionsItem rowspan={2} width={140} label="Photo" align="center" > <ElImage src={AVATAR} style={{ width: 100, height: 100 }} fit="fill" /> </ElDescriptionsItem> <ElDescriptionsItem label="Username">kooriookami</ElDescriptionsItem> <ElDescriptionsItem label="Telephone">18100000000</ElDescriptionsItem> <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem> <ElDescriptionsItem label="Remarks"> <ElTag size="small">School</ElTag> </ElDescriptionsItem> <ElDescriptionsItem label="Address"> No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </ElDescriptionsItem> </ElDescriptions> <ElDescriptions title="Width vertical list" direction="vertical" border style={{ marginTop: 20 }} > <ElDescriptionsItem rowspan={2} width={140} label="Photo" align="center" > <ElImage src={AVATAR} style={{ width: 100, height: 100 }} fit="fill" /> </ElDescriptionsItem> <ElDescriptionsItem label="Username">kooriookami</ElDescriptionsItem> <ElDescriptionsItem label="Telephone">18100000000</ElDescriptionsItem> <ElDescriptionsItem label="Place">Suzhou</ElDescriptionsItem> <ElDescriptionsItem label="Remarks"> <ElTag size="small">School</ElTag> </ElDescriptionsItem> <ElDescriptionsItem label="Address"> No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </ElDescriptionsItem> </ElDescriptions> </> ); } Customized Style Username kooriookami Telephone 18100000000 Place Suzhou Remarks School Address No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
export function DescriptionsCustomStyle() { return ( <ElDescriptions title="Customized style list" column={3} border> <ElDescriptionsItem label="Username" labelAlign="right" align="center" labelClassName={styles.myLabel} className={styles.myContent} width="150px" > kooriookami </ElDescriptionsItem> <ElDescriptionsItem label="Telephone" labelAlign="right" align="center"> 18100000000 </ElDescriptionsItem> <ElDescriptionsItem label="Place" labelAlign="right" align="center"> Suzhou </ElDescriptionsItem> <ElDescriptionsItem label="Remarks" labelAlign="right" align="center"> <ElTag size="small">School</ElTag> </ElDescriptionsItem> <ElDescriptionsItem label="Address" labelAlign="right" align="center"> No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province </ElDescriptionsItem> </ElDescriptions> ); } Descriptions API
Descriptions Attributes
Name Description Type Default border with or without border booleanfalse column numbers of Descriptions Item in one line number3 direction direction of list enumhorizontal size size of list enum— title title text, display on the top left string'' extra extra text, display on the top right string'' label-width 2.8.8 label width of every column stringnumber—
Descriptions Slots
Name Description Subtags default customize default content Descriptions Item title custom title, display on the top left — extra custom extra area, display on the top right —
DescriptionsItem API
DescriptionsItem Attributes
Name Description Type Default label label text string'' span colspan of column number1 rowspan 2.8.1 the number of rows a cell should span number1 width column width, the width of the same column in different rows is set by the max value (If no border, width contains label and content) stringnumber'' min-width column minimum width, columns with width has a fixed width, while columns with min-width has a width that is distributed in proportion (If noborder, width contains label and content) stringnumber'' label-width 2.8.8 column label width, if not set, it will be the same as the width of the column. Higher priority than the label-width of Descriptions stringnumber— align column content alignment (If no border, effective for both label and content) enumleft label-align column label alignment, if omitted, the value of the above align attribute will be applied (If no border, please use align attribute) enum— class-name column content custom class name string'' label-class-name column label custom class name string''
DescriptionsItem Slots
Name Description default customize default content label custom label
