Package Exports
- @jswork/react-card
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 (@jswork/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
react-card
Card for react.
installation
npm install -S @jswork/react-cardproperties
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | false | - | The extended className for component. |
| active | bool | false | - | If the card is active. |
| disabled | bool | false | - | If the card is not enable. |
| hoverable | bool | false | - | If the card can hover and with :hover effect. |
| clickable | bool | false | - | If the card can click with :active effect. |
| shadowable | bool | false | true | If the card show with shadow. |
usage
- import css
@import "~@jswork/wsui-card/dist/style.scss";
// customize your styles:
$react-card-options: ()- import js
import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactCard from '@jswork/react-card';
import './assets/style.scss';
class App extends React.Component {
render() {
return (
<ReactDemokit
className="p-3 app-container"
url="https://github.com/afeiship/react-card">
<ReactCard>
<img
src="http://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg"
width="100%"
/>
</ReactCard>
<ReactCard hoverable clickable>
<p>
少年时，想碰到一个聂小倩，拼了性命爱一场，天亮前带着她的魂魄远走他乡。
</p>
<p>
青年时，想碰到一个白素贞，家大业大，要啥有啥，吃完软饭一抹嘴，还有人负责把她关进雷峰塔。
</p>
<p>
中年时，想要一个田螺姑娘，温婉可人，红袖添香，半夜写累了，让她变回原形，加干辣椒、花椒、姜、蒜片爆炒，淋入香油，起锅装盘。
</p>
</ReactCard>
</ReactDemokit>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
documentation
license
Code released under the MIT license.