Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@uiw/react-descriptions
Advanced tools
Readme
成组展示多个只读字段。
import { Descriptions } from 'uiw';
// or
import Descriptions from '@uiw/react-descriptions';
简单的展示。
import React from 'react';
import { Descriptions } from 'uiw';
export default function Demo() {
return(
<Descriptions title="用户信息">
<Descriptions.Item label="姓名">调调</Descriptions.Item>
<Descriptions.Item label="手机号码">1360000000</Descriptions.Item>
<Descriptions.Item label="居住地">上海市,青浦区</Descriptions.Item>
<Descriptions.Item label="备注">-</Descriptions.Item>
<Descriptions.Item label="地址">
中国湖北省黄冈市罗田县666号
</Descriptions.Item>
</Descriptions>
);
}
带边框和背景颜色列表。
import React from 'react';
import { Descriptions, Badge } from 'uiw';
export default function Demo() {
return(
<Descriptions title="详细信息" bordered>
<Descriptions.Item label="项目">UI组件库</Descriptions.Item>
<Descriptions.Item label="是否收费">免费</Descriptions.Item>
<Descriptions.Item label="是否持续维护">是</Descriptions.Item>
<Descriptions.Item label="创建时间">2018-04-24 18:00:00</Descriptions.Item>
<Descriptions.Item label="更新时间" span={2}>
2019-04-24 18:00:00
</Descriptions.Item>
<Descriptions.Item label="状态" span={3}>
<Badge color="#008EF0" processing> 正在运行中</Badge>
</Descriptions.Item>
<Descriptions.Item label="定制组件">¥280.00</Descriptions.Item>
<Descriptions.Item label="远程协助">¥20.00</Descriptions.Item>
<Descriptions.Item label="修复bug">¥60.00</Descriptions.Item>
<Descriptions.Item label="详细说明">
五十多个组件库
<br />
当前版本 3.4.1
<br />
当前 react 版本 >= 16.7.0
</Descriptions.Item>
</Descriptions>
);
}
自定义尺寸,适应在各种容器中展示。
import React from 'react';
import { Descriptions, Divider, Badge, Radio, RadioGroup } from 'uiw';
class Demo extends React.Component {
constructor() {
super();
this.state = {
value: 'default',
}
}
onChange(e) {
this.setState({
value: e.target.value,
});
}
render() {
return (
<div>
<RadioGroup value={this.state.value} onChange={this.onChange.bind(this)}>
<Radio value="default">默认(default)</Radio>
<Radio value="large">大尺寸(large)</Radio>
<Radio value="small">小尺寸(small)</Radio>
</RadioGroup>
<Divider />
<Descriptions bordered title="详细信息" size={this.state.value}>
<Descriptions.Item label="项目">UI组件库</Descriptions.Item>
<Descriptions.Item label="是否收费">免费</Descriptions.Item>
<Descriptions.Item label="是否持续维护">是</Descriptions.Item>
<Descriptions.Item label="创建时间">2018-04-24 18:00:00</Descriptions.Item>
<Descriptions.Item label="更新时间" span={2}>
2019-04-24 18:00:00
</Descriptions.Item>
<Descriptions.Item label="状态" span={3}>
<Badge color="#008EF0" processing> 正在运行中</Badge>
</Descriptions.Item>
<Descriptions.Item label="定制组件">¥280.00</Descriptions.Item>
<Descriptions.Item label="远程协助">¥20.00</Descriptions.Item>
<Descriptions.Item label="修复bug">¥60.00</Descriptions.Item>
<Descriptions.Item label="详细说明">
五十多个组件库
<br />
当前版本 3.4.1
<br />
当前 react 版本 >= 16.7.0
</Descriptions.Item>
</Descriptions>
<Divider />
<Descriptions title="自定义尺寸" size={this.state.value}>
<Descriptions.Item label="姓名">调调</Descriptions.Item>
<Descriptions.Item label="手机号码">1360000000</Descriptions.Item>
<Descriptions.Item label="居住地">上海市,青浦区</Descriptions.Item>
<Descriptions.Item label="备注">-</Descriptions.Item>
<Descriptions.Item label="地址">
中国湖北省黄冈市罗田县666号
</Descriptions.Item>
</Descriptions>
</div>
)
}
}
export default Demo;
垂直的列表。
import React from 'react';
import { Descriptions, Divider } from 'uiw';
export default function Demo() {
return(
<>
<Descriptions title="垂直的列表" layout="vertical">
<Descriptions.Item label="姓名">调调</Descriptions.Item>
<Descriptions.Item label="手机号码">1360000000</Descriptions.Item>
<Descriptions.Item label="居住地">上海市,青浦区</Descriptions.Item>
<Descriptions.Item label="备注">垂直列表设置 layout 值为 vertical。</Descriptions.Item>
<Descriptions.Item label="地址">
中国湖北省黄冈市罗田县666号
</Descriptions.Item>
</Descriptions>
<Divider />
<Descriptions title="垂直的列表" layout="vertical" bordered>
<Descriptions.Item label="姓名">调调</Descriptions.Item>
<Descriptions.Item label="手机号码">1360000000</Descriptions.Item>
<Descriptions.Item label="居住地">上海市,青浦区</Descriptions.Item>
<Descriptions.Item label="备注">垂直列表设置 layout 值为 vertical。</Descriptions.Item>
<Descriptions.Item label="地址">
中国湖北省黄冈市罗田县666号
</Descriptions.Item>
</Descriptions>
</>
);
}
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 标题 | ReactNode | - |
bordered | 是否展示边框 | boolean | false |
colon | 类容表述 label 添加 : 冒号 | boolean | true |
size | 设置列表的大小。设置 bordered={ture} 生效。 | large , small , default | default |
layout | 描述布局 | horizontal , vertical | horizontal |
column | 一行的 DescriptionItems 数量 | Number | 3 |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
label | 内容的描述 | ReactNode | - |
span | 包含列的数量 | Number | 1 |
FAQs
Descriptions component
The npm package @uiw/react-descriptions receives a total of 210 weekly downloads. As such, @uiw/react-descriptions popularity was classified as not popular.
We found that @uiw/react-descriptions demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.