xueyou2000/xy-card

基于 React Hooks 的卡片组件

IE 10+ ✔	Chrome 31.0+ ✔	Firefox 31.0+ ✔	Opera 30.0+ ✔	Safari 7.0+ ✔

xy-card

卡片组件

安装

# yarn
yarn add xy-card xy-skeleton xy-grid utils-hooks xy-grid classnames

使用例子

import React from "react";
import ReactDOM from "react-dom";
import { Card, CardMeta } from "xy-card";
ReactDOM.render(
    <Card title="卡片标题">
        <CardMeta title="Europe Street beat">www.instagram.com</CardMeta>
    </Card>,
    container
);

API

Card

属性	说明	类型	默认值
children	卡片内容	React.ReactNode	-
actions	卡片操作按钮, 在卡片底部的操作按钮集合	React.ReactNode[]	-
bordered	是否有边框	boolean	true
cover	卡片封面	React.ReactNode	-
loading	是否加载中	boolean	false
title	卡片标题	React.ReactNode	-
type	卡片类型, 可用值"inner"或不设	string	-
hoverable	鼠标移入悬浮	boolean	false
bodyStyle	卡片内容样式	React.CSSProperties	无

CardMeta

属性	说明	类型	默认值
avatar	头像	React.ReactNode	-
children	描述内容	React.ReactNode	-
title	标题	React.ReactNode	-

开发

yarn run start

例子

http://localhost:6006

测试

yarn run test

开源许可

xy-card is released under the MIT license.