Skip to content

Latest commit

 

History

History

react-card

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 

Card 卡片

Buy me a coffee Open in unpkg NPM Downloads npm version

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

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

基础用法

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

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

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

无边框

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

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>
  )
}

简洁卡片

只包含内容区域。

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

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

更灵活的内容展示

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

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>
  )
}

添加页脚

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

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

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

激活

设置属性 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>
)

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

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