字節(jié)跳動小程序開發(fā)組件文檔 icon

2019-08-07 10:34 更新

圖標。

屬性名 類型 默認值 說明 最低版本
type String icon 的類型,有效值:success,success_no_circle,info,warn,waiting,clear,cancel,download,search 1.0.0
size Number 24 icon 的大小,單位px 1.0.0
color String icon 的顏色 1.0.0

示例


開發(fā)者工具中預覽

<view class="ttui-flex icon-line" tt:for="{{icons}}" tt:for-item="iconline">
    <view class="ttui-flex__item icon-single-wrapper" tt:for="{{iconline}}" tt:for-item="icon">
        <label>
            <icon class="tt-icon" type="{{icon}}"></icon>
            {{icon}}
        </label>
    </view>
</view>

<view class="icon-wrapper" tt:for="{{sizes}}">
    <icon class="tt-icon" size="{{item}}" type="success"></icon>
    <view class="icon-size">{{item}}</view>
</view>

<view class="icon-wrapper" tt:for="{{colors}}">
    <icon class="tt-icon" size="36" color="{{item}}" type="success"></icon>
</view>
// page.js
Page({
    data: {
        icons: [
            ['success', 'success_no_circle'],
            ['info', 'warn'],
            ['waiting', 'clear'],
            ['cancel', 'download'],
            ['search']
        ],
        sizes: [66, 48, 36, 24],
        colors: ['#222222', '#CACACA', '', '#50ABF9']
    }
})


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號