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

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>

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;
}

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

Type

Valeur par défaut

Description

type

Chaîne

Type d'icône, valeurs valides : succès, success_no_circle, info, avertir, attendre, annuler, télécharger , rechercher, effacer

size

int

23

La taille de l'icône en px

couleur

Couleur

La couleur de l'icône est la même que la couleur du CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!