uxcore-card

React card

Development

git clone https://github.com/uxcore/uxcore-card
cd uxcore-card
npm install
npm run server

if you'd like to save your install time，you can use uxcore-tools globally.

npm install uxcore-tools -g
git clone https://github.com/uxcore/uxcore-card
cd uxcore-card
npm install
npm run dep
npm run start

Test Case

npm run test

Coverage

npm run coverage

Demo

http://uxcore.github.io/components/card

Contribute

Yes please! See the CONTRIBUTING for details.

Props

| Name | Type | Required | Default | Comments | |---|---|---|---|---| | prefixCls | String | No | - | 类名前缀 | | className | String | No | - | 额外类名 | | icon | React Element | No | - | 头部图标 | | title | React Element | No | - | 头部标题 | | tip | React Element | No | - | 头部提示 | | overlayStyleOfTip | Object | No | { maxWidth: 400, textAlign: 'left' } | 头部提示样式 | | placementOfTip | String | No | 'top' | 头部提示的位置，one of ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'] | | extra | React Element | No | - | 头部右侧额外区域，通用用于放置动作 | | children | React Element | No | - | 卡片内容 | | showCollapseIcon | Bool | No | false | 显示折叠按钮 | | onCollapseChange | func(collapse) | No | noop | 折叠状态发生改变时的回调，参数为是否被折叠 | | contentHeight | number | No | | 内容区高度，用于固定卡片高度的场景，默认为内容区实际渲染高度 | | contentPaddingSize | string | No | 'middle' | 内容区间距，枚举值：middle/none | | defaultCollapsed | bool | No | false | 默认是否折叠 |