百度智能小程序 圖標(biāo)

icon 圖標(biāo)

解釋： 圖標(biāo) 設(shè)計(jì)資源下載

屬性說(shuō)明

type 有效值

示例 

在開(kāi)發(fā)者工具中打開(kāi)

代碼示例 1： 自定義 icon 類(lèi)型

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">自定義icon類(lèi)型</view>
        <view class="icon-area">
            <view class="icon-item" s-for="type in types.smallDefault">
                <icon type="{{type}}"/>
                <view class="icon-text"> {{type}}</view>
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        types: {
            smallDefault: ['success', 'info', 'warn', 'waiting',
            'success_no_circle', 'clear', 'search', 'personal',
            'setting', 'top', 'close', 'cancel', 'download',
            'checkboxSelected', 'radioSelected', 'radioUnselect']
        }
    }
});

.icon-area {
    margin-top: .15rem;
}

.icon-item {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: .8rem;
    height: .95rem;
    margin: .07rem;
}

.icon-text {
    margin-top: .15rem;
    width: .8rem;
    word-break: break-all;
}

設(shè)計(jì)指南

根據(jù)使用場(chǎng)景選擇適用的 icon 類(lèi)型：功能類(lèi)圖標(biāo)通常用于輔助文案內(nèi)容，用于功能入口處；狀態(tài)類(lèi)圖標(biāo)通常用來(lái)展現(xiàn)當(dāng)前狀態(tài)。

代碼示例 2： 自定義 icon 大小

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">自定義icon大小</view>
        <view class="icon-area">
            <view s-for="size in sizes" class="icon-item">
                <icon type="success" size="{{size}}"/>
                <view class="icon-text">{{size}}px</view>
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        sizes: [
            40, 34, 30, 24, 22, 18, 16
        ]
    }
});

.icon-area {
    margin-top: .15rem;
}

.icon-item {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: .8rem;
    height: .95rem;
    margin: .07rem;
}

.icon-text {
    margin-top: .15rem;
    width: .8rem;
    word-break: break-all;
}

代碼示例 3： 自定義 icon 顏色

<view class="wrap">
    <view class="card-area">
        <view class="top-description border-bottom">自定義icon顏色</view>
        <view class="icon-area">
            <view class="icon-item" s-for="color in colors">
                <icon type="success" size="25" color="{{color}}" class="icon-color" />
                <view class="icon-text">{{color}}</view>
            </view>
        </view>
    </view>
</view>

Page({
    data: {
        colors: [
            '#3388FF', '#F7534F', '#FF6600', '#000000'
        ]
    }
});

.icon-area {
    margin-top: .15rem;
}

.icon-item {
    display: inline-block;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: .8rem;
    height: .95rem;
    margin: .07rem;
}

.icon-text {
    margin-top: .15rem;
    width: .8rem;
    word-break: break-all;
}

設(shè)計(jì)指南

請(qǐng)根據(jù)當(dāng)前的語(yǔ)義選擇合適的 icon 顏色，如紅色通常表示警示，請(qǐng)謹(jǐn)慎使用。