uxcore.js - React UI Component Set

组件演示

[{"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\">import classnames from 'classnames';;\nimport { Card, Icon } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n const cardProps = {\n title: 'Title Title Title Title Title',\n tip: '这是一个提示',\n icon: <Icon usei name=\"shangchuan\" />,\n extra: (\n <a>\n 自定义操作\n </a>\n ),\n className: 'card-demo',\n showCollapseIcon: true,\n contentPaddingSize: 'none',\n };\n return (\n <Card\n title=\"Card title\"\n extra={<a href=\"#\">More</a>}\n className=\"card-demo\"\n >\n <p>Card content</p>\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-card-demo-basic'));\n</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\">.code-box-demo {\n background: rgba(31, 56, 88, 0.3);\n}\n\n.card-demo {\n width: 300px;\n}\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\">import classnames from 'classnames';;\nimport { Card, Icon, Form } from 'uxcore';\n\nconst { SwitchFormField, FormRow } = Form;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n value: {\n showCollapseIcon: false,\n showIcon: false,\n hasContentPadding: true,\n showTip: false,\n }\n };\n }\n\n render() {\n const { showCollapseIcon, showIcon, hasContentPadding, showTip } = this.state.value;\n const cardProps = {\n title: 'Title Title Title Title Title',\n tip: showTip ? '这是一个提示' : '',\n icon: showIcon ? <Icon usei name=\"shangchuan\" /> : null,\n extra: (\n <a>\n 自定义操作\n </a>\n ),\n className: 'card-demo',\n showCollapseIcon,\n contentPaddingSize: hasContentPadding ? 'middle' : 'none',\n };\n return (\n <div>\n <Form className=\"card-demo-form\" jsxvalues={this.state.value} jsxonChange={(value) => { this.setState({ value }) }}>\n <FormRow>\n <SwitchFormField jsxname=\"showCollapseIcon\" jsxlabel=\"开启折叠展开\" />\n <SwitchFormField jsxname=\"showIcon\" jsxlabel=\"显示图标\" />\n </FormRow>\n <FormRow>\n <SwitchFormField jsxname=\"hasContentPadding\" jsxlabel=\"包含内容边距\" />\n <SwitchFormField jsxname=\"showTip\" jsxlabel=\"显示提示信息\" />\n </FormRow>\n </Form>\n <Card\n {...cardProps}\n >\n <p>Card content</p>\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-card-demo-advanced'));\n</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\">.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</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
contentHeight	number	No	-	内容区域高度