Mirrors
/
ant-design
mirror of https://github.com/ant-design/ant-design.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

rewrite iconfont demo page

Browse Source
pull/473/head
afc163 9 years ago
parent a2ac7ff568
commit 3baeaeb0c3
4 changed files with 67 additions and 519 deletions
Show Stats Download Patch File Download Diff File

558
components/iconfont/index.md
Unescape Escape View File

@ -3,7 +3,6 @@
- category: Components
- chinese: 字体图标
- type: 基本
- noinstant: true
---
@ -41,486 +40,16 @@
### 一. 方向性图标
<ul class="row anticons-list clearfix">
<li>
<i class="anticon anticon-step-backward"></i>
<span class="anticon-class">step-backward</span>
</li>
<li>
<i class="anticon anticon-step-forward"></i>
<span class="anticon-class">step-forward</span>
</li>
<li>
<i class="anticon anticon-fast-backward"></i>
<span class="anticon-class">fast-backward</span>
</li>
<li>
<i class="anticon anticon-fast-forward"></i>
<span class="anticon-class">fast-forward</span>
</li>
<li>
<i class="anticon anticon-shrink"></i>
<span class="anticon-class">shrink</span>
</li>
<li>
<i class="anticon anticon-arrow-salt"></i>
<span class="anticon-class">arrow-salt</span>
</li>
<li>
<i class="anticon anticon-down"></i>
<span class="anticon-class">down</span>
</li>
<li>
<i class="anticon anticon-up"></i>
<span class="anticon-class">up</span>
</li>
<li>
<i class="anticon anticon-left"></i>
<span class="anticon-class">left</span>
</li>
<li>
<i class="anticon anticon-right"></i>
<span class="anticon-class">right</span>
</li>
<li>
<i class="anticon anticon-caret-down"></i>
<span class="anticon-class">caret-down</span>
</li>
<li>
<i class="anticon anticon-caret-up"></i>
<span class="anticon-class">caret-up</span>
</li>
<li>
<i class="anticon anticon-caret-left"></i>
<span class="anticon-class">caret-left</span>
</li>
<li>
<i class="anticon anticon-caret-right"></i>
<span class="anticon-class">caret-right</span>
</li>
<li>
<i class="anticon anticon-caret-circle-right"></i>
<span class="anticon-class">caret-circle-right</span>
</li>
<li>
<i class="anticon anticon-caret-circle-left"></i>
<span class="anticon-class">caret-circle-left</span>
</li>
<li>
<i class="anticon anticon-caret-circle-o-right"></i>
<span class="anticon-class">caret-circle-o-right</span>
</li>
<li>
<i class="anticon anticon-caret-circle-o-left"></i>
<span class="anticon-class">caret-circle-o-left</span>
</li>
<li>
<i class="anticon anticon-circle-right"></i>
<span class="anticon-class">circle-right</span>
</li>
<li>
<i class="anticon anticon-circle-left"></i>
<span class="anticon-class">circle-left</span>
</li>
<li>
<i class="anticon anticon-circle-o-right"></i>
<span class="anticon-class">circle-o-right</span>
</li>
<li>
<i class="anticon anticon-circle-o-left"></i>
<span class="anticon-class">circle-o-left</span>
</li>
<li>
<i class="anticon anticon-double-right"></i>
<span class="anticon-class">double-right</span>
</li>
<li>
<i class="anticon anticon-double-left"></i>
<span class="anticon-class">double-left</span>
</li>
<li>
<i class="anticon anticon-verticle-right"></i>
<span class="anticon-class">verticle-right</span>
</li>
<li>
<i class="anticon anticon-verticle-left"></i>
<span class="anticon-class">verticle-left</span>
</li>
<li>
<i class="anticon anticon-forward"></i>
<span class="anticon-class">forward</span>
</li>
<li>
<i class="anticon anticon-backward"></i>
<span class="anticon-class">backward</span>
</li>
<li>
<i class="anticon anticon-rollback"></i>
<span class="anticon-class">rollback</span>
</li>
<li>
<i class="anticon anticon-retweet"></i>
<span class="anticon-class">retweet</span>
</li>
</ul>
<div id="iconset-direction"></div>
### 二. 提示建议性图标
<ul class="anticons-list clearfix">
<li>
<i class="anticon anticon-question"></i>
<span class="anticon-class">question</span>
</li>
<li>
<i class="anticon anticon-question-circle-o"></i>
<span class="anticon-class">question-circle-o</span>
</li>
<li>
<i class="anticon anticon-question-circle"></i>
<span class="anticon-class">question-circle</span>
</li>
<li>
<i class="anticon anticon-plus"></i>
<span class="anticon-class">plus</span>
</li>
<li>
<i class="anticon anticon-plus-circle-o"></i>
<span class="anticon-class">plus-circle-o</span>
</li>
<li>
<i class="anticon anticon-plus-circle"></i>
<span class="anticon-class">plus-circle</span>
</li>
<li>
<i class="anticon anticon-pause"></i>
<span class="anticon-class">pause</span>
</li>
<li>
<i class="anticon anticon-pause-circle-o"></i>
<span class="anticon-class">pause-circle-o</span>
</li>
<li>
<i class="anticon anticon-pause-circle"></i>
<span class="anticon-class">pause-circle</span>
</li>
<li>
<i class="anticon anticon-minus"></i>
<span class="anticon-class">minus</span>
</li>
<li>
<i class="anticon anticon-minus-circle-o"></i>
<span class="anticon-class">minus-circle-o</span>
</li>
<li>
<i class="anticon anticon-minus-circle"></i>
<span class="anticon-class">minus-circle</span>
</li>
<li>
<i class="anticon anticon-info"></i>
<span class="anticon-class">info</span>
</li>
<li>
<i class="anticon anticon-info-circle-o"></i>
<span class="anticon-class">info-circle-o</span>
</li>
<li>
<i class="anticon anticon-info-circle"></i>
<span class="anticon-class">info-circle</span>
</li>
<li>
<i class="anticon anticon-exclamation"></i>
<span class="anticon-class">exclamation</span>
</li>
<li>
<i class="anticon anticon-exclamation-circle-o"></i>
<span class="anticon-class">exclamation-circle-o</span>
</li>
<li>
<i class="anticon anticon-exclamation-circle"></i>
<span class="anticon-class">exclamation-circle</span>
</li>
<li>
<i class="anticon anticon-cross"></i>
<span class="anticon-class">cross</span>
</li>
<li>
<i class="anticon anticon-cross-circle-o"></i>
<span class="anticon-class">cross-circle-o</span>
</li>
<li>
<i class="anticon anticon-cross-circle"></i>
<span class="anticon-class">cross-circle</span>
</li>
<li>
<i class="anticon anticon-check"></i>
<span class="anticon-class">check</span>
</li>
<li>
<i class="anticon anticon-check-circle-o"></i>
<span class="anticon-class">check-circle-o</span>
</li>
<li>
<i class="anticon anticon-check-circle"></i>
<span class="anticon-class">check-circle</span>
</li>
<li>
<i class="anticon anticon-clock-circle-o"></i>
<span class="anticon-class">clock-circle-o</span>
</li>
<li>
<i class="anticon anticon-clock-circle"></i>
<span class="anticon-class">clock-circle</span>
</li>
</ul>
<div id="iconset-hint"></div>
### 三. 网站通用图标
<ul class="anticons-list clearfix">
<li>
<i class="anticon anticon-lock"></i>
<span class="anticon-class">lock</span>
</li>
<li>
<i class="anticon anticon-unlock"></i>
<span class="anticon-class">unlock</span>
</li>
<li>
<i class="anticon anticon-android"></i>
<span class="anticon-class">android</span>
</li>
<li>
<i class="anticon anticon-apple"></i>
<span class="anticon-class">apple</span>
</li>
<li>
<i class="anticon anticon-area-chart"></i>
<span class="anticon-class">area-chart</span>
</li>
<li>
<i class="anticon anticon-bar-chart"></i>
<span class="anticon-class">bar-chart</span>
</li>
<li>
<i class="anticon anticon-bars"></i>
<span class="anticon-class">bars</span>
</li>
<li>
<i class="anticon anticon-book"></i>
<span class="anticon-class">book</span>
</li>
<li>
<i class="anticon anticon-calendar"></i>
<span class="anticon-class">calendar</span>
</li>
<li>
<i class="anticon anticon-cloud"></i>
<span class="anticon-class">cloud</span>
</li>
<li>
<i class="anticon anticon-cloud-download"></i>
<span class="anticon-class">cloud-download</span>
</li>
<li>
<i class="anticon anticon-code"></i>
<span class="anticon-class">code</span>
</li>
<li>
<i class="anticon anticon-copy"></i>
<span class="anticon-class">copy</span>
</li>
<li>
<i class="anticon anticon-credit-card"></i>
<span class="anticon-class">credit-card</span>
</li>
<li>
<i class="anticon anticon-delete"></i>
<span class="anticon-class">delete</span>
</li>
<li>
<i class="anticon anticon-desktop"></i>
<span class="anticon-class">desktop</span>
</li>
<li>
<i class="anticon anticon-download-line"></i>
<span class="anticon-class">download-line</span>
</li>
<li>
<i class="anticon anticon-edit"></i>
<span class="anticon-class">edit</span>
</li>
<li>
<i class="anticon anticon-ellipsis"></i>
<span class="anticon-class">ellipsis</span>
</li>
<li>
<i class="anticon anticon-environment"></i>
<span class="anticon-class">environment</span>
</li>
<li>
<i class="anticon anticon-file"></i>
<span class="anticon-class">file</span>
</li>
<li>
<i class="anticon anticon-file-text"></i>
<span class="anticon-class">file-text</span>
</li>
<li>
<i class="anticon anticon-folder"></i>
<span class="anticon-class">folder</span>
</li>
<li>
<i class="anticon anticon-folder-open"></i>
<span class="anticon-class">folder-open</span>
</li>
<li>
<i class="anticon anticon-github"></i>
<span class="anticon-class">github</span>
</li>
<li>
<i class="anticon anticon-hdd"></i>
<span class="anticon-class">hdd</span>
</li>
<li>
<i class="anticon anticon-frown"></i>
<span class="anticon-class">frown</span>
</li>
<li>
<i class="anticon anticon-meh"></i>
<span class="anticon-class">meh</span>
</li>
<li>
<i class="anticon anticon-inbox"></i>
<span class="anticon-class">inbox</span>
</li>
<li>
<i class="anticon anticon-laptop"></i>
<span class="anticon-class">laptop</span>
</li>
<li>
<i class="anticon anticon-appstore"></i>
<span class="anticon-class">appstore</span>
</li>
<li>
<i class="anticon anticon-line-chart"></i>
<span class="anticon-class">line-chart</span>
</li>
<li>
<i class="anticon anticon-link"></i>
<span class="anticon-class">link</span>
</li>
<li>
<i class="anticon anticon-logout"></i>
<span class="anticon-class">logout</span>
</li>
<li>
<i class="anticon anticon-mail"></i>
<span class="anticon-class">mail</span>
</li>
<li>
<i class="anticon anticon-menu-fold"></i>
<span class="anticon-class">menu-fold</span>
</li>
<li>
<i class="anticon anticon-menu-unfold"></i>
<span class="anticon-class">menu-unfold</span>
</li>
<li>
<i class="anticon anticon-mobile"></i>
<span class="anticon-class">mobile</span>
</li>
<li>
<i class="anticon anticon-notification"></i>
<span class="anticon-class">notification</span>
</li>
<li>
<i class="anticon anticon-paper-clip"></i>
<span class="anticon-class">paper-clip</span>
</li>
<li>
<i class="anticon anticon-picture"></i>
<span class="anticon-class">picture</span>
</li>
<li>
<i class="anticon anticon-pie-chart"></i>
<span class="anticon-class">pie-chart</span>
</li>
<li>
<i class="anticon anticon-poweroff"></i>
<span class="anticon-class">poweroff</span>
</li>
<li>
<i class="anticon anticon-reload"></i>
<span class="anticon-class">reload</span>
</li>
<li>
<i class="anticon anticon-search"></i>
<span class="anticon-class">search</span>
</li>
<li>
<i class="anticon anticon-setting"></i>
<span class="anticon-class">setting</span>
</li>
<li>
<i class="anticon anticon-share-alt"></i>
<span class="anticon-class">share-alt</span>
</li>
<li>
<i class="anticon anticon-shopping-cart"></i>
<span class="anticon-class">shopping-cart</span>
</li>
<li>
<i class="anticon anticon-smile"></i>
<span class="anticon-class">smile</span>
</li>
<li>
<i class="anticon anticon-tablet"></i>
<span class="anticon-class">tablet</span>
</li>
<li>
<i class="anticon anticon-tag"></i>
<span class="anticon-class">tag</span>
</li>
<li>
<i class="anticon anticon-tags"></i>
<span class="anticon-class">tags</span>
</li>
<li>
<i class="anticon anticon-to-top"></i>
<span class="anticon-class">to-top</span>
</li>
<li>
<i class="anticon anticon-upload"></i>
<span class="anticon-class">upload</span>
</li>
<li>
<i class="anticon anticon-user"></i>
<span class="anticon-class">user</span>
</li>
<li>
<i class="anticon anticon-video-camera"></i>
<span class="anticon-class">video-camera</span>
</li>
<li>
<i class="anticon anticon-windows"></i>
<span class="anticon-class">windows</span>
</li>
<li>
<i class="anticon anticon-ie"></i>
<span class="anticon-class">ie</span>
</li>
<li>
<i class="anticon anticon-chrome"></i>
<span class="anticon-class">chrome</span>
</li>
<li>
<i class="anticon anticon-home"></i>
<span class="anticon-class">home</span>
</li>
<li>
<i class="anticon anticon-loading"></i>
<span class="anticon-class">loading</span>
</li>
</ul>
<div id="iconset-common"></div>
<style>
ul.anticons-list {
margin: 20px 0;
@ -541,13 +70,12 @@ ul.anticons-list li {
position: relative;
padding: 0;
}
ul.anticons-list li:hover,
ul.anticons-list li.zeroclipboard-is-hover {
ul.anticons-list li:hover {
background-color: #4BB8FF;
color: #fff;
border-radius: 4px;
}
ul.anticons-list li.copied.zeroclipboard-is-hover {
ul.anticons-list li.copied:hover {
color: rgba(255,255,255,0.2);
}
ul.anticons-list li:after {
@ -580,28 +108,56 @@ ul.anticons-list li.copied:after {
}
</style>
<script src="../../static/ZeroClipboard.js"></script>
<script>
$(function() {
ZeroClipboard.config({
swfPath: "http://static.alipayobjects.com/zeroclipboard/2.2.0/dist/ZeroClipboard.swf"
});
// clipboard
$('.anticons-list li').each(function(i, item) {
var client = new ZeroClipboard(item);
client.on( "copy", function (event) {
client.setText('<Icon type="' + $(item).find('.anticon-class').html() + '" />');
});
client.on( "ready", function( readyEvent ) {
client.on( "aftercopy", function( event ) {
// `this` === `client`
// `event.target` === the element that was clicked
$(event.target).addClass('copied');
setTimeout(function() {
$(event.target).removeClass('copied');
}, 2000);
});
`````jsx
const Icon = antd.Icon;
const CopyableIcon = React.createClass({
getInitialState() {
return {
justCopied: false
};
},
onCopied(e) {
this.setState({ justCopied: true }, () => {
setTimeout(() => {
this.setState({ justCopied: false });
}, 1000);
});
});
},
getCopyCode(type) {
return '<Icon type="' + type + '" />';
},
render() {
return (
<Clip component="li" data-clipboard-text={this.getCopyCode(this.props.type)}
onSuccess={this.onCopied} className={this.state.justCopied ? 'copied' : ''}>
<Icon type={this.props.type} />
<span className="anticon-class">{this.props.type}</span>
</Clip>
);
}
});
const IconSet = React.createClass({
getDefaultProps() {
return {
icons: []
};
},
render() {
return (
<ul className="anticons-list clearfix">
{this.props.icons.map(type => <CopyableIcon type={type} />)}
</ul>
);
}
});
</script>
const icons1 = ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrow-salt', 'down', 'up', 'left', 'right', 'caret-down', 'caret-up', 'caret-left', 'caret-right', 'caret-circle-right', 'caret-circle-left', 'caret-circle-o-right', 'caret-circle-o-left', 'circle-right', 'circle-left', 'circle-o-right', 'circle-o-left', 'double-right', 'double-left', 'verticle-right', 'verticle-left', 'forward', 'backward', 'rollback', 'retweet'];
const icons2 = ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'cross', 'cross-circle-o', 'cross-circle', 'check', 'check-circle-o', 'check-circle', 'clock-circle-o', 'clock-circle'];
const icons3 = ['lock', 'unlock', 'android', 'apple', 'area-chart', 'bar-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'copy', 'credit-card', 'delete', 'desktop', 'download-line', 'edit', 'ellipsis', 'environment', 'file', 'file-text', 'folder', 'folder-open', 'github', 'hdd', 'frown', 'meh', 'inbox', 'laptop', 'appstore', 'line-chart', 'link', 'logout', 'mail', 'menu-fold', 'menu-unfold', 'mobile', 'notification', 'paper-clip', 'picture', 'pie-chart', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'smile', 'tablet', 'tag', 'tags', 'to-top', 'upload', 'user', 'video-camera', 'windows', 'ie', 'chrome', 'home', 'loading'];
ReactDOM.render(<IconSet icons={icons1} />, document.getElementById('iconset-direction'));
ReactDOM.render(<IconSet icons={icons2} />, document.getElementById('iconset-hint'));
ReactDOM.render(<IconSet icons={icons3} />, document.getElementById('iconset-common'));
`````

19
scripts/clip.js
Unescape Escape View File

@ -57,18 +57,13 @@ class Clip extends React.Component {
render() {
let dataAttributes = this.propsWith(/^data-/);
let attributes = this.propsWith(/^span-/, true);
return (
<span
id={this.id}
className={this.props.className || ''}
style={this.props.style || {}}
{...dataAttributes}
{...attributes}
>
{this.props.children}
</span>
);
let component = this.props.component || 'span';
return React.createElement(component, {
id: this.id,
className: this.props.className || '',
style: this.props.style || {},
...dataAttributes
}, this.props.children);
}
}

1
site/templates/layout.html
Unescape Escape View File

@ -69,6 +69,7 @@
return result;
};
</script>
<script src="https://t.alipayobjects.com/images/T1DrxhXe0mXXXXXXXX.js"></script>
{% block scripts %}{% endblock %}
</head>
<body {% block bodyAttribute %}{% endblock %}>

8
spec/colors.md
Unescape Escape View File

@ -194,9 +194,6 @@ ReactDOM.render(<ExtendPalettes />, document.getElementById('extend-palettes'));
## 色彩换算工具
<script src="https://t.alipayobjects.com/images/T1DrxhXe0mXXXXXXXX.js"></script>
<script src="https://t.alipayobjects.com/images/T1gXXjXeXeXXXXXXXX.js"></script>
> 正数为变淡 `tint` ，负数为加深 `shade`。
<div id="color-tint-shade-tool"></div>
@ -206,7 +203,6 @@ Ant Design 专用色彩换算工具，用于解析类似 `#2db7f5 tint 80%` 的
less 或 scss 语言可以直接使用 `tint(#2db7f5, 80%)` 和 `shade(#2db7f5, 80%)` 的语法。
`````jsx
let Button = antd.Button;
let InputNumber = antd.InputNumber;
@ -215,7 +211,7 @@ let Tooltip = antd.Tooltip;
let TintShadeTool = React.createClass({
getInitialState() {
return {
result: '',
result: '#2db7f5',
color: '#2db7f5',
value: 80
};
@ -257,7 +253,7 @@ let TintShadeTool = React.createClass({
<div style={{width: 60, borderRadius: 6, height:28, backgroundColor: this.state.result, display: 'inline-block', verticalAlign: 'middle', marginRight: 8}}></div>
</Tooltip>
</Clip>
<span style={{marginRight: 140, fontFamily: 'Consolas'}}>{this.state.result}</span>
<span style={{width: 188, display: 'inline-block', fontFamily: 'Consolas'}}>{this.state.result}</span>
<input className="ant-input" style={{width: 80, color: this.state.color, marginRight: 8}} value={this.state.color} onChange={this.handleChangeColor} />
<InputNumber style={{width: 70}} value={this.state.value} onChange={this.handleChangeValue} min={-100} max={100} step={5} />
<span style={{margin: '0 0 0 8px'}}>%</span>

Write Preview
Loading…
Cancel
Save