cjd-parkball/src/components/panel/demo/basic.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

---
title: Panel 的基本用法
title_en: Panel basic usage
category: 2
---
展示了一个文本板组件的基本用法

```jsx
import { Panel } from 'parkball'
import {Col} from 'parkball'
const { Item } = Panel

const CustomItem =({label, value, span}) => {
  return (
    <Col key={label} span={span}>
      <span key={value}>{value}:</span>
      <span key={label}>{label}</span>
    </Col>
  )
}
const fields=[
  {
    labelKey: 'user.desc',
    labelExtra:'这是 panel label 的描述，非常高级',
    valueKey: 'userDesc',
  },
  {
    label: '年龄',
    labelExtra:'这是 panel label 的描述，非常高级',
    valueKey: 'age',
  },
  {
    desc: '描述',
    labelKey: 'desc',
    value: '这是 panel value 的描述',
    valueExtra: '这是 panel value 的描述这是 panel value 的描述这是 panel value 的描述这是 panel value 的描述',
  },
  {
    labelKey: 'avatar',
    labelExtra: '1',
    value: <img alt="example"
      style={{ width: '80px' }}
      src={'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'} />,
  },
  {
    label: 'valueItem case',
    labelExtra:'这是 panel label 的描述，非常高级',
    value: 'value',
    valueItem: (props) => props.value + '123122',
  },
  {
    item: <CustomItem label={"反着来"} value={"反着来的值"} />
  },
  {
    item: function(props) {
      return <div key={props.key}>I am a custom function</div>
    }
  }
]

data = {
  avatar: '头像',
  age: 0,
  userDesc: '123123',
  user: {
    desc: '用户名称',
  }
}

ReactDOM.render(
  <Panel fields={fields} data={data} />,
  mountNode
)
```