@1studio/ui 中文文档教程

Question

ui ·

一组有用的 React/Redux UI 元素。 示例

Installation

使用 npm：

$ npm i -S @1studio/ui

Manual

Form:

自动将表单状态更改存储在 Redux Store (form.example) 上。 不需要 Redux 或 Actions。 仅关注字段更新。

import React from 'react';

/* !- React Elements */

import Form,
{
  Toggle,
  Checkbox,
}
from '@1studio/ui/form';


const ExampleForm = () =>
(
  <Form
    id="example"
  >
    <Toggle
      id="status"
    />
    <Checkbox
      id="checkbox"
      data={[{ id: 1, title: 'elso' }, { id: 2, title: 'masodik' }]}
    />
  </Form>
);

// => Redux.store = {
  form: {
    'example':
    {
      status: 1,
      checkbox: [1, 2],
    }
  }
}

更多信息

字段：复选框，日期，下拉，输入、多个、切换。

Form Actions:

Redux Store（表单）上的每个更改存储。 表单包装器执行此操作。

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import * as Actions from '@1studio/ui/form/actions';


/* !- React Elements */

import
{
  Toggle,
}
from '@1studio/ui/form';


/* !- Stateless Component */

const ExampleForm = (
{
  setValues,
},
) =>
(
  <Toggle
    id="status"
    label="Status"
    onChange={setValues}
  />
);

/**
 * propTypes
 * @type {Object}
 */
ExampleForm.propTypes =
{
  setValues: PropTypes.func.isRequired,
};

export default connect(
  null,
  Actions,
)(ExampleForm);

关于操作的更多信息。

Testing

跨浏览器测试由：

License

@1studio/ui 是 BSD 许可的。