Interprétation et analyse des composants de l'applet WeChat : 4. icône-Développement de mini-programmes-php.cn

Interprétation et analyse des composants de l'applet WeChat : 4. icône

巴扎黑

Libérer： 2017-03-19 18:29:22

original

2197 Les gens l'ont consulté

icône icôneDescription du composant :

l'icône est un format d'icône utilisé pour les icônes système , icônes de logiciels, etc. Les extensions de ces icônes sont .icon, .ico. Les logiciels ou icônes courants sur le bureau Windows sont généralement au format ICON. Les icônes d'icônes sont utilisées à de nombreux endroits dans l'application, ce qui permet au programme d'exprimer facilement l'état de fonctionnement renvoyé par le programme. L'utilisateur peut voir la signification du retour de l'application en un coup d'œil, ce qui améliore l'expérience utilisateur. Les icônes d'icône sont fournies dans les composants du mini programme. Voir les détails d'utilisation présentés ci-dessous

icône icône instructions d'utilisation des composants :

Lors de l'utilisation d'une icône, utilisez la balise icon, puis disposez de l'attribut type et de l'attribut size

Pour des attributs spécifiques, voir le résumé final des attributs. Pour l'utilisation des balises, reportez-vous au code suivant.

L'exemple de code s'exécute comme suit :

Voici le code WXML :

[XML]

Vue en texte brut Copier le code

<view class="page">
    <view class="page__hd">
        <view class="page__title">Icons</view>
        <view class="page__desc">图标</view>
    </view>
    <view class="page__bd">
        <view class="icon-box">
            <icon type="success" size="93"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">成功</view>
                <view class="icon-box__desc">用于表示操作顺利达成</view>
            </view>
        </view>
        <view class="icon-box">
            <icon type="info" size="93"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">提示</view>
                <view class="icon-box__desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view>
            </view>
        </view>
        <view class="icon-box">
            <icon type="warn" size="93" color="#C9C9C9"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">普通警告</view>
                <view class="icon-box__desc">用于表示操作后将引起一定后果的情况</view>
            </view>
        </view>
        <view class="icon-box">
            <icon type="warn" size="93"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">强烈警告</view>
                <view class="icon-box__desc">用于表示操作后将引起严重的不可挽回的后果的情况</view>
            </view>
        </view>
        <view class="icon-box">
            <icon type="waiting" size="93"></icon>
            <view class="icon-box__ctn">
                <view class="icon-box__title">等待</view>
                <view class="icon-box__desc">用于表示等待</view>
            </view>
        </view>
        <view class="icon_sp_area">
            <icon type="success" size="23"></icon>
            <icon type="success_no_circle" size="23"></icon>
            <icon type="circle" size="23"></icon>
            <icon type="warn" size="23" color="#F43530"></icon>
            <icon type="download" size="23"></icon>
            <icon type="info_circle" size="23"></icon>
            <icon type="cancel" size="23"></icon>
            <icon type="search" size="20"></icon>
        </view>
    </view>
</view>

Copier après la connexion

Voici le code WXSS :

[CSS]

Vue en texte brut Copier le code

icon{
    margin-right: 13px;
}
.page__bd {
    padding-left: 40px;
    padding-right: 40px;
    text-align: left;
}
.icon-box{
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}
.icon-box__ctn{
    flex-shrink: 100;
}
.icon-box__title{
    font-size: 20px;
}
.icon-box__desc{
    margin-top: 6px;
    font-size: 12px;
    color: #888888;
}
.icon_sp_area {
    margin-top: 10px;
    text-align: left;
}

Copier après la connexion

icône icônePrincipaux attributs du composant : :

table>

Attribut

属性	类型	默认值	说明
type	String		icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	int	23	icon的大小，单位px
color	Color		icon的颜色，同css的color