@aligov/components-card
Gov Card based on Fusion Card
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
之间的分隔线。
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);