Skip to main content

textfield

  • 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
trailingIconstringType của icon hiển thị bên phải input
suffixstring''Type của suffix hiển thị bên phải input button, text
prefixstring''Type của prefix hiển thị bên trái input button, text
suffixContentstring''Content của suffix hiển thị bên phải input
prefixContentstring''Content của prefix hiển thị bên trái input
leadingIconstringType 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 }
onTapLeadingIconeventSự kiện sẽ được gọi khi nhấn vào leadingIcon
onTapTrailingIconeventSự kiện sẽ được gọi khi nhấn vào trailingIcon
onTapSuffixeventSự kiện sẽ được gọi khi nhấn vào suffix (button or text)
onTapPrefixeventSự kiện sẽ được gọi khi nhấn vào prefix (button or text)
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="Placeholder" onInput="onInput" onFocus="onFocus" onBlur="onBlur" onConfirm="onConfirm"
          labelText="Label" />
      </view>
      <view class="list-item-label">
        <textfield placeholder="Placeholder" />
      </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="Placeholder" labelText="Rounded" shape="rounded" />
      </view>
      <view class="list-item-label">
        <textfield placeholder="Placeholder" labelText="Pill" shape="pill" />
      </view>
    </view>
  </block-variant>

  <block-variant header="">
    <view class="list-item">
      <view class="subtitle mb-8">3. 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="Placeholder" />
      </view>
      <view class="list-item-label">
        <textfield placeholder="Placeholder" leadingIcon="placeholder" />
      </view>
      <view class="list-item-label">
        <textfield placeholder="Placeholder" trailingIcon="placeholder" />
      </view>

      <view class="list-item-label">
        <textfield placeholder="Placeholder" leadingIcon="placeholder" trailingIcon="placeholder" />
      </view>

      <view class="list-item-label">
        <textfield placeholder="Placeholder" prefix="text" prefixContent="Label" />
      </view>

      <view class="list-item-label">
        <textfield placeholder="Placeholder" suffix="button" suffixContent="Button" />
      </view>

      <view class="list-item-label">
        <textfield placeholder="Placeholder" prefix="text" prefixContent="Label" suffix="button"
          suffixContent="Button" />
      </view>
    </view>
  </block-variant>

  <block-variant header="">
    <view class="list-item">
      <view class="subtitle mb-8">4. States & Statuses</view>
      <view class="sub-content mb-8">Empty, Hove, Focus, Typing, 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="Label" placeholder="Placeholder" />
      </view>
      <view class="list-item-label">
        <textfield hasError errorMsg="Error message" placeholder="Placeholder" labelText="Label" />
      </view>

      <view class="list-item-label">
        <textfield hasSuccess successMsg="Success message" placeholder="Placeholder" labelText="Label" />
      </view>
      <view class="list-item-label">
        <textfield loading placeholder="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;
}

.list-item {
  display: block;
}