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

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

---
title: Arrange 的基本用法
title_en: Arrange basic usage
category: 2
---
展示了一个行内排列组件的基本用法

```jsx
import { Arrange } from 'parkball'
import {Button} from 'parkball'


const layout1 = {
  marginLeft: 0,
  marginRight: 0,
  middle: 20,
  marginBottom: 0,
  marginTop: 0,
  align: 'vertical',
}

const layout2 = {
  marginLeft: 100,
  marginRight: 0,
  middle: 10,
  marginBottom: 0,
  marginTop: 0,
}

ReactDOM.render(
  <React.Fragment>
    <div style={{ border: '1px solid #000', margin: '20px', padding: '20px'}}>
      <Arrange
        key='1'
        style={{width: '70px'}}
        {...layout1}>
        <Button key='search' type='primary'>搜索</Button>
        <Button key='cancel' type='info'>取消</Button>
      </Arrange>
    </div>
    <div style={{ border: '1px solid #000', margin: '20px', padding: '20px'}}>
      <Arrange key='2' {...layout2}>
        <Button key='export' type='info'>导出</Button>
        <Button key='search' type='primary'>搜索</Button>
        <Button key='cancel' type='info'>取消</Button>
      </Arrange>
    </div>
  </React.Fragment>,
  mountNode
)
```