Output文本展示

展示文本。

何时使用

单纯用于展示文本，常用在表单中。

代码演示

基本使用

基本使用。

import { Output } from 'choerodon-ui/pro';
ReactDOM.render(
  <Output value="hello" />,
  mountNode
);

数据源

绑定数据源。

import { DataSet, Output } from 'choerodon-ui/pro';
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'first-name', type: 'string', defaultValue: 'Huazhen', required: true },
    ],
  });
  render() {
    return <Output dataSet={this.ds} name="first-name" />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

多值

通过属性multiple设置为多值。

import { DataSet, Output, Row, Col } from 'choerodon-ui/pro';
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'user', type: 'string', label: '用户', defaultValue: 'Jack,Rose,Hugh', required: true, multiple: ',' },
    ],
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <Output dataSet={this.ds} name="user" />
        </Col>
        <Col span={12}>
          <Output multiple value={['wu', 'zoe', 'jasson']} />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

使用renderer

使用renderer属性覆盖默认渲染行为。

import { Output } from 'choerodon-ui/pro';
function rendererOne(param) {
  const { text } = param;
  return <span style={{ color: 'red' }}>{text}</span>;
}
ReactDOM.render(
  <Output value="hello" renderer={rendererOne} />,
  mountNode
);

在表单中使用

表单绑定数据源，与其他字段混合使用。

import { DataSet, Form, Output, EmailField, NumberField } from 'choerodon-ui/pro';
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'phone', defaultValue: '15888888888', type: 'string', label: '手机号' },
      { name: 'age', defaultValue: 18, type: 'number', label: '年龄' },
      { name: 'sex', defaultValue: 'F', type: 'string', label: '性别', lookupCode: 'HR.EMPLOYEE_GENDER' },
      { name: 'language', defaultValue: 'zh-CN', type: 'string', label: '语言' },
      { name: 'email', defaultValue: 'some@example.com', type: 'string', label: '邮箱' },
      { name: 'homepage', defaultValue: 'www.baidu.com', type: 'string', label: '个人主页' },
      { name: 'birth', defaultValue: '2018-12-26', type: 'date', label: '生日' },
    ],
  });
  render() {
    return (
      <Form dataSet={this.ds} style={{ width: '3.5rem' }}>
        <Output name="phone" />
        <NumberField name="age" />
        <Output name="sex" />
        <Output name="language" />
        <EmailField name="email" />
        <Output name="homepage" />
        <Output name="birth" />
      </Form>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

范围值

通过属性range设置为范围值。

import { DataSet, Output, Row, Col } from 'choerodon-ui/pro';
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'user', type: 'string', label: '用户', defaultValue: [1, 10], required: true, range: true },
    ],
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <Output dataSet={this.ds} name="user" />
        </Col>
        <Col span={12}>
          <Output range value={[20, 30]} />
        </Col>
        <Col span={24}>
          <Output range={['start', 'end']} value={{ start: 30, end: 50 }} />
        </Col>
        <Col span={24}>
          <Output multiple range value={[[1, 10], [20, 30], [30, 50]]} />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

API

Output

更多属性请参考 FormField。