Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
易企天创
zui
提交
db7dc080
Z
zui
项目概览
易企天创
/
zui
大约 1 年 前同步成功
通知
6
Star
0
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
37
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Z
zui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
37
Issue
37
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
db7dc080
编写于
1月 25, 2016
作者:
C
Catouse
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
* fix icon rotate not effect sometimes and update document.
上级
e7e85782
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
98 addition
and
9 deletion
+98
-9
CHANGES.md
CHANGES.md
+1
-0
docs/part/control-icon.html
docs/part/control-icon.html
+89
-0
index.html
index.html
+1
-1
src/js/doc.js
src/js/doc.js
+3
-2
src/less/basic/mixins.less
src/less/basic/mixins.less
+2
-1
src/less/controls/icons.core.less
src/less/controls/icons.core.less
+2
-5
未找到文件。
CHANGES.md
浏览文件 @
db7dc080
...
...
@@ -25,6 +25,7 @@
-
提示消息的
`show(content)`
方法增加content参数来动态改变现实的内容;
*
图标:
-
图标名称
`icon-yingyang`
更正为
`icon-yinyang`
,
`icon-check2`
更正为
`icon-checked`
;
-
修复图标旋转效果无法生效的问题;
-
更新图标字体,更改了字体的
`base height`
,现在图标和文字混合时更为自然;
*
消息框:
-
移除了消息框的边框,现在看起来更为扁平;
...
...
docs/part/control-icon.html
浏览文件 @
db7dc080
...
...
@@ -15,6 +15,10 @@
#iconsExample
li
a
:hover
{
text-decoration
:
none
}
#iconsExample
li
a
>
i
{
display
:
inline-block
;
width
:
20px
}
#iconsExample
li
:hover
{
background-color
:
#d5f1d7
;
transform
:
scale
(
1.2
);}
.table-icons-example
td
{
vertical-align
:
middle
;}
.table-icons-example
td
pre
{
margin-bottom
:
0
;}
</style>
<article>
...
...
@@ -56,8 +60,10 @@
<section>
<header><h3>
如何使用图标?
</h3></header>
<article>
<h4>
用法
</h4>
<p>
使用一个单独的
<code>
<
span
>
</code>
标签或者
<code>
<
i
>
</code>
并增加对应的CSS类名即可,用来作为图标的标签不需要包含任何文本也不应该如此。
</p>
<pre
class=
"prettyprint"
><code>
<
i class=
"
icon icon-star
"><
/i
>
</code></pre>
<h4>
注意要点
</h4>
<p>
使用图标字体有一个特大好处就是图标就是文本字符,所有能用于文本的样式都可以用于图标,这样就可以随意定义图标的大小、颜色,甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式,包含如下内容:
</p>
<ul>
<li>
图标应具备统一的颜色,如果有交互行为样式也应该保持一致;
</li>
...
...
@@ -68,6 +74,89 @@
<p>
不要将在任何控件标签上直接应用图标CSS类名,应该嵌套一个单独的
<code>
<
span
>
</code>
标签或者
<code>
<
i
>
</code>
标签。
</p>
</div>
<h4>
预设的图标尺寸
</h4>
<div
class=
"example"
>
<table
class=
"table table-icons-example"
>
<tr>
<td>
正常大小
</td>
<td><i
class=
"icon icon-star"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-star
"><
/i
>
</code></pre></td>
</tr>
<tr>
<td><code>
.icon-2x
</code></td>
<td><i
class=
"icon icon-star icon-2x"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-star
<em>
icon-2x
</em>
"><
/i
>
</code></pre></td>
</tr>
<tr>
<td><code>
.icon-3x
</code></td>
<td><i
class=
"icon icon-star icon-3x"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-star
<em>
icon-3x
</em>
"><
/i
>
</code></pre></td>
</tr>
<tr>
<td><code>
.icon-4x
</code></td>
<td><i
class=
"icon icon-star icon-4x"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-star
<em>
icon-4x
</em>
"><
/i
>
</code></pre></td>
</tr>
<tr>
<td><code>
.icon-5x
</code></td>
<td><i
class=
"icon icon-star icon-5x"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-star
<em>
icon-5x
</em>
"><
/i
>
</code></pre></td>
</tr>
</table>
</div>
<h4>
旋转
</h4>
<div
class=
"example"
>
<table
class=
"table table-icons-example"
>
<tr>
<td>
不旋转
</td>
<td><i
class=
"icon icon-2x icon-flag"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-flag
"><
/i
>
</code></pre></td>
</tr>
<tr>
<td><code>
.icon-rotate-90
</code></td>
<td><i
class=
"icon icon-2x icon-flag icon-rotate-90"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-flag
<em>
icon-rotate-90
</em>
"><
/i
>
</code></pre></td>
</tr>
<tr>
<td><code>
.icon-rotate-180
</code></td>
<td><i
class=
"icon icon-2x icon-flag icon-rotate-180"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-flag
<em>
icon-rotate-180
</em>
"><
/i
>
</code></pre></td>
</tr>
<tr>
<td><code>
.icon-rotate-270
</code></td>
<td><i
class=
"icon icon-2x icon-flag icon-rotate-270"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-flag
<em>
icon-rotate-270
</em>
"><
/i
>
</code></pre></td>
</tr>
<tr>
<td><code>
.icon-flip-horizontal
</code></td>
<td><i
class=
"icon icon-2x icon-flag icon-flip-horizontal"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-flag
<em>
icon-flip-horizontal
</em>
"><
/i
>
</code></pre></td>
</tr>
<tr>
<td><code>
.icon-flip-vertical
</code></td>
<td><i
class=
"icon icon-2x icon-flag icon-flip-vertical"
></i></td>
<td><pre><code>
<
i class=
"
icon icon-flag
<em>
icon-flip-vertical
</em>
"><
/i
>
</code></pre></td>
</tr>
</table>
</div>
<h5>
旋转动画
</h5>
<p>
使用旋转动画方便制作用于加载指示的动画效果。
</p>
<div
class=
"example"
>
<i
class=
"icon icon-spin icon-spinner-snake"
></i>
<i
class=
"icon icon-spin icon-spinner-indicator"
></i>
<i
class=
"icon icon-spin icon-circle-o-notch"
></i>
<i
class=
"icon icon-spin icon-cog"
></i>
<i
class=
"icon icon-spin icon-refresh"
></i>
<i
class=
"icon icon-spin icon-spinner"
></i>
</div>
<pre><code>
<
i class=
"
icon
<em>
icon-spin
</em>
icon-spinner-snake
"><
/i
>
</code></pre>
<pre><code>
<
i class=
"
icon
<em>
icon-spin
</em>
icon-spinner-indicator
"><
/i
>
</code></pre>
<pre><code>
<
i class=
"
icon
<em>
icon-spin
</em>
icon-circle-o-notch
"><
/i
>
</code></pre>
<pre><code>
<
i class=
"
icon
<em>
icon-spin
</em>
icon-cog
"><
/i
>
</code></pre>
<pre><code>
<
i class=
"
icon
<em>
icon-spin
</em>
icon-refresh
"><
/i
>
</code></pre>
<pre><code>
<
i class=
"
icon
<em>
icon-spin
</em>
icon-spinner
"><
/i
>
</code></pre>
</article>
</section>
...
...
index.html
浏览文件 @
db7dc080
...
...
@@ -212,7 +212,7 @@
<div
class=
"card-content section-preview icon-preview"
id=
"iconPreviewTemplate"
>
<div
class=
"icons"
><i
class=
"icon icon-10x"
></i><i
class=
"icon icon-5x"
></i><i
class=
"icon icon-2x"
></i><i
class=
"icon"
></i></div>
<h3><small><i
class=
"icon "
></i></small>
<span
class=
"name color-accent"
></span>
<small>
Unicode: \
<span
class=
"unicode"
>
f3dd
</span><span
class=
"alias"
>
· 别名:
<span
class=
"alias-values"
></span></span></small></h3>
<pre
class=
"copyable"
><code><span
class=
"tag"
>
<
i
</span><span
class=
"pln"
>
</span><span
class=
"atn"
>
class
</span><span
class=
"pun"
>
=
</span><span
class=
"atv"
>
"
icon
<
span
class=
"name"
></span
>
"
</span><span
class=
"tag"
>
><
/i
>
</span></code></pre>
<pre
class=
"copyable"
><code><span
class=
"tag"
>
<
i
</span><span
class=
"pln"
>
</span><span
class=
"atn"
>
class
</span><span
class=
"pun"
>
=
</span><span
class=
"atv"
>
"
icon
<
em
class=
"name"
></em
>
"
</span><span
class=
"tag"
>
><
/i
>
</span></code></pre>
</div>
<button
id=
"copyCodeBtn"
data-html=
"true"
data-animation=
"false"
data-toggle=
"tooltip"
data-title=
"复制代码"
type=
"button"
class=
"btn btn-copy-code"
data-tip-id=
"copyCodeTip"
><i
class=
"icon icon-copy"
></i></button>
</div>
...
...
src/js/doc.js
浏览文件 @
db7dc080
...
...
@@ -620,8 +620,9 @@
var
icon
=
$icon
.
data
(
'
icon
'
);
$search
.
data
(
'
preview
'
,
icon
.
id
);
var
id
=
'
icon-
'
+
icon
.
id
;
$preview
.
find
(
'
.icon
'
).
addClass
(
id
);
$preview
.
find
(
'
.name
'
).
text
(
id
);
var
isSpinner
=
(
icon
.
id
.
startsWith
(
'
spin
'
)
||
(
icon
.
categories
&&
icon
.
categories
.
indexOf
(
'
Spinner Icons
'
)
>
-
1
))
===
true
;
$preview
.
find
(
'
.icon
'
).
addClass
(
id
).
toggleClass
(
'
icon-spin
'
,
isSpinner
);
$preview
.
find
(
'
.name
'
).
text
(
isSpinner
?
(
'
icon-spin
'
+
id
)
:
id
);
$preview
.
find
(
'
.unicode
'
).
text
(
icon
.
code
);
if
(
icon
.
alias
&&
icon
.
alias
.
length
)
{
$preview
.
find
(
'
.alias
'
).
removeClass
(
'
hide
'
).
find
(
'
.alias-values
'
).
text
(
icon
.
alias
.
join
(
'
,
'
));
...
...
src/less/basic/mixins.less
浏览文件 @
db7dc080
...
...
@@ -978,5 +978,6 @@
.icon(@icon) {
.icon-zenicon();
content: @icon;
&:before { content: @icon; }
}
src/less/controls/icons.core.less
浏览文件 @
db7dc080
...
...
@@ -146,9 +146,6 @@ a .icon-spin {
transform: scale(1, -1);
}
// ensure rotation occurs inside anchor tags
a {
.icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
&:before { display: inline-block; }
}
.icon-rotate-90, .icon-rotate-180, .icon-rotate-270, .icon-flip-horizontal, .icon-flip-vertical {
&:before { display: inline-block; }
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录