一个单行文本输入框,具有丰富的风格化样式和交互提示信息配置。
/**
* 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
属性来提供一个值,并使用以下回调函数来对其进行控制:
onChange
、onBlur
、onFocus
......
自动模式,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
来控制组件显示的方式,目前提供underline
和box
两种模式。
/**
* 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觉得现实世界非常复杂,需要有丰富的状态来适应各种环境,所以提供了以下几种属性来管理这些状态:
focus
和disable
属性可以聚焦或者禁用组件,
而active
、success
、warning
和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
来定义尺寸的大小,现在有small
、middle
和large
三种。
/**
* 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对于组件的风格化非常重要,你可以使用withIcon
、icon
和iconPosition
属性来对其进行控制,
如果你想在不同的状态(详见上个例子)显示不同图标,可以在那些状态对应的属性中进行修改。
/**
* 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类的接口,详情请查看属性定义。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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元素上。