WeChat 애플릿 구성요소 해석 및 분석: 4. 아이콘-미니 프로그램 개발-php.cn

WeChat 애플릿 구성요소 해석 및 분석: 4. 아이콘

巴扎黑

풀어 주다： 2017-03-19 18:29:22

원래의

2200명이 탐색했습니다.

아이콘 아이콘구성 요소 설명:

icon은 시스템 아이콘에 사용되는 아이콘 형식입니다. , 소프트웨어 아이콘 등. 이러한 아이콘의 확장자는 .icon, .ico입니다. Windows 바탕 화면의 일반적인 소프트웨어나 아이콘은 일반적으로 ICON 형식입니다. 아이콘 아이콘은 프로그램이 반환한 작업 상태를 프로그램이 쉽게 표현할 수 있도록 하기 위해 사용됩니다. 이는 사용자 경험을 향상시킵니다. 아이콘 아이콘은 미니 프로그램 구성요소에서 제공됩니다.

아이콘 아이콘 구성요소 사용 지침:

아이콘을 사용할 때는 아이콘 태그를 사용하고 유형 속성과 크기 속성을 갖습니다.

특정 속성에 대해서는 최종 속성 요약을 참조하세요. 태그 사용에 대해서는 다음 코드를 참조하세요.

샘플 코드는 다음과 같이 실행됩니다.

다음은 WXML 코드입니다.

[XML]

일반 텍스트 보기 코드 복사

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

로그인 후 복사

WXSS 코드는 다음과 같습니다.

[CSS ]

일반 텍스트 보기 코드 복사

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

로그인 후 복사

아이콘 아이콘 구성요소 주요 속성:

속성

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