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

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

classNameString

Customized class.

inputClsString

Customized class for the input box that uses the input component.

lastBoolean

An indicator of whether the input box is the last one. The default value is false.

valueString

Initial content in the input box.

nameString

Component name, which is used to obtain data by submitting the form.

placeholderString

Placehoder.

placeholderStyleString

Style of the placeholder.

placeholderClassString

Style class of the placeholder.

disabledBoolean

An indicator of whether to disable the function of clearing the entered content. The default value is false.

maxlengthNumber

Maximum length of the verification code. The default value is 140.

focusBoolean

An indicator of whether to get focus. The default value is false.

auto-heightBoolean

An indicator of whether to heighten the input box automatically with the lines increased. The default value is false.

show-countBoolean

An indicator of whether to display the number of the entered words. The default value is true.

controlledBoolean

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.