0.1.0 • Published 6 years ago
xy-card v0.1.0
![]() | ![]() | ![]() | ![]() | ![]() |
|---|---|---|---|---|
| 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例子
测试
yarn run test开源许可
xy-card is released under the MIT license.





