# @uiw/react-descriptions

> Descriptions component

Latest version **4.22.3** (published 2023-11-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @uiw/react-descriptions
pnpm add @uiw/react-descriptions
yarn add @uiw/react-descriptions
bun add @uiw/react-descriptions
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.22.3 |
| Published | 2023-11-29 |
| First published | 2020-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 42.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 740 |
| Author | Kenny Wong |
| Maintainers | uiwjs, wcjiang |
| Keywords | descriptions, react-descriptions, design, uiw, uiw-react, react.js, react, react-component, component, components, ui, css, uikit, react-ui, framework, front-end, frontend |

## Links

- npm: https://www.npmjs.com/package/@uiw/react-descriptions
- Repository: https://github.com/uiwjs/uiw
- Homepage: https://uiwjs.github.io/#/components/descriptions
- Issues: https://github.com/uiwjs/uiw/issues
- Funding: https://jaywcjlove.github.io/#/sponsor
- npm.io page: https://npm.io/package/@uiw/react-descriptions

## Dependencies (1)

- [@uiw/utils](https://npm.io/package/@uiw/utils.md) ^4.22.3

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 4.22.3 (latest) — 2023-11-29
- 5.0.0-bate.2.1 (bate) — 2023-03-10
- 4.22.2 — 2023-11-09
- 4.22.1 — 2023-11-08
- 4.22.0 — 2023-09-19
- 4.21.28 — 2023-05-05
- 4.21.27 — 2023-04-21
- 4.21.26 — 2023-04-20
- 4.21.25 — 2023-03-14
- 4.21.24 — 2023-03-08
- 5.0.0-bate.2.0 — 2023-03-02
- 4.21.23 — 2022-12-21
- 4.21.22 — 2022-12-19
- 4.21.21 — 2022-12-19
- 5.0.0-bate-19 — 2022-12-12
- … 156 more at https://npm.io/package/@uiw/react-descriptions/versions

## README

Descriptions 描述列表
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-descriptions/file/README.md)
[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-descriptions.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-descriptions)
[![npm version](https://img.shields.io/npm/v/@uiw/react-descriptions.svg?label=@uiw/react-descriptions)](https://npmjs.com/@uiw/react-descriptions)

成组展示多个只读字段。

```jsx
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 (
      <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;
```

## 垂直

垂直的列表。

```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

| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| title | 标题 | ReactNode | - |
| bordered | 是否展示边框 | boolean | `false` |
| colon | 类容表述 `label` 添加 `:` 冒号 | boolean | `true` |
| size | 设置列表的大小。设置 `bordered={ture}` 生效。 | `large`, `small`, `default` | `default` |
| layout | 描述布局 | `horizontal`, `vertical` | `horizontal` |
| column | 一行的 `DescriptionItems` 数量 | Number | 3 |

### Descriptions.Item

| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ---- |
| label | 内容的描述 | ReactNode | - |
| span | 包含列的数量 | Number | 1 |

---
_Source: https://npm.io/package/@uiw/react-descriptions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._