Gov Card

@aligov/components-card

Gov Card based on Fusion Card

API

import Card, { PageCard, CardWrap, CardHr } from '@aligov/components-card';

其中 Card 的用法和 Fusion Card 的用法一致，把 content 的 overflow 设为了 visible，避免 card 内下拉等可能展示不全的问题。

PageCard 在 Card 的基础上添加了 $s-5 的 margin，0 的 padding，搭配 CardWrap 和 CardHr 来组成表单 + 表格搜索的场景。

CardWrap 内置来 $s-5 的 padding，CardHr 则是用于 CardWrap 之间的分隔线。

DEMO 列表

简单使用

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Form, Table, Input, Pagination } from '@alifd/next';
import Card, { PageCard, CardWrap, CardHr } from '@aligov/components-card';

const dataSource = [
  {id: "12345", content: "content"}
];

class App extends Component {
  render() {
    return (
      <div>
        <h2>沿用 Fusion Card 的用法</h2>
        <Card title="title">
          card content
        </Card>

        <h2>表单+表格的场景</h2>
        <PageCard>
          <CardWrap>
            <Form inline>
              <Form.Item label="标题1">
                <Input/>
              </Form.Item>
              <Form.Item label="标题2">
                <Input/>
              </Form.Item>
              <Form.Item>
                <Form.Submit type="primary">Query</Form.Submit>
              </Form.Item>
            </Form>
          </CardWrap>
          <CardHr/>
          <CardWrap>
            <Table dataSource={dataSource} hasBorder={false}>
              <Table.Column dataIndex="id" title="ID"/>
              <Table.Column dataIndex="content" title="Content"/>
            </Table>
            <Pagination total={100} style={{marginTop: 20}}/>
          </CardWrap>
        </PageCard>
      </div>
    );
  }
}

ReactDOM.render((
  <App/>
), mountNode);