zoukankan      html  css  js  c++  java
  • 微信小程序组件解读和分析:四、icon图标 微信开发

     
    icon图标组件说明:
    icon是一种图标格式,用于系统图标、软件图标等,这种图标扩展名为.icon、.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。在应用上面很多地方用到了icon图标,这样方便程序表述程序返回的操作状态,用户一眼就能看出应用返回的意思,提高用户体验,在小程序的组件提供了常用的icon图标,详细使用看下面介绍!
    icon图标组件用法说明:
    在使用的icon的时候,使用icon标签,然后有type属性和size属性,
    具体的属性看最后的属性总结,标签的使用参考下面的代码。


    示例代码的运行效果如下:
     

    下面是WXML代码:
    [XML] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    <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] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    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;
    }



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

    点击查看原文

  • 相关阅读:
    gcc 编译器常用的命令行参数一览
    linux下源代码分析和阅读工具比较
    Linux系统——C/C++开发工具及环境搭建
    GDB调试——经验总结
    gdb调试的艺术——Debug技巧
    命令__cp、scp(Secure Copy)
    常用shell脚本命令
    命令__查找、替换、删除
    UltraEdit 删除空行
    命令__shell数字-字符串比较
  • 原文地址:https://www.cnblogs.com/johnchai/p/6637421.html
Copyright © 2011-2022 走看看