Multi Liner
You can use the multi-liner component to allow users to enter multiple lines of content in an input box.
Note:
The features of the multi-liner component are mainly on the basis of the textarea component. You can see textarea for reference.
Sample code
See the sample codes in different languages:
.json
{
"defaultTitle": "Multi-liner",
"usingComponents": {
"multi-liner": "mini-ali-ui/es/multi-liner/index"
}
}
.axml
<view>
<view style="margin-top: 10px;" />
<view class="title">multi-liner</view>
<multi-liner
placeholder="word count↘"
value="{{value}}"
onInput="onInput"
last="{{true}}"
auto-height="{{true}}"
controlled="{{controlled}}"/>
<view style="margin: 10px;" />
</view>
.js
Page({
data: {
value: 'content',
controlled: true,
},
onInput(e) {
this.setData({
value: e.detail.value,
});
},
});
Parameters
Property | Type | Description |
className | String | Customized class. |
inputCls | String | Customized class for the input box that uses the input component. |
last | Boolean | An indicator of whether the input box is the last one. The default value is |
value | String | Initial content in the input box. |
name | String | Component name, which is used to obtain data by submitting the form. |
placeholder | String | Placehoder. |
placeholderStyle | String | Style of the placeholder. |
placeholderClass | String | Style class of the placeholder. |
disabled | Boolean | An indicator of whether to disable the function of clearing the entered content. The default value is |
maxlength | Number | Maximum length of the verification code. The default value is |
focus | Boolean | An indicator of whether to get focus. The default value is |
auto-height | Boolean | An indicator of whether to heighten the input box automatically with the lines increased. The default value is |
show-count | Boolean | An indicator of whether to display the number of the entered words. The default value is |
controlled | Boolean | An indicator of whether the multi-liner component is a controlled component. If the value is |
onInput | (e: Object) => void | The event that is triggered when users tap the keyboard. |
onConfirm | (e: Object) => void | The event that is triggered when users tap the Done button on the keyboard. |
onFocus | (e: Object) => void | The event that is triggered when an element gets the focus. |
onBlur | (e: Object) => void | The event that is triggered when an element loses the focus. |