Nhảy tới nội dung

textfield

Cập nhật lần cuối vào
  • textfield là component trong tini-ui với chức năng tương tự như thẻ input nhưng hỗ trợ thêm label, icon và một số tính năng mở rộng về giao diện.
  • Để sử dụng textfield, bạn cần phải cài tini-ui từ version 0.0.18 trở lên.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Cài đặt tini-ui:

$> yarn add @tiki.vn/tini-ui

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
labelClsstringCustom class cho thẻ label
labelShowBadgebooleanHiển thị badge trên label
labelIconstringIcon type hiển thị trên label, bạn có thể tim thêm các icon type tại đây
labelIconColorstring#808089Mã màu cho icon trên label
labelHelperTextstringHelper text hiển thị bên dưới labelText
labelTextstringNội dung của label
iconRightstringType của icon hiển thị bên phải input
iconLeftstringType của icon hiển thị bên trái input
iconColorstring#808089Mã màu cho icon trên input
shapestringroundedKiểu border radius của input. Hỗ trợ rounded hoặc pill. Mặc định là rounded
loadingbooleanfalseHiển thị loading skeleton cho textfield
hasErrorbooleanfalseKhi giá trị là true, input sẽ có viền màu đỏ (mã #ff424f), và xuất hiện icon thông báo lỗi
errorMsgstringHiển thị thông báo lỗi bên dưới input, cần khai báo thêm hasError=true
errorIconColorstring#ff424fMàu của icon lỗi
inputClsstringCustom class cho input
classNamestringCustom class cho textfield
typestringLoại input. Hỗ trợ các giá trị tương tự thẻ input
passwordbooleanfalseChỉ định loại input là password
namestringKhai báo name khi được sử dụng trong form, được sử dụng để lấy value cho form
valuestring''Giá trị khởi tạo
placeholderstringNội dung hiển thị trước khi người dùng nhập giá trị của input
placeholderClassstringClass name cho placeholder
placeholderStylecss styleInline style cho placeholder
disabledbooleanfalseDisable input
maxlengthnumber140Giới hạn số ký tự được nhập
focusbooleanfalseTự động focus vào input
controlledbooleanfalseKhi giá trị là true, nội dung value của input sẽ được điều khiển hoàn toàn thông qua hàm setData trong file js
onInputeventSự kiện sẽ được gọi khi nội dung của input bị thay đổi, event.detail = { value: value }
onConfirmeventSự kiện sẽ được gọi khi nhấn nút submit (return/Nhập) , event.detail = { value: value }
onFocuseventSự kiện sẽ được gọi khi input được focus , event.detail = { value: value }
onBlureventSự kiện sẽ được gọi khi input không được focus nữa , event.detail = { value: value }

Sample Code

index.json
{
"defaultTitle": "Text field",
"usingComponents": {
"list-item": "@tiki.vn/tini-ui/es/list/list-item/index",
"textfield": "@tiki.vn/tini-ui/es/textfield/index",
"block-header": "components/block-header/index",
"block-variant": "components/block-variant/index"
}
}
index.txml
<view class="page">
<block-header title="Usage"
description="Text fields are used to allow users to provide text input when the expected input is short. Input component has a range of options and supports several text formats including numbers." />

<block-variant header="Variants">
<view class="list-item">
<view class="subtitle mb-8">1. Format</view>
<view class="sub-content mb-8">Label & Input only.</view>
<view class="line" />

<view class="list-item-label">
<textfield
placeholder="With label"
onInput="onInput"
onFocus="onFocus"
onBlur="onBlur"
onConfirm="onConfirm"
labelText="Label" />
</view>
<view class="list-item-label">
<textfield placeholder="Without label" />
</view>
</view>
</block-variant>

<block-variant header="">
<view class="list-item">
<view class="subtitle mb-8">2. Shape</view>
<view class="sub-content mb-8">Rounded & Pill</view>
<view class="line" />

<view class="list-item-label">
<textfield placeholder="Click to type here" labelText="Rounded" shape="rounded" />
</view>
<view class="list-item-label">
<textfield placeholder="Click to type here" labelText="Pill" shape="pill" />
</view>
</view>
</block-variant>

<block-variant header="">
<view class="list-item">
<view class="subtitle mb-8">3. State</view>
<view class="sub-content mb-8">Filled, Disabled, Error, Skeleton loading.</view>
<view class="line" />

<view class="list-item-label">
<textfield value="{{filled}}" labelText="Label" onInput="onChangeFilled" />
</view>
<view class="list-item-label">
<textfield disabled labelText="Disabled" placeholder="Disabled" />
</view>
<view class="list-item-label">
<textfield hasError errorMsg="Error message" placeholder="Error" labelText="Label" />
</view>
<view class="list-item-label">
<textfield loading placeholder="Loading" />
</view>
</view>
</block-variant>

<block-variant header="">
<view class="list-item">
<view class="subtitle mb-8">4. Content</view>
<view class="sub-content mb-8">Text only, Leading icon, Trailing icon.</view>
<view class="line" />

<view class="list-item-label">
<textfield placeholder="Text only" />
</view>
<view class="list-item-label">
<textfield placeholder="Text with leading icon" iconLeft="placeholder" />
</view>
<view class="list-item-label">
<textfield placeholder="Text with trailing icon" iconRight="placeholder" />
</view>
</view>
</block-variant>
</view>
index.js
Page({
data: {
filled: 'Filled'
},
onInput(event) {
console.log('onInput', event);
},
onConfirm(event) {
console.log('onConfirm', event);
},
onFocus(event) {
console.log('onFocus', event);
},
onBlur(event) {
console.log('onBlur', event);
},
onChangeFilled(event) {
this.setData({ filled: event.detail.value });
}
});
index.tcss
.list-item-label {
margin-bottom: 16px;
}

.sub-content {
color: var(--text-content-secondary);
font-size: 12px;
}

.line {
margin-bottom: 8px;
}