Multi Liner

2021-07-06 11:36

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

copy

{
  "defaultTitle": "Multi-liner",
  "usingComponents": {
    "multi-liner": "mini-ali-ui/es/multi-liner/index"
  }
}

.axml

copy

<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

copy

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 `false`.
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 `false`.
maxlength	Number	Maximum length of the verification code. The default value is `140`.
focus	Boolean	An indicator of whether to get focus. The default value is `false`.
auto-height	Boolean	An indicator of whether to heighten the input box automatically with the lines increased. The default value is `false`.
show-count	Boolean	An indicator of whether to display the number of the entered words. The default value is `true`.
controlled	Boolean	An indicator of whether the multi-liner component is a controlled component. If the value is `true`, the content in the input box is controlled by setData.
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.