import React from 'react'; import { Descriptions, Tag } from '@douyinfe/semi-ui'; () => { const data = [ { key: '实际用户数量', value: '1,480,000' }, { key: '7天留存', value: '98%' }, { key: '安全等级', value: '3级' }, { key: '垂类标签', value: <Tag style={{ margin: 0 }}>电商</Tag> }, { key: '认证状态', value: '未认证' }, ]; return <Descriptions data={data} />; };

import React from 'react'; import { Descriptions, Tag } from '@douyinfe/semi-ui'; () => { const data = [ { key: '实际用户数量', value: '1,480,000' }, { key: '7天留存', value: '98%' }, { key: '安全等级', value: '3级' }, { key: '垂类标签', value: <Tag style={{ margin: 0 }}>电商</Tag> }, { key: '认证状态', value: '未认证' }, ]; const style = { boxShadow: 'var(--semi-shadow-elevated)', backgroundColor: 'var(--semi-color-bg-2)', borderRadius: '4px', padding: '10px', margin: '10px', width: '200px', }; return ( <> <div style={{ display: 'flex', flexWrap: 'wrap' }}> <Descriptions align="center" data={data} style={style} /> <Descriptions align="justify" data={data} style={style} /> <Descriptions align="left" data={data} style={style} /> <Descriptions align="plain" data={data} style={style} /> </div> </> ); };

import React from 'react'; import { Descriptions } from '@douyinfe/semi-ui'; import { IconArrowUp } from '@douyinfe/semi-icons'; () => { const data = [ { key: '实际用户数量', value: '1,480,000' }, { key: '7天留存', value: ( <span> 98% <IconArrowUp size="small" style={{ color: 'red', marginLeft: '4px' }} /> </span> ), }, { key: '安全等级', value: '3级' }, ]; const style = { boxShadow: 'var(--semi-shadow-elevated)', backgroundColor: 'var(--semi-color-bg-2)', borderRadius: '4px', padding: '10px', marginRight: '20px', width: '600px', }; return ( <div> <Descriptions data={data} row size="small" style={style} /> <br /> <Descriptions data={data} row style={style} /> <br /> <Descriptions data={data} row size="large" style={style} /> </div> ); };

import React from 'react'; import { Descriptions } from '@douyinfe/semi-ui'; () => { return ( <Descriptions> <Descriptions.Item itemKey="实际用户数量">1,480,000</Descriptions.Item> <Descriptions.Item itemKey="7天留存">98%</Descriptions.Item> <Descriptions.Item itemKey="安全等级">3级</Descriptions.Item> <Descriptions.Item itemKey="垂类标签">电商</Descriptions.Item> <Descriptions.Item itemKey="认证状态">未认证</Descriptions.Item> </Descriptions> ); };