icon

icon là component dùng để hiển thị icon có sẵn trong Tini App.

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

Hoặc sử dụng link
https://tiki.vn/apps/vn.tiki.miniapp.demo?page=pages/component/basic/foundation/icons/index

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

Thuộc tính

Thuộc tính	Kiểu dữ liêu	Gia trị mặc định	Bắt buộc	Mô tả
type	string		✓	Loại icon hiển thị. Nhận giá trị : [ home || search || calendar || location || setting || contact || chat || info || warning || success || plus || minus || geometry || close || close_circle || more || arrow_right || arrow_left || arrow_down || arrow_up || bookmark || app_home || phone_home || share || warning_glyph || success_glyph || close_glyph ]
size	number	24		Kích thước icon. Đơn vị tính pixel.
color	string			Màu của icon, sử dụng mã màu như trong css

Bộ icon của Tini App

---

---

---

---

Sample Code

index.txml

<view class="container">
  <view class="block">
    <text class="header">Type</text>
    <view class="list">
      <block tiki:for="{{iconType}}">
        <view class="item">
          <icon type="{{item}}" />
          <text>{{ item }}</text>
        </view>
      </block>
    </view>
  </view>

  <view class="block">
    <text class="header">Size</text>
    <view class="list">
      <block tiki:for="{{iconSize}}">
        <view class="item">
          <icon type="success_glyph" size="{{item}}" />
          <text>{{ item }}</text>
        </view>
      </block>
    </view>
  </view>

  <view class="block">
    <text class="header">Color</text>
    <view class="list">
      <block tiki:for="{{iconColor}}">
        <view class="item">
          <icon type="success_glyph" size="45" color="{{item}}" />
          <text style="color:{{item}}">{{ item }}</text>
        </view>
      </block>
    </view>
  </view>
</view>

index.tcss

.container {
  min-height: 100%;
  background-color: var(--gray20);
  padding: 16px;
}

.block {
  background-color: white;
  margin: 8px 0;
  padding: 16px;
  border-radius: var(--border-radius-rounded-4px);
}

.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.header {
  font-size: 16px;
  font-weight: 600;
}

.item {
  margin: 8px;
  justify-content: center;
  align-items: center;
}

button {
  margin-top: 8px;
  width: 100%;
}

index.js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60],
    iconColor: ['red', 'yellow', 'blue', 'green'],
    iconType: [
      'home',
      'search',
      'calendar',
      'location',
      'setting',
      'contact',
      'chat',
      'info',
      'warning',
      'success',
      'plus',
      'minus',
      'geometry',
      'close',
      'close_circle',
      'more',
      'arrow_right',
      'arrow_left',
      'arrow_down',
      'arrow_up',
      'bookmark',
      'app_home',
      'phone_home',
      'share',
      'warning_glyph',
      'success_glyph',
      'close_glyph'
    ]
  }
});