Descriptions 描述列表

成组展示多个只读字段。

import { Descriptions } from 'uiw';
// or
import Descriptions from '@uiw/react-descriptions';

基础用法

简单的展示。

`jsx mdx:preview&bg=#fff 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> ); }

## 带边框的

带边框和背景颜色列表。

```jsx mdx:preview&bg=#fff
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>
  );
}

自定义尺寸

自定义尺寸，适应在各种容器中展示。

`jsx mdx:preview&bg=#fff 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 (

## 垂直

垂直的列表。

```jsx mdx:preview&bg=#fff
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>
    </>
  );
}

Props

Descriptions

Descriptions.Item