Skip to main content

tu-label

  • tu-label là component trong tini-ui với chức năng tương tự như thẻ label nhưng hỗ trợ thêm icon, helper text và một số tính năng mở rộng về giao diện.
  • Để sử dụng tu-label, 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ả
classNamestringCustom class cho label
showBadgebooleanfalseHiển thị badge trên label
iconstringIcon type hiển thị trên label, bạn có thể tim thêm các icon type tại đây
iconColorstring#808089Mã màu cho icon trên label
textstringNội dung của label
helperTextstringHelper text hiển thị bên dưới text
loadingbooleanfalseHiển thị loading skeleton cho label
disabledbooleanfalseDisable label

Sample Code​

index.json
{
  "defaultTitle": "Label",
  "usingComponents": {
    "list-item": "@tiki.vn/tini-ui/es/list/list-item/index",
    "textfield": "@tiki.vn/tini-ui/es/textfield/index",
    "tu-label": "@tiki.vn/tini-ui/es/tu-label/index",
    "block-header": "components/block-header/index",
    "block-variant": "components/block-variant/index"
  }
}
index.txml
<view class="page">
  <block-header title="Usage" description="Usually used in input components." />

  <block-variant header="Variants">
    <view class="list-item">
      <view class="subtitle mb-8">1. Content</view>
      <view class="sub-content mb-8">With badge, with helper text, with icon</view>
      <view class="line" />

      <view class="list-item-label">
        <view class="text-desc">With badge</view>
        <tu-label showBadge text="Label" />
      </view>

      <view class="list-item-label">
        <view class="text-desc">With helper text</view>
        <tu-label helperText="Text" text="Label" />
      </view>

      <view class="list-item-label">
        <view class="text-desc">With icon</view>
        <tu-label icon="info" text="Label" />
      </view>

      <view class="list-item-label">
        <view class="text-desc">Full option</view>
        <tu-label showBadge helperText="Text" icon="info" text="Label" />
      </view>

    </view>
  </block-variant>

  <block-variant header="">
    <view class="list-item">
      <view class="subtitle mb-8">2. Statuses</view>
      <view class="sub-content mb-8">Disabled, loading</view>
      <view class="line" />

      <view class="font-bold my-medium">Disabled</view>

      <view class="list-item-label">
        <view class="text-desc">With badge</view>
        <tu-label showBadge text="Label" disabled />
      </view>

      <view class="list-item-label">
        <view class="text-desc">With helper text</view>
        <tu-label helperText="Text" text="Label" disabled />
      </view>

      <view class="list-item-label">
        <view class="text-desc">With icon</view>
        <tu-label icon="info" text="Label" disabled />
      </view>

      <view class="list-item-label">
        <view class="text-desc">Full option</view>
        <tu-label showBadge helperText="Text" icon="info" text="Label" disabled />
      </view>

      <view class="font-bold my-medium">Loading</view>

      <view class="list-item-label">
        <view class="text-desc">With badge</view>
        <tu-label showBadge text="Label" loading />
      </view>

      <view class="list-item-label">
        <view class="text-desc">With helper text</view>
        <tu-label helperText="Text" text="Label" loading />
      </view>

      <view class="list-item-label">
        <view class="text-desc">With icon</view>
        <tu-label icon="info" text="Label" loading />
      </view>

      <view class="list-item-label">
        <view class="text-desc">Full option</view>
        <tu-label showBadge helperText="Text" icon="question" text="Label" loading />
      </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;
  display: flex;
  align-items: flex-start;
}

.tu-label-icon {
  display: flex;
  align-items: center;
}

.tu-label-helper-loading {
  width: 40px;
}

.text-desc {
  color: #808089;
  width: 80px;
}

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

.line {
  margin-bottom: 8px;
}

.list-item {
  display: block;
}