weui
Version:
A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.
70 lines (69 loc) • 3.44 kB
HTML
<div class="page">
<div class="page__hd">
<h1 class="page__title">Icons</h1>
<p class="page__desc">图标</p>
</div>
<div class="page__bd page__bd_spacing">
<div class="icon-box">
<i role="img" title="成功" aria-describedby="tip_1" class="weui-icon-success weui-icon_msg"></i>
<div class="icon-box__ctn" aria-hidden="true">
<h3 class="icon-box__title">成功</h3>
<p class="icon-box__desc" id="tip_1">用于表示操作顺利达成</p>
</div>
</div>
<div class="icon-box">
<i role="img" title="提示" aria-describedby="tip_2" class="weui-icon-info weui-icon_msg"></i>
<div class="icon-box__ctn" aria-hidden="true">
<h3 class="icon-box__title">提示</h3>
<p class="icon-box__desc" id="tip_2">用于表示信息提示;也常用于缺乏条件的操作拦截,提示用户所需信息</p>
</div>
</div>
<div class="icon-box">
<i role="img" title="普通警告" class="weui-icon-warn weui-icon_msg-primary"></i>
<div class="icon-box__ctn" aria-hidden="true">
<h3 class="icon-box__title">普通警告</h3>
<p class="icon-box__desc">用于表示操作后将引起一定后果的情况</p>
</div>
</div>
<div class="icon-box">
<i role="img" title="强烈警告" class="weui-icon-warn weui-icon_msg"></i>
<div class="icon-box__ctn" aria-hidden="true">
<h3 class="icon-box__title">强烈警告</h3>
<p class="icon-box__desc">用于表示操作后将引起严重的不可挽回的后果的情况</p>
</div>
</div>
<div class="icon-box">
<i role="img" title="等待" class="weui-icon-waiting weui-icon_msg"></i>
<div class="icon-box__ctn" aria-hidden="true">
<h3 class="icon-box__title">等待</h3>
<p class="icon-box__desc">用于表示等待</p>
</div>
</div>
<!--
<div class="icon_sp_area">
<i role="img" class="weui-icon-circle"></i>
<i role="img" class="weui-icon-success"></i>
<i role="img" class="weui-icon-success-circle"></i>
<i role="img" class="weui-icon-success-no-circle"></i>
<i role="img" class="weui-icon-success-no-circle-thin"></i>
<i role="img" class="weui-icon-warn"></i>
<i role="img" class="weui-icon-info-circle"></i>
<i role="img" class="weui-icon-waiting-circle"></i>
<i role="img" class="weui-icon-download"></i>
<i role="img" class="weui-icon-search"></i>
<i role="img" class="weui-icon-cancel"></i>
<i role="img" class="weui-icon-clear"></i>
<i role="img" class="weui-icon-arrow-bold"></i>
<i role="img" class="weui-icon-arrow"></i>
</div>
<div class="icon_sp_area">
<i role="img" class="weui-icon-close"></i>
<i role="img" class="weui-icon-close-thin"></i>
<i role="img" class="weui-icon-back-arrow"></i>
<i role="img" class="weui-icon-back-arrow-thin"></i>
<i role="img" class="weui-icon-back"></i>
<i role="img" class="weui-icon-back-circle"></i>
</div>
-->
</div>
</div>