简体中文

文本输入

一个单行文本输入框,具有丰富的风格化样式和交互提示信息配置。

基础
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/29
 */
import React, {Component} from 'react';
import {Text} 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>
          )}
        >
          <Text
            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>
          )}
        >
          <Text
            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: 17/1/2
 */
import React from 'react';
import {Text} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * View
 *
 * hana provides property `view` to decides how the component will be shown,
 * it could be `underline` and `box`.
 *
 * @cn
 * 显示类型
 *
 * hana提供了属性`view`来控制组件显示的方式,目前提供`underline`和`box`两种模式。
 */
export default () => (
  <div>
    <ExampleBlock>
      <Text
        auto
        defaultValue={'underline'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        view={'box'}
        defaultValue={'box'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <div className="flex">
        <Text
          auto
          view={'underline'}
          defaultValue={'underline'}
        />
        <Text
          auto
          view={'box'}
          defaultValue={'box'}
        />
        <Text
          auto
          view={'underline'}
          defaultValue={'underline'}
        />
      </div>
    </ExampleBlock>
  </div>
);

hana提供了属性view来控制组件显示的方式,目前提供underlinebox两种模式。

状态
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/29
 */
import React from 'react';
import {Text} 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>
      <Text
        auto
        disabled
        defaultValue={'Disabled'}
      />
    </ExampleBlock>

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

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

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

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

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

    <ExampleBlock>
      <Text
        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: 16/12/30
 */
import React from 'react';
import {Text} 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`.
 *
 * @cn
 * 尺寸
 *
 * 针对不同场景,hana提供了一个属性`size`来定义尺寸的大小,现在有`small`、`middle`和`large`三种。
 *
 */
export default () => (
  <div>
    <ExampleBlock>
      <Text
        auto
        size={'small'}
        defaultValue={'Small'}
      />
    </ExampleBlock>

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

    <ExampleBlock>
      <Text
        auto
        size={'large'}
        defaultValue={'Large'}
      />
    </ExampleBlock>
  </div>
);

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

文本类型
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/30
 */
import React from 'react';
import {Text} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';

/**
 * @en
 * Text type
 *
 * `type` property is a constraint on the input value, it is useful when you need to disable some value.
 * There are three preset types in Text component: `string`, `int` and `float`.
 *
 * Otherwise, if you want to use the text as a password, please set the property `mode` to `password`.
 *
 * @cn
 * 文本类型
 *
 * `type`属性用于对输入内容进行约束,当你需要禁用某些输入时,她非常有用,目前已支持`string`, `int` and `float`三种类型,
 *
 * 另外,如果你需要加密输入内容呢,请直接将`mode`属性设置为`password`.
 */
export default () => (
  <div>
    <ExampleBlock
      en={(
        <p>String</p>
      )}
      cn={(
        <p>字符串</p>
      )}
    >
      <Text
        auto
        defaultValue={'string'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Int</p>
      )}
      cn={(
        <p>整数</p>
      )}
    >
      <Text
        auto
        type={'int'}
        defaultValue={'0'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Float</p>
      )}
      cn={(
        <p>浮点数</p>
      )}
    >
      <Text
        auto
        type={'float'}
        defaultValue={'0.0'}
      />
    </ExampleBlock>

    <ExampleBlock
      en={(
        <p>Password</p>
      )}
      cn={(
        <p>密码</p>
      )}
    >
      <Text
        auto
        mode={'password'}
        defaultValue={'password'}
      />
    </ExampleBlock>
  </div>
);

type属性用于对输入内容进行约束,当你需要禁用某些输入时,她非常有用,目前已支持string, int and float三种类型,

另外,如果你需要加密输入内容呢,请直接将mode属性设置为password.

字符串

整数

浮点数

密码

图标
/**
 * Author: ひまわり(dtysky<dtysky@outlook.com>)
 * Github: https://github.com/dtysky
 * Created: 16/12/30
 */
import React from 'react';
import {Text, 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`, `icon` and `iconPosition`,
 * there is also a way to show different icons with states' properties.
 *
 * @cn
 * 图标
 *
 * Icon对于组件的风格化非常重要,你可以使用`withIcon`、`icon`和`iconPosition`属性来对其进行控制,
 * 如果你想在不同的状态(详见上个例子)显示不同图标,可以在那些状态对应的属性中进行修改。
 */
export default () => (
  <div>
    <ExampleBlock>
      <Text
        auto
        withIcon={false}
        defaultValue={'without icon'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        iconPosition={'before'}
        defaultValue={'Position: before'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        iconPosition={'after'}
        defaultValue={'Position: after'}
      />
    </ExampleBlock>

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

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

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

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

    <ExampleBlock>
      <Text
        auto
        icon={<p>Text</p>}
        defaultValue={'Custom icon: tag p'}
      />
    </ExampleBlock>

    <ExampleBlock>
      <Text
        auto
        view={'box'}
        icon={<p>Text</p>}
        defaultValue={'Custom icon: tag p, box'}
      />
    </ExampleBlock>
  </div>
);

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

Text

Text

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

/**
 * @en
 * Styles
 *
 * hana also provide properties to cover default style and css, check the definitions.
 *
 * @cn
 * 样式
 *
 * hana也预留了样式和CSS类的接口,详情请查看属性定义。
 */
export default () => (
  <div>
    <ExampleBlock>
      <Text
        auto
        style={{
          height: 40
        }}
        defaultValue={'style={{height: 40}}'}
      />
    </ExampleBlock>

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

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

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

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

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

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

successful style
warning style
error style

属性说明

属性名 类型 默认值 说明
auto bool false 是否工作在自动模式,如果是,组件将会自动管理它的状态。
mode enum:
 'text'
 'password'
'text' 组件的应用场景。
type enum:
 'string'
 'int'
 'float'
'string' 文本类型。
view enum:
 'box'
 'underline'
'underline' 组件的显示类型。
disabled bool false 禁用输入。
defaultValue valueType '' 在自动模式下,该值将作为组件内容的初始值。
value valueType '' 在普通模式下,用于控制组件内容的值。
size enum:
 'small'
 'middle'
 'large'
'middle' 组件显示的尺寸。
withIcon bool true 是否要显示图标。
icon node null 用于替代默认图标。
color string 默认的主题颜色。
message string 默认的提示信息。
iconPosition enum:
 'before'
 'after'
'before' 图标的位置。
focus bool 组件是否被focus。
onChange function () => {} 当输入的值发生变化时,将会被调用的回调。
(event: Event, value: valueType) => void
onSubmit function () => {} 当输入的值被提交时,将会被调用的回调。"提交",是指在输入时按下回车键或者点击图标。
(event: Event, value: valueType) => void
onBlur function () => {} 当组件被blur时,将会被调用的回调。
(event: Event, value: valueType) => void
onFocus function () => {} 当组件被focus时,将会被调用的回调。
(event: Event, value: valueType) => void
className string 根元素的class。
style object {} 根元素的样式。
inputStyle object {} 输入框的样式。
active hintType { show: false, message: '', style: {}, icon: null, color: null} 用于指定活动状态(主要是focus时)下的一些组件属性,包括样式、提示信息等。
{message: string, color: string, style: style, icon: node}
error hintType { show: false, message: '', style: {}, icon: null, color: null} 用于指定错误状态下的一些组件属性,这些属性将会替换掉默认属性。
{show: bool, message: string, color: string, style: style, icon: node to replace the default icon while in this condition}
warning hintType { show: false, message: '', style: {}, icon: null, color: null} 用于指定警告状态下的一些组件属性,这些属性将会替换掉默认属性。
{show: bool, message: string, color: string, style: style}
success hintType { show: false, message: '', style: {}, icon: null, color: null} 用于指定成功状态下的一些组件属性,这些属性将会替换掉默认属性。
{show: bool, message: string, color: string, style: style, icon: node}

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