# CardPane

卡片

## 案例演示

### 基本使用

包含标题、内容、操作区域

---demo
```js
import { CardPane } from 'amos-framework';

ReactDOM.render((
  <CardPane title="Card标题" extra={<a href="/#/more">更多</a>} style={{ width: 300 }}>
    卡片内容...
    <br />
    卡片内容...
    <br />
    卡片内容...
    <br />
  </CardPane>
), _react_runner_);
```
---demoend

### 无边框

在灰色背景上使用无边框的卡片。

---demo
```js
import { CardPane } from 'amos-framework';

ReactDOM.render((
  <div style={{ background: '#ECECEC', padding: '30px' }}>
    <CardPane title="Card标题" noBorder style={{ width: 300 }}>
      卡片内容...
      <br />
      卡片内容...
      <br />
      卡片内容...
      <br />
    </CardPane>
  </div>
), _react_runner_);
```
---demoend

### 简洁卡片

只包含内容区域。

---demo
```js
import { CardPane } from 'amos-framework';

ReactDOM.render((
  <CardPane style={{ width: 300 }}>
    卡片内容...
    <br />
    卡片内容...
    <br />
    卡片内容...
    <br />
  </CardPane>
), _react_runner_);
```
---demoend

### 自定义内容--自定义边框

可以调整默认边距，设定宽度。

---demo
```js
import { CardPane } from 'amos-framework';

ReactDOM.render((
  <CardPane style={{ width: 240 }} bodyStyle={{ padding: 0 }}>
    <div>
      <img alt="example" width="100%" src="https://tinypng.com/images/apng/panda-waving.png" />
    </div>
    <div style={{ padding: '10px 16px' }}>
      <h1 style={{ margin: 0 }}>Come on!</h1>
      <p style={{ margin: 0 }}>
        <a href="https://image.baidu.com/">百度图片</a>
      </p>
    </div>
  </CardPane>
), _react_runner_);
```
---demoend

### 自定义内容--套用栅格

使用栅格进行配合排版。

---demo
```js
import { CardPane, Row, Col } from 'amos-framework';

ReactDOM.render((
  <div style={{ background: '#ECECEC', padding: '20px 10px' }}>
    <Row gutter={16}>
      <Col span={8}>
        <CardPane title="卡片标题" noBorder>
          卡片内容1
        </CardPane>
      </Col>
      <Col span={8}>
        <CardPane title="卡片标题" noBorder>
          卡片内容2
        </CardPane>
      </Col>
      <Col span={8}>
        <CardPane title="卡片标题" noBorder>
          卡片内容3
        </CardPane>
      </Col>
    </Row>
  </div>
), _react_runner_);
```
---demoend

### 预加载的卡片

数据读入之前，显示预加载卡片

---demo
```js
import { CardPane, Button } from 'amos-framework';

class Demo extends Component {
  state = {
    loading: true
  };

  toggleLoading = () => {
    this.setState(prevState => ({
      loading: !prevState.loading
    }));
  }
  render() {
    return (
      <div>
        <Button onClick={this.toggleLoading} style={{ marginBottom: 16 }}>切换加载</Button>
        <CardPane loading={this.state.loading} title="Card标题">卡片内容...</CardPane>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### 折叠卡片

包含标题、内容、操作区域

---demo
```js
import { CardPane } from 'amos-framework';

const CollapseCard = CardPane.CollapseCard;

ReactDOM.render((
  <CollapseCard header="标题">
    卡片内容...
    <br />
    卡片内容...
    <br />
    卡片内容...
    <br />
  </CollapseCard>
), _react_runner_);
```
---demoend


## Props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | String | `amos-cardpane` | CardPane 默认样式前缀 |
| className | String | - | CardPane 自定义calssName |
| title | `String or ReactNode` | - | 卡片标题 |
| extra | `String or ReactNode` | - | 卡片右上角的操作区域 |
| footer | `String or ReactNode` | - | 卡片 footer |
| noBorder | Boolean | false | 是否禁用边框 |
| disableHover | Boolean | false | 是否禁用鼠标 hover 特效 |
| headStyle | Object | - | 设置 head 的样式 |
| headTitleStyle | Object | - | 设置 head title 的样式 |
| bodyStyle | Object | - | 设置 body 的样式 |
| closeAnimate | boolean | false | 禁用动画 |
| loading | boolean | false | 显示预加载 |
| actived | boolean | false | 聚焦模式，与 hover 效果相同，部分场景下需要使用 |

## LoadingBlock

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | String | `amos-cardpane` | 默认样式前缀 |
| padding | string or number | - | loading 包裹层 自定义padding |

> `LoadingBlock` 可以独立使用

```js
<LoadingBlock />
```

## CollapseCard

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | String | `amos-collapsecard` | 样式前缀 |
| className | String | - | 自定义样式名 |
| header | `String、Number、ReactNode` | - | 面板头内容 |
| addonExtra | String、Number、ReactNode | - | 面板头额外内容，紧跟 `header` 后面 |
| expandIcon | `String、ReactNode` | - | 开 icon。当 expandIcon 为 string 时，采用 `aficon` 方式，支持 ReactNode，如果不设置则默认为内置 `aficon right` |
| closeIcon | `String、ReactNode` | - | 关闭 icon。当 closeIcon 为 string 时，采用 `aficon` 方式，为用户自定义的icon，否则采用内置 `aficon right` |
| onHeadClick | `Function: (open, evt) => {}` | - | 点击 header 时的回调，如果自己传入了 `open` 属性，则需要通过该回调同步 `open` 状态  |
| showArrow | Boolean | true | 是否显示 `展开关闭`图标 |
| arrowAlign | string | `left` | 展开关闭图标显示的位置，默认在左侧，可选值`left、right` |
| open | Boolean | - | 是否为展开状态 |
| alwaysOpen | Boolean | false | 永久展开状态。此时组件内部无法通过点击 header 来进行展开合并，可以通过外部控制 `open` 来实现展开合并 |
| children | ReactNode | - | 面板内容 |