Package Exports

@uiw/react-card
@uiw/react-card/cjs/index.js
@uiw/react-card/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@uiw/react-card) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Card 卡片

通用卡片容器，将信息聚合在卡片容器中展示，用来显示文字、列表、图文等内容。

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

基础用法

包含标题、内容、操作区域。

import React from 'react';
import { Card } from 'uiw';

function Demo () {
  return <div>
    <Card  title="Card标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
      卡片内容<br/>
      卡片内容<br/>
      卡片内容<br/>
    </Card>
  </div>
}
export default Demo

无边框

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

import React from 'react';
import { Card } from 'uiw';

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

简洁卡片

只包含内容区域。

import React from 'react';
import { Card } from 'uiw';

function Demo() {
  return <Card style={{ width: 300 }}>
    卡片内容<br/>
    卡片内容<br/>
    卡片内容<br/>
  </Card>
}
export default Demo

更灵活的内容展示

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

import React from 'react';
import { Card } from 'uiw';

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

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>
}
export default Demo

添加页脚

import React from 'react';
import { Card, Icon } from 'uiw';

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

function Demo() {
  return <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>
}
export default Demo

激活

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

import React from 'react';
import { Card, Icon } from 'uiw';

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

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>
}
export default Demo

API

参数	说明	类型	默认值
title	卡片标题	String/ReactNode	-
footer	页脚内容的简写	String/ReactNode	-
extra	卡片右上角的操作区域	String/ReactNode	-
bordered	是否显示边框	Boolean	`true`
active	展示鼠标经过的样式。	Boolean	`false`
noHover	取消鼠标移过时边框阴影	Boolean	`false`
bodyStyle	设置 `body` 的样式	Object	-
bodyClassName	设置 `body` 的 `className`	String	-