uxcore.js - React UI Component Set

组件演示

[{"title":"基本","id":"components-crumb-demo-basic","tags":[],"filepath":"site/components/crumb/demo/basic.md","directory":"components/crumb/demo","filename":"basic","meta":{"title":"基本","description":"\n","order":"0","filepath":"site/components/crumb/demo/basic.md","filename":"basic","directory":"components/crumb/demo","id":"components-crumb-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 return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Crumb,\n { className: 'crumb-style crumb-root' },\n React.createElement(\n _uxcore.Crumb.Item,\n { href: '#', className: 'crumb-item-style' },\n '\\u9996\\u9875'\n ),\n React.createElement(\n _uxcore.Crumb.Item,\n { href: '#' },\n '\\u7BA1\\u7406\\u5E73\\u53F0'\n ),\n React.createElement(\n _uxcore.Crumb.Item,\n { href: '#' },\n '\\u6D41\\u7A0B\\u7BA1\\u7406'\n ),\n React.createElement(\n _uxcore.Crumb.Item,\n { className: 'crumb-item-style' },\n '\\u7F16\\u8F91\\u6D41\\u7A0B\\u4FE1\\u606F'\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-crumb-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import classnames from 'classnames';;\n\nimport { Crumb } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n <Crumb className=\"crumb-style crumb-root\">\n <Crumb.Item href=\"#\" className=\"crumb-item-style\">首页</Crumb.Item>\n <Crumb.Item href=\"#\">管理平台</Crumb.Item>\n <Crumb.Item href=\"#\">流程管理</Crumb.Item>\n <Crumb.Item className=\"crumb-item-style\">编辑流程信息</Crumb.Item>\n </Crumb>\n );\n }\n}\n\nReactDOM.render(\n <Demo />,\n document.getElementById('components-crumb-demo-basic'));</code></pre></div>"},"status":"public","toc":""}]

基本

import classnames from 'classnames';;

import { Crumb } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Crumb className="crumb-style crumb-root">
        <Crumb.Item href="#" className="crumb-item-style">首页</Crumb.Item>
        <Crumb.Item href="#">管理平台</Crumb.Item>
        <Crumb.Item href="#">流程管理</Crumb.Item>
        <Crumb.Item className="crumb-item-style">编辑流程信息</Crumb.Item>
      </Crumb>
    );
  }
}

ReactDOM.render(
  <Demo />,
 document.getElementById('components-crumb-demo-basic'));

Usage

const Crumb = require('uxcore-crumb');

React.render(
  (
    <Crumb className="crumb-style crumb-root">
      <Crumb.Item href="#" className="crumb-item-style">首页</Crumb.Item>
      <Crumb.Item href="#">管理平台</Crumb.Item>
      <Crumb.Item href="#">流程管理</Crumb.Item>
      <Crumb.Item className="crumb-item-style">编辑流程信息</Crumb.Item>
    </Crumb>
  ),
  document.getElementById('demo'));

API

Props

Crumb

配置项	类型	必填	默认值	功能/备注
className	String	Option	''	无

Crumb.Item

配置项	类型	必填	默认值	功能/备注
className	String	Option	''	无
href	String	Option	''	链接，如不传则不可点击