字节跳动小程序开发组件文档 icon

由 卓别林 创建, 最后一次修改 2019-08-07

图标。

属性名 类型 默认值 说明 最低版本
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

示例


开发者工具中预览

<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']
    }
})


以上内容是否对您有帮助:
二维码
建议反馈
二维码