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

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

巴扎黑
巴扎黑원래의
2017-03-19 18:29:222208검색

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

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

유형


기본값 값
설명
유형 문자열 아이콘 유형, 유효한 값: 성공, 성공_no_circle, 정보, 경고, 대기 중, 취소, 다운로드, 검색, 지우기
크기 int 23 td > 아이콘 크기, 단위 px
색상 색상 아이콘 색상은 CSS 색상과 동일합니다

위 내용은 WeChat 애플릿 구성요소 해석 및 분석: 4. 아이콘의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.