Interpretation and analysis of WeChat applet components: 4. icon-Mini Program Development-php.cn

Interpretation and analysis of WeChat applet components: 4. icon

巴扎黑

Release： 2017-03-19 18:29:22

Original

2259 people have browsed it

icon iconComponent description:

icon is an icon format used for System icons, software icons, etc. The extensions of such icons are .icon and .ico. Common software or icons on the Windows desktop are generally in ICON format. Icon icons are used in many places in the application. This makes it convenient for the program to express the operation status returned by the program. The user can see the meaning of the application return at a glance, which improves the user experience. Commonly used icon icons are provided in the components of the mini program. See detailed usage. Introduced below!

##iconComponent usage instructions:

When using an icon, use the icon tag, and then have the type attribute and size attribute.

For specific attributes, see the final attribute summary. For the use of tags, refer to the following code.

The running effect of the sample code is as follows:

The following is the WXML code:

[XML]

Plain text view Copy 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>

Copy after login

The following is the WXSS code:

[CSS]

Plain text view Copy 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;
}

Copy after login

##icon icon component Main attributes:

# #Attributetypesize color

Type	Default value	Description
String		## Type of the icon, valid Values: success, success_no_circle, info, warn, waiting, cancel, download, search, clear
int	23	The size of the icon in px
Color		The color of the icon is the same as the color of css

The above is the detailed content of Interpretation and analysis of WeChat applet components: 4. icon. For more information, please follow other related articles on the PHP Chinese website!