uxcore.js - React UI Component Set

组件演示

[{"title":"基本","id":"components-grid-demo-basic","tags":[],"filepath":"site/components/grid/demo/basic.md","directory":"components/grid/demo","filename":"basic","meta":{"title":"基本","description":"\n","order":"0","filepath":"site/components/grid/demo/basic.md","filename":"basic","directory":"components/grid/demo","id":"components-grid-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 _uxcore = require('uxcore');\n\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\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 Row = _uxcore.Grid.Row,\n Col = _uxcore.Grid.Col;\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 return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Grid,\n { fluid: true },\n React.createElement(\n Row,\n { className: 'show-grid' },\n React.createElement(\n Col,\n { xs: 24, md: 16 },\n React.createElement(\n 'code',\n null,\n '<',\n 'Col xs={24} md={16}',\n ' />'\n )\n ),\n React.createElement(\n Col,\n { xs: 12, md: 8 },\n React.createElement(\n 'code',\n null,\n '<',\n 'Col xs={12} md={8}',\n ' />'\n )\n )\n ),\n React.createElement(\n Row,\n { className: 'show-grid' },\n React.createElement(\n Col,\n { xs: 12, md: 8 },\n React.createElement(\n 'code',\n null,\n '<',\n 'Col xs={12} md={8}',\n ' />'\n )\n ),\n React.createElement(\n Col,\n { xs: 12, md: 8 },\n React.createElement(\n 'code',\n null,\n '<',\n 'Col xs={12} md={8}',\n ' />'\n )\n ),\n React.createElement(\n Col,\n { xs: 12, md: 8 },\n React.createElement(\n 'code',\n null,\n '<',\n 'Col xs={12} md={8}',\n ' />'\n )\n )\n ),\n React.createElement(\n Row,\n { className: 'show-grid' },\n React.createElement(\n Col,\n { xs: 12, xsOffset: 12 },\n React.createElement(\n 'code',\n null,\n '<',\n 'Col xs={12} xsOffset={12}',\n ' />'\n )\n )\n ),\n React.createElement(\n Row,\n { className: 'show-grid' },\n React.createElement(\n Col,\n { md: 12, mdPush: 12 },\n React.createElement(\n 'code',\n null,\n '<',\n 'Col md={12} mdPush={12}',\n ' />'\n )\n ),\n React.createElement(\n Col,\n { md: 12, mdPull: 12 },\n React.createElement(\n 'code',\n null,\n '<',\n 'Col md={12} mdPull={12}',\n ' />'\n )\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-grid-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Grid } from 'uxcore';\nimport classnames from 'classnames';;\nconst { Row, Col } = Grid;\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <div>\n <Grid fluid>\n <Row className=\"show-grid\">\n <Col xs={24} md={16}><code>&lt;{'Col xs={24} md={16}'} /&gt;</code></Col>\n <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>\n </Row>\n\n <Row className=\"show-grid\">\n <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>\n <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>\n <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>\n </Row>\n\n <Row className=\"show-grid\">\n <Col xs={12} xsOffset={12}><code>&lt;{'Col xs={12} xsOffset={12}'} /&gt;</code></Col>\n </Row>\n\n <Row className=\"show-grid\">\n <Col md={12} mdPush={12}><code>&lt;{'Col md={12} mdPush={12}'} /&gt;</code></Col>\n <Col md={12} mdPull={12}><code>&lt;{'Col md={12} mdPull={12}'} /&gt;</code></Col>\n </Row>\n </Grid>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, document.getElementById('components-grid-demo-basic'));</code></pre></div><style type=\"text/css\">.show-grid {\n margin-bottom: 15px;\n}\n.show-grid [class^=\"col-\"] {\n padding-top: 10px;\n padding-bottom: 10px;\n background-color: #eee;\n background-color: rgba(86, 61, 124, 0.15);\n border: 1px solid #ddd;\n border: 1px solid rgba(86, 61, 124, 0.2);\n}\n.show-grid code {\n display: inline-block;\n width: 100%; \n}\ncode {\n color: #c7254e;\n background-color: #f9f2f4;\n border-radius: 4px;\n}\ncode,\nkbd {\n padding: 2px 4px;\n font-size: 90%;\n}</style><div class=\"highlight\"><pre><code class=\"css\">.show-grid {\n margin-bottom: 15px;\n}\n.show-grid [class^=\"col-\"] {\n padding-top: 10px;\n padding-bottom: 10px;\n background-color: #eee;\n background-color: rgba(86, 61, 124, 0.15);\n border: 1px solid #ddd;\n border: 1px solid rgba(86, 61, 124, 0.2);\n}\n.show-grid code {\n display: inline-block;\n width: 100%; \n}\ncode {\n color: #c7254e;\n background-color: #f9f2f4;\n border-radius: 4px;\n}\ncode,\nkbd {\n padding: 2px 4px;\n font-size: 90%;\n}</code></pre></div>"},"status":"public","toc":""}]

基本

import { Grid } from 'uxcore';
import classnames from 'classnames';;
const { Row, Col } = Grid;

class Demo extends React.Component {

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

  render() {
    return (
      <div>
        <Grid fluid>
          <Row className="show-grid">
            <Col xs={24} md={16}><code>&lt;{'Col xs={24} md={16}'} /&gt;</code></Col>
            <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
          </Row>

          <Row className="show-grid">
            <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
            <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
            <Col xs={12} md={8}><code>&lt;{'Col xs={12} md={8}'} /&gt;</code></Col>
          </Row>

          <Row className="show-grid">
            <Col xs={12} xsOffset={12}><code>&lt;{'Col xs={12} xsOffset={12}'} /&gt;</code></Col>
          </Row>

          <Row className="show-grid">
            <Col md={12} mdPush={12}><code>&lt;{'Col md={12} mdPush={12}'} /&gt;</code></Col>
            <Col md={12} mdPull={12}><code>&lt;{'Col md={12} mdPull={12}'} /&gt;</code></Col>
          </Row>
        </Grid>
      </div>
    );
  }
}

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

.show-grid {
  margin-bottom: 15px;
}
.show-grid [class^="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  background-color: rgba(86, 61, 124, 0.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86, 61, 124, 0.2);
}
.show-grid code {
  display: inline-block;
  width: 100%; 
}
code {
  color: #c7254e;
  background-color: #f9f2f4;
  border-radius: 4px;
}
code,
kbd {
  padding: 2px 4px;
  font-size: 90%;
}

Usage

有关栅格的基础知识，参考 http://v3.bootcss.com/css/#grid。

API

Props

Grid

配置项	类型	必填	默认值	功能/备注
componentClass	elementType	optional	'div'	You can use a custom element for this component
fluid	boolean	optional	false	Turn any fixed-width grid layout into a full-width layout by this property. Adds `container-fluid` class.

Row

通过 Grid.Row 取得。

配置项	类型	必填	默认值	功能/备注
componentClass	elementType	optional	'div'	You can use a custom element for this component

Col

通过 Grid.Col 取得。

配置项	类型	功能/备注
lg	number	The number of columns you wish to span for Large devices Desktops (≥1200px) `class-prefix col-lg-`
lgOffset	number	Move columns to the right for Large devices Desktops `class-prefix col-lg-offset-`
lgPull	number	Change the order of grid columns to the left for Large devices Desktops `class-prefix col-lg-pull-`
lgPush	number	Change the order of grid columns to the right for Large devices Desktops `class-prefix col-lg-push-`
md	number	The number of columns you wish to span for Medium devices Desktops (≥992px) `class-prefix col-md-`
mdOffset	number	Move columns to the right for Medium devices Desktops `class-prefix col-md-offset-`
mdPull	number	Change the order of grid columns to the left for Medium devices Desktops `class-prefix col-md-pull-`
mdPush	number	Change the order of grid columns to the right for Medium devices Desktops `class-prefix col-md-push-`
sm	number	The number of columns you wish to span for Small devices Tablets (≥768px) `class-prefix col-sm-`
smOffset	number	Move columns to the right for Small devices Tablets `class-prefix col-sm-offset-`
smPull	number	Change the order of grid columns to the left for Small devices Tablets `class-prefix col-sm-pull-`
smPush	number	Change the order of grid columns to the right for Small devices Tablets `class-prefix col-sm-push-`
xs	number	The number of columns you wish to span for Extra small devices Phones (<768px) `class-prefix col-xs-`
xsOffset	number	Move columns to the right for Extra small devices Phones `class-prefix col-xs-offset-`
xsPull	number	Change the order of grid columns to the left for Extra small devices Phones `class-prefix col-xs-pull-`
xsPush	number	Change the order of grid columns to the right for Extra small devices Phones `class-prefix col-xs-push-`