简体中文

多行文本

多行文本输入框,具有丰富的风格化样式和提示信息配置,同时支持自适应大小。

基础
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/7
 */
import React, {Component} from 'react';
import {TextArea} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Base
 *
 * This component could work in two mode which decided by `auto` property.
 *
 * In the `auto` mode, the component will be controlled by itself, you can give it a `defaultValue` to initialize it.
 * In the other mode, hana wishes you to provides property `value` and use following callbacks to control it:
 * `onChange`、`onBlur`、`onFocus`......
 *
 * @cn
 * 基础
 *
 * 此组件可以工作在两种模式,模式的切换由`auto`属性决定。
 *
 * 若`auto`为真,则会切换为自动模式,此模式下,组件将会完全由内部的状态自行控制,并且可以由`defaultValue`属性设置初始值。
 * 否则则为受控模式,此模式下,hana希望你使用`value`属性来提供一个值,并使用以下回调函数来对其进行控制:
 * `onChange`、`onBlur`、`onFocus`......
 */
export default class ExampleBase extends Component {
  state = {
    autoValue: 'youk.',
    controlledValue: 'Eternal feather'
  };

  render() {
    const {
      autoValue,
      controlledValue
    } = this.state;

    return (
      <div>
        <ExampleBlock
          en={(
            <p>Auto mode, {autoValue}</p>
          )}
          cn={(
            <p>自动模式,{autoValue}</p>
          )}
        >
          <TextArea
            auto
            defaultValue={autoValue}
            onChange={(e, v) => this.setState({
              autoValue: `${v === 'youko' ? 'Ever forever' : 'Emotional flutter'}: ${e.target.value}`
            })}
            onFocus={e => this.setState({autoValue: `Ebullient future: ${e.target.value}`})}
            onBlur={e => this.setState({autoValue: `Euphoric field: ${e.target.value}`})}
          />
        </ExampleBlock>

        <ExampleBlock
          en={(
            <p>Controlled mode</p>
          )}
          cn={(
            <p>受控模式</p>
          )}
        >
          <TextArea
            value={controlledValue}
            onChange={e => this.setState({controlledValue: e.target.value})}
          />
        </ExampleBlock>
      </div>
    );
  }
}

此组件可以工作在两种模式,模式的切换由auto属性决定。

auto为真,则会切换为自动模式,此模式下,组件将会完全由内部的状态自行控制,并且可以由defaultValue属性设置初始值。 否则则为受控模式,此模式下,hana希望你使用value属性来提供一个值,并使用以下回调函数来对其进行控制: onChangeonBluronFocus......

自动模式,youk.

受控模式

状态
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/8
 */
import React from 'react';
import {TextArea} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * State
 *
 * hana feels the real world is very complicated, there must be rich states to adapted different scenes,
 * so, following properties are provided to manage theme:
 *
 * Property `focus` and `disable` could focus or disable component,
 * `active`, `success`, `warning` and `error` properties could define messages, styles...... in different states,
 * check the definitions for mor information,
 * their order is from `error` to `default`.
 *
 * @cn
 * 状态
 *
 * hana觉得现实世界非常复杂,需要有丰富的状态来适应各种环境,所以提供了以下几种属性来管理这些状态:
 *
 * `focus`和`disable`属性可以聚焦或者禁用组件,
 * 而`active`、`success`、`warning`和`error`几个属性则可以定义在不同状态下的提示信息、样式等,详见属性定义,
 * 她们的优先级按照以上列举顺序的倒序排列。
 *
 */
export default () => (
  <div>
    <ExampleBlock>
      <TextArea
        auto
        disabled
        defaultValue={'Disabled'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        focus
        defaultValue={'Focus'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        message={'Default state!'}
        color={'#888'}
        defaultValue={'Default'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        focus
        active={{
          message: 'Activity!',
          color: '#52c5bb'
        }}
        defaultValue={'Active'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        warning={{
          show: true,
          message: 'Option causes warning!'
        }}
        defaultValue={'Warning'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        success={{
          show: true,
          message: 'Option is successful!'
        }}
        defaultValue={'Success'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        error={{
          show: true,
          message: 'Option causes error!'
        }}
        defaultValue={'Error'}
      />
    </ExampleBlock>
  </div>
);

hana觉得现实世界非常复杂,需要有丰富的状态来适应各种环境,所以提供了以下几种属性来管理这些状态:

focusdisable属性可以聚焦或者禁用组件, 而activesuccesswarningerror几个属性则可以定义在不同状态下的提示信息、样式等,详见属性定义, 她们的优先级按照以上列举顺序的倒序排列。

Default state!
Activity!
Option causes warning!
Option is successful!
Option causes error!
尺寸
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/8
 */
import React from 'react';
import {TextArea} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Size
 *
 * For different scenes, hana provides three preset sizes defined by property `size`:
 * `small`, `middle` and `large`.
 *
 * TextArea is different from TextArea, hana allows you to use the property `height` to set her height.
 * If you don't need a fixed height, property `autoSize` is also provided to make this component's height be automatic computation,
 * in this mode, property `height` is invalid.
 *
 * @cn
 * 尺寸
 *
 * 针对不同场景,hana提供了一个属性`size`来定义尺寸的大小,现在有`small`、`middle`和`large`三种。
 *
 * 作为一个多行文本,比起单行,高度也是一个重要的属性,hana允许你通过`height`来进行设置。
 * 如果不想用指定的高度,你可以用`autoSize`属性指定一个最大行数和最小行数,
 * 在这种状况下,组件的高度将根据输入的内容自行计算,并且此时`height`会无效。
 *
 */
export default () => (
  <div
    style={{
      backgroundColor: '#fff',
      padding: 8
    }}
  >
    <ExampleBlock>
      <TextArea
        auto
        size={'small'}
        defaultValue={'Small'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        size={'middle'}
        defaultValue={'Middle'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        size={'large'}
        defaultValue={'Large'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        defaultValue={'height={32}'}
        height={32}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        defaultValue={'autoSize={{minLines: 3, maxLines: 8}}'}
        autoSize={{minLines: 3, maxLines: 8}}
      />
    </ExampleBlock>
  </div>
);

针对不同场景,hana提供了一个属性size来定义尺寸的大小,现在有smallmiddlelarge三种。

作为一个多行文本,比起单行,高度也是一个重要的属性,hana允许你通过height来进行设置。 如果不想用指定的高度,你可以用autoSize属性指定一个最大行数和最小行数, 在这种状况下,组件的高度将根据输入的内容自行计算,并且此时height会无效。

图标
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/8
 */
import React from 'react';
import {TextArea, Icon} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Icon
 *
 * Icon is a important part of this component to make it more nijigen-style,
 * you can customize it with property `withIcon` and `icon``,
 * there is also a way to show different icons with states' properties.
 *
 * @cn
 * 图标
 *
 * Icon对于组件的风格化非常重要,你可以使用`withIcon`和`icon`属性来对其进行控制,
 * 如果你想在不同的状态(详见上个例子)显示不同图标,可以在那些状态对应的属性中进行修改。
 */
export default () => (
  <div>
    <ExampleBlock>
      <TextArea
        auto
        withIcon={false}
        defaultValue={'without icon'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        icon={<Icon type={'himawari'} />}
        defaultValue={'Custom icon: default'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        success={{
          show: true,
          icon: <Icon type={'smile'} />
        }}
        defaultValue={'Custom icon: success'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        warning={{
          show: true,
          icon: <Icon type={'warn'} />
        }}
        defaultValue={'Custom icon: waring'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        error={{
          show: true,
          icon: <Icon type={'sad'} />
        }}
        defaultValue={'Custom icon: error'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        icon={<p>TextArea</p>}
        defaultValue={'Custom icon: tag p'}
      />
    </ExampleBlock>
  </div>
);

Icon对于组件的风格化非常重要,你可以使用withIconicon属性来对其进行控制, 如果你想在不同的状态(详见上个例子)显示不同图标,可以在那些状态对应的属性中进行修改。

TextArea

样式
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 2017/2/8
 */
import React from 'react';
import {TextArea} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * Styles
 *
 * hana also provide properties to cover default style and css, check the definitions.
 *
 * hana also provide a property `backgroundColor` to set the background-color of desc quickly.
 *
 * @cn
 * 样式
 *
 * hana也预留了样式和CSS类的接口,详情请查看属性定义。
 *
 * 除了基本样式之外,由于此组件Hint信息的实现方式,你可能需要使用`backgroundColor`属性指定一个当前背景环境的主题颜色。
 *
 */
export default () => (
  <div
    style={{
      backgroundColor: '#fff',
      padding: 8
    }}
  >
    <ExampleBlock>
      <TextArea
        auto
        style={{
          height: 40
        }}
        defaultValue={'style={{height: 40}}'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        inputStyle={{
          width: 320
        }}
        defaultValue={'inputStyle={{width: 320}}'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        active={{
          message: 'active style',
          descStyle: {
            color: '#52c5bb'
          }
        }}
        defaultValue={'Custom style: active'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        success={{
          show: true,
          message: 'successful style',
          descStyle: {
            color: '#d56767'
          }
        }}
        defaultValue={'Custom style: success'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        warning={{
          show: true,
          message: 'warning style',
          descStyle: {
            color: '#4fc478'
          }
        }}
        defaultValue={'Custom style: waring'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <TextArea
        auto
        error={{
          show: true,
          message: 'error style',
          descStyle: {
            color: '#e8964a'
          }
        }}
        defaultValue={'Custom style: error'}
      />
    </ExampleBlock>
  </div>
);

hana也预留了样式和CSS类的接口,详情请查看属性定义。

除了基本样式之外,由于此组件Hint信息的实现方式,你可能需要使用backgroundColor属性指定一个当前背景环境的主题颜色。

successful style
warning style
error style

属性说明

属性名 类型 默认值 说明
auto bool false 是否工作在自动模式,如果是,组件将会自动管理它的状态。
autoSize shape 是否允许输入框自动根据文本调整高度, 需要提供 {最小行数, 最大行数}
disabled bool false 禁用输入。
defaultValue string '' 在自动模式下,该值将作为组件内容的初始值。
value string '' 在普通模式下,用于控制组件内容的值。
size enum:
 'small'
 'middle'
 'large'
'middle' 组件显示的尺寸。
height union 组件高度。
backgroundColor string '#fff' 应用环境的主要背景色。
withIcon bool true 是否要显示图标。
icon node null 用于替代默认图标。
color string 默认的主题颜色。
message string 默认的提示信息。
focus bool 组件是否被focus。
onChange function () => {} 当输入的值发生变化时,将会被调用的回调。
(event, value) => void.
onBlur function () => {} 当组件被blur时,将会被调用的回调。
(event, value) => void.
onFocus function () => {} 当组件被focus时,将会被调用的回调。
(event, value) => void.
className string 根元素的class。
style object {} 根元素的样式。
inputStyle object {} 输入框的样式。
descStyle object 顶部解释条的样式。
active hintType { show: false, message: '', style: {}, descStyle: {}, icon: null, color: null} 用于指定活动状态(主要是focus时)下的一些组件属性,包括样式、提示信息等。
{message: string, color: string, style: style, icon}
error hintType { show: false, message: '', style: {}, descStyle: {}, icon: null, color: null} 用于指定错误状态下的一些组件属性,这些属性将会替换掉默认属性。
{show: bool, message: string, color: string, style: style, icon: node}
warning hintType { show: false, message: '', style: {}, descStyle: {}, icon: null, color: null} 用于指定警告状态下的一些组件属性,这些属性将会替换掉默认属性。
{show: bool, message: string, color: string, style: style, icon: node}
success hintType { show: false, message: '', style: {}, descStyle: {}, icon: null, color: null} 用于指定成功状态下的一些组件属性,这些属性将会替换掉默认属性。
{show: bool, message: string, color: string, style: style, icon: node}

未在文档中说明的属性将会被自动加到根元素或form元素上。