Interpretation und Analyse der WeChat-Applet-Komponenten: 4. Symbol

SymbolsymbolKomponentenbeschreibung:

Symbol ist ein Symbolformat, das für Systemsymbole verwendet wird , Softwaresymbole usw. Die Erweiterungen solcher Symbole sind .icon, .ico. Gängige Software oder Symbole auf dem Windows-Desktop liegen im Allgemeinen im ICON-Format vor. An vielen Stellen in der Anwendung werden Symbolsymbole verwendet. Dadurch kann das Programm den vom Programm zurückgegebenen Betriebsstatus auf einen Blick erkennen, was die Benutzererfahrung verbessert Symbolsymbole finden Sie in den Komponenten des Miniprogramms. Einzelheiten zur Verwendung finden Sie unten 🎜> Anweisungen zur Komponentenverwendung:

Wenn Sie ein Symbol verwenden, verwenden Sie das Symbol-Tag und dann das Typattribut und das Größenattribut Informationen zu bestimmten Attributen finden Sie in der endgültigen Attributzusammenfassung. Informationen zur Verwendung von Tags finden Sie im folgenden Code. Der Beispielcode läuft wie folgt: Das Folgende ist der WXML-Code:

[XML]

Nur-Text-Ansicht

Code kopieren

Hier ist der WXSS-Code:

[CSS] Nur-Text-Ansicht

Code kopieren

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

SymbolsymbolHauptattribute der Komponente:

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

:

table>

Attribut

Typ

Standardwert

Beschreibung

Typ

String

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

Typ des Symbols, gültige Werte: success, success_no_circle, info, warning, waiting, cancel, download , suchen, löschen

size

int

23

Die Größe des Symbols in Pixel

Farbe

Farbe

Die Farbe des Symbols ist dieselbe wie die Farbe von CSS

Das obige ist der detaillierte Inhalt vonInterpretation und Analyse der WeChat-Applet-Komponenten: 4. Symbol. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!