组件演示

[{"title":"基本使用","id":"components-card-demo-basic","tags":[],"filepath":"site/components/card/demo/basic.md","directory":"components/card/demo","filename":"basic","meta":{"title":"基本使用","description":"\n","order":"0","filepath":"site/components/card/demo/basic.md","filename":"basic","directory":"components/card/demo","id":"components-card-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var cardProps = {\n title: 'Title Title Title Title Title',\n tip: '这是一个提示',\n icon: React.createElement(_uxcore.Icon, { usei: true, name: 'shangchuan' }),\n extra: React.createElement(\n 'a',\n null,\n '\\u81EA\\u5B9A\\u4E49\\u64CD\\u4F5C'\n ),\n className: 'card-demo',\n showCollapseIcon: true,\n contentPaddingSize: 'none'\n };\n return React.createElement(\n _uxcore.Card,\n {\n title: 'Card title',\n extra: React.createElement(\n 'a',\n { href: '#' },\n 'More'\n ),\n className: 'card-demo'\n },\n React.createElement(\n 'p',\n null,\n 'Card content'\n ),\n React.createElement(\n 'p',\n null,\n 'Card content'\n ),\n React.createElement(\n 'p',\n null,\n 'Card content'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-card-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n<span class=\"hljs-keyword\">import</span> { Card, Icon } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> cardProps = {\n title: <span class=\"hljs-string\">'Title Title Title Title Title'</span>,\n tip: <span class=\"hljs-string\">'这是一个提示'</span>,\n icon: <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">usei</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"shangchuan\"</span> /&gt;</span>,\n extra: (\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span>&gt;</span>\n 自定义操作\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n )</span>,\n className: <span class=\"hljs-string\">'card-demo'</span>,\n showCollapseIcon: <span class=\"hljs-literal\">true</span>,\n contentPaddingSize: <span class=\"hljs-string\">'none'</span>,\n };\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Card</span>\n <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">\"Card title\"</span>\n <span class=\"hljs-attribute\">extra</span>=<span class=\"hljs-value\">{&lt;a</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"#\"</span>&gt;</span>More<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>}\n className=\"card-demo\"\n &gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>Card content<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>Card content<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>Card content<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Card</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-card-demo-basic'));\n</span></code></pre></div><style type=\"text/css\">.code-box-demo {\n background: rgba(31, 56, 88, 0.3);\n}\n\n.card-demo {\n width: 300px;\n}\n</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.code-box-demo</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">background</span>:<span class=\"hljs-value\"> <span class=\"hljs-function\">rgba</span>(<span class=\"hljs-number\">31</span>, <span class=\"hljs-number\">56</span>, <span class=\"hljs-number\">88</span>, <span class=\"hljs-number\">0.3</span>)</span></span>;\n}</span>\n\n<span class=\"hljs-class\">.card-demo</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">300px</span></span></span>;\n}</span>\n</code></pre></div>"},"status":"public","toc":""},{"title":"高级使用","id":"components-card-demo-advanced","tags":[],"filepath":"site/components/card/demo/advanced.md","directory":"components/card/demo","filename":"advanced","meta":{"title":"高级使用","description":"\n","order":"1","filepath":"site/components/card/demo/advanced.md","filename":"advanced","directory":"components/card/demo","id":"components-card-demo-advanced","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nvar _uxcore = require('uxcore');\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\n;\nvar SwitchFormField = _uxcore.Form.SwitchFormField,\n FormRow = _uxcore.Form.FormRow;\n\nvar Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {\n value: {\n showCollapseIcon: false,\n showIcon: false,\n hasContentPadding: true,\n showTip: false\n }\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var _state$value = this.state.value,\n showCollapseIcon = _state$value.showCollapseIcon,\n showIcon = _state$value.showIcon,\n hasContentPadding = _state$value.hasContentPadding,\n showTip = _state$value.showTip;\n\n var cardProps = {\n title: 'Title Title Title Title Title',\n tip: showTip ? '这是一个提示' : '',\n icon: showIcon ? React.createElement(_uxcore.Icon, { usei: true, name: 'shangchuan' }) : null,\n extra: React.createElement(\n 'a',\n null,\n '\\u81EA\\u5B9A\\u4E49\\u64CD\\u4F5C'\n ),\n className: 'card-demo',\n showCollapseIcon: showCollapseIcon,\n contentPaddingSize: hasContentPadding ? 'middle' : 'none'\n };\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Form,\n { className: 'card-demo-form', jsxvalues: this.state.value, jsxonChange: function jsxonChange(value) {\n _this2.setState({ value: value });\n } },\n React.createElement(\n FormRow,\n null,\n React.createElement(SwitchFormField, { jsxname: 'showCollapseIcon', jsxlabel: '\\u5F00\\u542F\\u6298\\u53E0\\u5C55\\u5F00' }),\n React.createElement(SwitchFormField, { jsxname: 'showIcon', jsxlabel: '\\u663E\\u793A\\u56FE\\u6807' })\n ),\n React.createElement(\n FormRow,\n null,\n React.createElement(SwitchFormField, { jsxname: 'hasContentPadding', jsxlabel: '\\u5305\\u542B\\u5185\\u5BB9\\u8FB9\\u8DDD' }),\n React.createElement(SwitchFormField, { jsxname: 'showTip', jsxlabel: '\\u663E\\u793A\\u63D0\\u793A\\u4FE1\\u606F' })\n )\n ),\n React.createElement(\n _uxcore.Card,\n cardProps,\n React.createElement(\n 'p',\n null,\n 'Card content'\n ),\n React.createElement(\n 'p',\n null,\n 'Card content'\n ),\n React.createElement(\n 'p',\n null,\n 'Card content'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-card-demo-advanced'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n<span class=\"hljs-keyword\">import</span> { Card, Icon, Form } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-keyword\">const</span> { SwitchFormField, FormRow } = Form;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: {\n showCollapseIcon: <span class=\"hljs-literal\">false</span>,\n showIcon: <span class=\"hljs-literal\">false</span>,\n hasContentPadding: <span class=\"hljs-literal\">true</span>,\n showTip: <span class=\"hljs-literal\">false</span>,\n }\n };\n }\n\n render() {\n <span class=\"hljs-keyword\">const</span> { showCollapseIcon, showIcon, hasContentPadding, showTip } = <span class=\"hljs-keyword\">this</span>.state.value;\n <span class=\"hljs-keyword\">const</span> cardProps = {\n title: <span class=\"hljs-string\">'Title Title Title Title Title'</span>,\n tip: showTip ? <span class=\"hljs-string\">'这是一个提示'</span> : <span class=\"hljs-string\">''</span>,\n icon: showIcon ? <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">usei</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"shangchuan\"</span> /&gt;</span> : null,\n extra: (\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span>&gt;</span>\n 自定义操作\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</span>&gt;</span>\n )</span>,\n className: <span class=\"hljs-string\">'card-demo'</span>,\n showCollapseIcon,\n contentPaddingSize: hasContentPadding ? <span class=\"hljs-string\">'middle'</span> : <span class=\"hljs-string\">'none'</span>,\n };\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Form</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"card-demo-form\"</span> <span class=\"hljs-attribute\">jsxvalues</span>=<span class=\"hljs-value\">{this.state.value}</span> <span class=\"hljs-attribute\">jsxonChange</span>=<span class=\"hljs-value\">{(value)</span> =&gt;</span> { this.setState({ value }) }}&gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">FormRow</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SwitchFormField</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"showCollapseIcon\"</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"开启折叠展开\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SwitchFormField</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"showIcon\"</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"显示图标\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">FormRow</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">FormRow</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SwitchFormField</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"hasContentPadding\"</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"包含内容边距\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">SwitchFormField</span> <span class=\"hljs-attribute\">jsxname</span>=<span class=\"hljs-value\">\"showTip\"</span> <span class=\"hljs-attribute\">jsxlabel</span>=<span class=\"hljs-value\">\"显示提示信息\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">FormRow</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Form</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Card</span>\n {<span class=\"hljs-attribute\">...cardProps</span>}\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>Card content<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>Card content<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>Card content<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Card</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Demo</span> /&gt;</span>\n, document.getElementById('components-card-demo-advanced'));\n</span></code></pre></div><style type=\"text/css\">.code-box-demo {\n background: rgba(31, 56, 88, 0.3);\n}\n\n.card-demo {\n width: 300px;\n}\n\n.card-demo-form {\n width: 500px;\n}\n</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.code-box-demo</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">background</span>:<span class=\"hljs-value\"> <span class=\"hljs-function\">rgba</span>(<span class=\"hljs-number\">31</span>, <span class=\"hljs-number\">56</span>, <span class=\"hljs-number\">88</span>, <span class=\"hljs-number\">0.3</span>)</span></span>;\n}</span>\n\n<span class=\"hljs-class\">.card-demo</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">300px</span></span></span>;\n}</span>\n\n<span class=\"hljs-class\">.card-demo-form</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">500px</span></span></span>;\n}</span>\n</code></pre></div>"},"status":"public","toc":""}]
import classnames from 'classnames';;
import { Card, Icon } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    const cardProps = {
      title: 'Title Title Title Title Title',
      tip: '这是一个提示',
      icon: <Icon usei name="shangchuan" />,
      extra: (
        <a>
        自定义操作
        </a>
      ),
      className: 'card-demo',
      showCollapseIcon: true,
      contentPaddingSize: 'none',
    };
    return (
      <Card
        title="Card title"
        extra={<a href="#">More</a>}
        className="card-demo"
      >
        <p>Card content</p>
        <p>Card content</p>
        <p>Card content</p>
      </Card>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-card-demo-basic'));
.code-box-demo {
  background: rgba(31, 56, 88, 0.3);
}

.card-demo {
  width: 300px;
}
import classnames from 'classnames';;
import { Card, Icon, Form } from 'uxcore';

const { SwitchFormField, FormRow } = Form;

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: {
        showCollapseIcon: false,
        showIcon: false,
        hasContentPadding: true,
        showTip: false,
      }
    };
  }

  render() {
    const { showCollapseIcon, showIcon, hasContentPadding, showTip } = this.state.value;
    const cardProps = {
      title: 'Title Title Title Title Title',
      tip: showTip ? '这是一个提示' : '',
      icon: showIcon ? <Icon usei name="shangchuan" /> : null,
      extra: (
        <a>
        自定义操作
        </a>
      ),
      className: 'card-demo',
      showCollapseIcon,
      contentPaddingSize: hasContentPadding ? 'middle' : 'none',
    };
    return (
      <div>
        <Form className="card-demo-form" jsxvalues={this.state.value} jsxonChange={(value) => { this.setState({ value }) }}>
          <FormRow>
            <SwitchFormField jsxname="showCollapseIcon" jsxlabel="开启折叠展开" />
            <SwitchFormField jsxname="showIcon" jsxlabel="显示图标" />
          </FormRow>
          <FormRow>
            <SwitchFormField jsxname="hasContentPadding" jsxlabel="包含内容边距" />
            <SwitchFormField jsxname="showTip" jsxlabel="显示提示信息" />
          </FormRow>
        </Form>
        <Card
          {...cardProps}
        >
          <p>Card content</p>
          <p>Card content</p>
          <p>Card content</p>
        </Card>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-card-demo-advanced'));
.code-box-demo {
  background: rgba(31, 56, 88, 0.3);
}

.card-demo {
  width: 300px;
}

.card-demo-form {
  width: 500px;
}

Props

Name Type Required Default Comments
prefixCls String No - 类名前缀
className String No - 额外类名
icon React Element No - 头部图标
title React Element No - 头部标题
tip React Element No - 头部提示
extra React Element No - 头部右侧额外区域,通用用于放置动作
children React Element No - 卡片内容
showCollapseIcon Bool No false 显示折叠按钮
onCollapseChange func(collapse) No noop 折叠状态发生改变时的回调,参数为是否被折叠
contentPaddingSize string No 'middle' 内容区间距,枚举值:middle/none