@anchor-it/card

通用的card组件，兼容原有的Api

Install

Use npm:

npm install --save @anchor-it/card

Use yarn:

yarn add @anchor-it/card -S

Usage

import React, { Component } from 'react';
import { Button } from 'antd';
import { Card, RetractableCard } from '@/components/Card';

class Page extends Component{
  state = {}
  
  handleButtonOnClick=()=>{
    console.log('handleButtonOnClick')
  }
  
  renderRightBtn=()=>{
    return <Button type={'primary'} onClick={this.handleButtonOnClick}>右侧按钮</Button>
  }
  
  render(){
    <Card title={'Main Card'} rightButtons={this.renderRightBtn}>
     <RetractableCard title="Retractable Card">12345</RetractableCard>
    </Card>

  }
}

Api

Card

普通卡片

| 属性 | 说明 | 类型 | 默认值 | | -------------- | --------------------- | -------- | ------ | | title | 卡片标题 | string | - | | className | 卡片className | string | - | | rightButton | 卡片title右侧的按钮组 | function | - | | style | 卡片本身的style | object | - | | containerStyle | 卡片内容区域的style | object | - |

RetractableCard

可展开的卡片

| 属性 | 说明 | 类型 | 默认值 | | ----------- | --------------------- | -------- | ------ | | title | 卡片标题 | string | - | | className | 卡片className | string | - | | rightButton | 卡片title右侧的按钮组 | function | - | | style | 卡片本身的style | object | - |