| | | | | | | ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | 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.