@uiw/react-card

import { Card } from 'uiw';
// or
import Card from '@uiw/react-card';

基础用法

<div>
  <Card title="Card标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
    卡片内容<br/>
    卡片内容<br/>
    卡片内容<br/>
  </Card>
</div>

## 无边框

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

```jsx mdx:preview
import React from 'react';
import { Card } from 'uiw';

export default function Demo() {
  return(
    <Card title="Card标题" bordered={false} style={{ width: 300 }}>
      卡片内容<br/>
      卡片内容<br/>
      卡片内容<br/>
    </Card>
  )
}

简洁卡片

<Card style={{ width: 300 }}>
  卡片内容<br/>
  卡片内容<br/>
  卡片内容<br/>
</Card>

## 更灵活的内容展示

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

```jsx mdx:preview
import React from 'react';
import { Card } from 'uiw';

let titleStyle = { padding: `10px 16px` };

export default function Demo() {
  return(
    <Card style={{ width: 240 }} bodyStyle={{ padding: 10 }}>
      <div>
        <img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />
      </div>
      <div style={titleStyle}>
        <h3 style={{margin:0}}>我爱漂亮妹妹</h3>
        <p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>
      </div>
    </Card>
  )
}

添加页脚

<Icon type='user' /> 
16 Friends

<Card
  title="Card标题"
  footer={footer}
  style={{ width: 240 }} 
  bodyStyle={{ padding: 0 }}
>
  <div>
    <img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />
  </div>
  <div style={{ padding: `10px 16px` }}>
    <h3 style={{margin:0}}>我爱漂亮妹妹</h3>
    <p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>
  </div>
</Card>

## 激活

设置属性 `active=true` 将激活卡片，默认展示鼠标经过的样式。

```jsx mdx:preview
import React from 'react';
import { Card, Icon } from 'uiw';

const footer = (
  <a href="https://uiwjs.github.io">
    <Icon type='user' /> 
    16 Friends
  </a>
)

export default function Demo() {
  return(
    <Card
      active
      title="Card标题"
      footer={footer}
      style={{ width: 240 }} 
      bodyStyle={{ padding: 0 }}
    >
      <div>
        <img alt="example" width="100%" src="https://avatars1.githubusercontent.com/u/1680273?v=4" />
      </div>
      <div style={{ padding: `10px 16px` }}>
        <h3 style={{margin:0}}>我爱漂亮妹妹</h3>
        <p style={{margin:0}}><a href="https://uiwjs.github.io">https://uiwjs.github.io</a></p>
      </div>
    </Card>
  );
}

API