mirror of
https://github.com/wahyd4/ant-design.git
synced 2026-08-19 09:47:31 +10:00
121 lines
36 KiB
HTML
121 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="An enterprise-class UI design language and React-based implementation">
|
||
<meta name="description" content="A set of high-quality React components">
|
||
<meta name="description" content="One of best React UI library for enterprise background">
|
||
<title>Ant Design - A UI Design Language</title>
|
||
<script>
|
||
(function() {
|
||
function isLocalStorageNameSupported() {
|
||
var testKey = 'test';
|
||
var storage = window.localStorage;
|
||
try {
|
||
storage.setItem(testKey, '1');
|
||
storage.removeItem(testKey);
|
||
return true;
|
||
} catch (error) {
|
||
return false;
|
||
}
|
||
}
|
||
// 优先级提高到所有静态资源的前面，语言不对，加载其他静态资源没意义
|
||
var pathname = location.pathname;
|
||
|
||
function isZhCN(pathname) {
|
||
return /-cn\/?$/.test(pathname);
|
||
}
|
||
function getLocalizedPathname(path, zhCN) {
|
||
var pathname = path.startsWith('/') ? path : '/' + path;
|
||
if (!zhCN) { // to enUS
|
||
return /\/?index-cn/.test(pathname) ? '/' : pathname.replace('-cn', '');
|
||
} else if (pathname === '/') {
|
||
return '/index-cn';
|
||
} else if (pathname.endsWith('/')) {
|
||
return pathname.replace(/\/$/, '-cn/');
|
||
}
|
||
return pathname + '-cn';
|
||
}
|
||
|
||
// 兼容旧的 URL， `?locale=...`
|
||
var queryString = location.search;
|
||
if (queryString) {
|
||
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
|
||
if (isZhCNConfig && !isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
|
||
}
|
||
}
|
||
|
||
// 首页无视链接里面的语言设置 https://github.com/ant-design/ant-design/issues/4552
|
||
if (isLocalStorageNameSupported() && (pathname === '/' || pathname === '/index-cn')) {
|
||
var lang = (window.localStorage && localStorage.getItem('locale')) || (navigator.language.toLowerCase() === 'zh-cn' ? 'zh-CN' : 'en-US');
|
||
// safari is 'zh-cn', while other browser is 'zh-CN';
|
||
if ((lang === 'zh-CN') !== isZhCN(pathname)) {
|
||
location.pathname = getLocalizedPathname(pathname, lang === 'zh-CN');
|
||
}
|
||
}
|
||
document.documentElement.className += isZhCN(pathname) ? 'zh-cn' : 'en-us';
|
||
})()
|
||
</script>
|
||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
|
||
<link rel="stylesheet" type="text/css" href="/index-1.css"/>
|
||
<link rel="stylesheet" type="text/css" href="/index-2.css"/>
|
||
<style id="nprogress-style">
|
||
#nprogress { display: none }
|
||
</style>
|
||
<!--[if lte IE 10]>
|
||
<script
|
||
src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
if (!window.Intl) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/intl/1.0.1/??Intl.js,locale-data/jsonp/en.js,locale-data/jsonp/zh.js">' + '<' + '/script>');
|
||
}
|
||
if (!window.Promise) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"' + '>' + '<' + '/' + 'script>');
|
||
}
|
||
// Enable Google Analytics
|
||
if (!location.port) {
|
||
/* eslint-disable */
|
||
(function (i, s, o, g, r, a, m) {
|
||
i['GoogleAnalyticsObject'] = r;
|
||
i[r] = i[r] || function () {
|
||
(i[r].q = i[r].q || []).push(arguments)
|
||
}, i[r].l = 1 * new Date();
|
||
a = s.createElement(o),
|
||
m = s.getElementsByTagName(o)[0];
|
||
a.async = 1;
|
||
a.src = g;
|
||
m.parentNode.insertBefore(a, m)
|
||
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
|
||
ga('create', 'UA-72788897-1', 'auto');
|
||
ga('send', 'pageview');
|
||
/* eslint-enable */
|
||
}
|
||
</script>
|
||
<!-- Hotjar Tracking Code for ant.design -->
|
||
<script>
|
||
(function(h,o,t,j,a,r){
|
||
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
|
||
h._hjSettings={hjid:473408,hjsv:5};
|
||
a=o.getElementsByTagName('head')[0];
|
||
r=o.createElement('script');r.async=1;
|
||
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
|
||
a.appendChild(r);
|
||
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div id="react-content">
|
||
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-2145496173"><header id="header" class="clearfix" data-reactid="2"><div class="ant-row" data-reactid="3"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-5 ant-col-lg-4" data-reactid="4"><a id="logo" href="/" data-reactid="5"><img alt="logo" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg" data-reactid="6"/><span data-reactid="7">Ant Design</span></a></div><div class="ant-col-xs-0 ant-col-sm-0 ant-col-md-19 ant-col-lg-20" data-reactid="8"><div id="search-box" data-reactid="9"><div class="ant-select ant-select-combobox ant-select-enabled" data-reactid="10"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" data-reactid="11"><div class="ant-select-selection__rendered" data-reactid="12"><div style="display:block;user-select:none;-webkit-user-select:none;" unselectable="unselectable" class="ant-select-selection__placeholder" data-reactid="13">Search Components...</div><ul data-reactid="14"><li class="ant-select-search ant-select-search--inline" data-reactid="15"><div class="ant-select-search__field__wrap" data-reactid="16"><input value="" class="ant-select-search__field" data-reactid="17"/><span class="ant-select-search__field__mirror" data-reactid="18"><!-- react-text: 19 --><!-- /react-text --><!-- react-text: 20 --> <!-- /react-text --></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="21"><b data-reactid="22"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="23"><span data-reactid="24">中文</span></button><div class="ant-select-sm version ant-select ant-select-enabled" data-reactid="25"><div class="ant-select-selection
|
||
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="26"><div class="ant-select-selection__rendered" data-reactid="27"><div class="ant-select-selection-selected-value" title="2.9.3" style="display:block;opacity:1;" data-reactid="28">2.9.3</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="29"><b data-reactid="30"></b></span></div></div><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="31"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="32"><a href="/" data-reactid="33"><span data-reactid="34">Home</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="35"><a href="/docs/spec/introduce" data-reactid="36"><span data-reactid="37">Guidlines</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="38"><a href="/docs/react/introduce" data-reactid="39"><span data-reactid="40">Components</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation" data-reactid="42"><span data-reactid="43">Patterns</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download" data-reactid="45"><span data-reactid="46">Resources</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="47"><div class="ant-row" data-reactid="48"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="49"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="50"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="51"><a href="/docs/spec/introduce" data-reactid="52">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/spec/feature" data-reactid="54">Features</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/spec/cases" data-reactid="56">Cases</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="57"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="Principles$Menu" aria-haspopup="true" data-reactid="58"><h4 data-reactid="59">Principles</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="Principles$Menu" data-reactid="60"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/docs/spec/proximity" data-reactid="62">Proximity</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/spec/alignment" data-reactid="64">Alignment</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="/docs/spec/contrast" data-reactid="66">Contrast</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/docs/spec/repetition" data-reactid="68">Repetition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="69"><a href="/docs/spec/direct" data-reactid="70">Make it Direct</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/docs/spec/stay" data-reactid="72">Stay on the Page</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="73"><a href="/docs/spec/lightweight" data-reactid="74">Keep it Lightweight</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="75"><a href="/docs/spec/invitation" data-reactid="76">Provide an Invitation</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/docs/spec/transition" data-reactid="78">Use Transition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="79"><a href="/docs/spec/reaction" data-reactid="80">React Immediately</a></li></ul></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/docs/spec/colors" data-reactid="82">Colors</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="83"><a href="/docs/spec/icon" data-reactid="84">Icons</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="85"><a href="/docs/spec/font" data-reactid="86">Font</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="87"><a href="/docs/spec/copywriting" data-reactid="88">Copywriting</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/docs/spec/layout" data-reactid="90">Layout</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/docs/spec/navigation" data-reactid="92">Navigation</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/docs/spec/data-entry" data-reactid="94">Data Entry</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/docs/spec/data-display" data-reactid="96">Data Display</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="97"><a href="/docs/spec/feedback" data-reactid="98">Feedback</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="99"><a href="http://motion.ant.design" target="_blank" rel="noopener noreferrer" class="menu-item-link-outside" data-reactid="100"><!-- react-text: 101 -->Motion<!-- /react-text --><!-- react-text: 102 --> <!-- /react-text --><i class="anticon anticon-export" data-reactid="103"></i></a></li></ul></div><div class="main-container ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-lg-20" data-reactid="104"><article class="markdown" data-reactid="105"><h1 data-reactid="106"><!-- react-text: 107 -->Icons<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/icon.en-US.md" data-reactid="108"><i class="anticon anticon-edit" data-reactid="109"></i></a></h1><section class="markdown" data-reactid="110"><p data-reactid="111"><!-- react-text: 112 -->An icon is a graphical representation of meaning. Icons can be used to express actions, state, and even to categorize data. Ant Design's icons adhere to the following two principles and are designed for cross-platform consistency:<!-- /react-text --></p><ul data-reactid="113"><li data-reactid="114"><p data-reactid="115"><!-- react-text: 116 -->Graphics that are clear, intuitive, and simple enjoy a higher degree of recognition and are more easily understood<!-- /react-text --></p></li><li data-reactid="117"><p data-reactid="118"><!-- react-text: 119 -->All icons in the user interface should be consistent in style (detail design, perspective, stroke weight, etc.)<!-- /react-text --></p></li></ul></section><section class="toc" data-reactid="120"><ul data-reactid="121"><li data-reactid="122"><a class="bisheng-toc-h2" href="#System-icons" title="System icons" data-reactid="123"><!-- react-text: 124 -->System icons<!-- /react-text --></a></li><li data-reactid="125"><a class="bisheng-toc-h2" href="#Pictographs" title="Pictographs" data-reactid="126"><!-- react-text: 127 -->Pictographs<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="128"><h2 id="System-icons" data-reactid="129"><span data-reactid="130"><!-- react-text: 131 -->System icons<!-- /react-text --></span><a href="#System-icons" class="anchor" data-reactid="132">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="133"><div class="preview-image-box" data-reactid="134"><div class="preview-image-wrapper" data-reactid="135"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/gcOflMziKUIdaeLlObPj.png" data-reactid="136"/></div><div class="preview-image-title" data-reactid="137"></div><div class="preview-image-description" data-reactid="138"></div><!-- react-empty: 139 --></div></div><p data-reactid="140"><!-- react-text: 141 -->System icons are often used to represent commonly used operations, such as: save, edit, delete. The library also includes icons to represent file types and state.<!-- /react-text --></p><ul data-reactid="142"><li data-reactid="143"><p data-reactid="144"><a href="/components/icon/#Application-Icons" data-reactid="145">View the icon library</a></p></li></ul><h3 id="Key-contour-lines" data-reactid="146"><span data-reactid="147"><!-- react-text: 148 -->Key contour lines<!-- /react-text --></span><a href="#Key-contour-lines" class="anchor" data-reactid="149">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="150"><div class="preview-image-box" data-reactid="151"><div class="preview-image-wrapper" data-reactid="152"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/psKuOznmgqzqQoumcAxT.png" alt="Ant Design's grid and key contour lines" data-reactid="153"/></div><div class="preview-image-title" data-reactid="154">Ant Design's grid and key contour lines</div><div class="preview-image-description" data-reactid="155"></div><!-- react-empty: 156 --></div></div><p data-reactid="157"><!-- react-text: 158 -->Contour lines play an important role in making various icons with the same visual effect. We recommend using a template following Ant Design's contour lines when creating new icons.<!-- /react-text --></p><p data-reactid="159"><!-- react-text: 160 -->Please make all icons in the 1024×1024 resolution (16×16 64 times).<!-- /react-text --></p><ul data-reactid="161"><li data-reactid="162"><p data-reactid="163"><a href="https://zos.alipayobjects.com/rmsportal/hmNuLjCkBssupcZgYAde.png" data-reactid="164"><!-- react-text: 165 -->Illustrator tips<!-- /react-text --></a></p></li></ul><div class="preview-image-boxes clearfix" data-reactid="166"><div class="preview-image-box" style="width:50%;" data-reactid="167"><div class="preview-image-wrapper" data-reactid="168"><img class="preview-img no-padding inline" src="https://zos.alipayobjects.com/rmsportal/XzoySLGeUaMCOVymkyZq.png" alt="Square contour" data-reactid="169"/></div><div class="preview-image-title" data-reactid="170">Square contour</div><div class="preview-image-description" data-reactid="171"></div><!-- react-empty: 172 --></div><div class="preview-image-box" style="width:50%;" data-reactid="173"><div class="preview-image-wrapper" data-reactid="174"><img class="preview-img no-padding inline" src="https://zos.alipayobjects.com/rmsportal/fdWiCCIQiJIViSNhmcHo.png" alt="Horizontal rectangle contour" data-reactid="175"/></div><div class="preview-image-title" data-reactid="176">Horizontal rectangle contour</div><div class="preview-image-description" data-reactid="177"></div><!-- react-empty: 178 --></div></div><div class="preview-image-boxes clearfix" data-reactid="179"><div class="preview-image-box" style="width:50%;" data-reactid="180"><div class="preview-image-wrapper" data-reactid="181"><img class="preview-img no-padding inline" src="https://zos.alipayobjects.com/rmsportal/xEvvEZHaSlstcozKgoBd.png" alt="Circular contour" data-reactid="182"/></div><div class="preview-image-title" data-reactid="183">Circular contour</div><div class="preview-image-description" data-reactid="184"></div><!-- react-empty: 185 --></div><div class="preview-image-box" style="width:50%;" data-reactid="186"><div class="preview-image-wrapper" data-reactid="187"><img class="preview-img no-padding inline" src="https://zos.alipayobjects.com/rmsportal/GyBKoeSnRDFPvJudEgOA.png" alt="Vertical rectangle contour" data-reactid="188"/></div><div class="preview-image-title" data-reactid="189">Vertical rectangle contour</div><div class="preview-image-description" data-reactid="190"></div><!-- react-empty: 191 --></div></div><h3 id="Design-details" data-reactid="192"><span data-reactid="193"><!-- react-text: 194 -->Design details<!-- /react-text --></span><a href="#Design-details" class="anchor" data-reactid="195">#</a></h3><h4 id="Stroke-weight" data-reactid="196"><span data-reactid="197"><!-- react-text: 198 -->Stroke weight<!-- /react-text --></span><a href="#Stroke-weight" class="anchor" data-reactid="199">#</a></h4><div class="preview-image-boxes clearfix" data-reactid="200"><div class="preview-image-box" style="width:50%;" data-reactid="201"><div class="preview-image-wrapper good" data-reactid="202"><img class="preview-img no-padding good" src="https://zos.alipayobjects.com/rmsportal/WnOptTBWISNYeRpYnlcg.png" alt="Correct example" data-reactid="203"/></div><div class="preview-image-title" data-reactid="204">Correct example</div><div class="preview-image-description" data-reactid="205">Line thickness is consistently 72px</div><!-- react-empty: 206 --></div><div class="preview-image-box" style="width:50%;" data-reactid="207"><div class="preview-image-wrapper bad" data-reactid="208"><img class="preview-img no-padding bad" src="https://zos.alipayobjects.com/rmsportal/pdLgzaadpHndkqAPLNmx.png" alt="Incorrect example" data-reactid="209"/></div><div class="preview-image-title" data-reactid="210">Incorrect example</div><div class="preview-image-description" data-reactid="211">Line thickness is not uniform</div><!-- react-empty: 212 --></div></div><p data-reactid="213"><!-- react-text: 214 -->Consistent stroke weight is the key to maintaining the visual unity of the entire icon system. Ant Design's icons have a consistent line width of 72px.<!-- /react-text --></p><h4 id="Corners" data-reactid="215"><span data-reactid="216"><!-- react-text: 217 -->Corners<!-- /react-text --></span><a href="#Corners" class="anchor" data-reactid="218">#</a></h4><div class="preview-image-boxes clearfix" data-reactid="219"><div class="preview-image-box" style="width:50%;" data-reactid="220"><div class="preview-image-wrapper good" data-reactid="221"><img class="preview-img no-padding good" src="https://zos.alipayobjects.com/rmsportal/FBhKrLDoNmfgwZRbfXRi.png" alt="Correct example" data-reactid="222"/></div><div class="preview-image-title" data-reactid="223">Correct example</div><div class="preview-image-description" data-reactid="224">The icon's corners are properly rounded</div><!-- react-empty: 225 --></div><div class="preview-image-box" style="width:50%;" data-reactid="226"><div class="preview-image-wrapper bad" data-reactid="227"><img class="preview-img no-padding bad" src="https://zos.alipayobjects.com/rmsportal/NtrZWeUsfVWiOjRcWDqv.png" alt="Incorrect example" data-reactid="228"/></div><div class="preview-image-title" data-reactid="229">Incorrect example</div><div class="preview-image-description" data-reactid="230">The icon's corners are not rounded</div><!-- react-empty: 231 --></div></div><p data-reactid="232"><!-- react-text: 233 -->Consistent rounding of corners and sizing of angles is also an important element in maintaining visual unity.<!-- /react-text --></p><p data-reactid="234"><!-- react-text: 235 -->Icons that follow Ant Design should have rounded corners and edges using a 72px radius. Angles should be a multiple of 45°.<!-- /react-text --></p><h4 id="Visual-correction" data-reactid="236"><span data-reactid="237"><!-- react-text: 238 -->Visual correction<!-- /react-text --></span><a href="#Visual-correction" class="anchor" data-reactid="239">#</a></h4><div class="preview-image-boxes clearfix" data-reactid="240"><div class="preview-image-box" style="width:50%;" data-reactid="241"><div class="preview-image-wrapper good" data-reactid="242"><img class="preview-img no-padding good" src="https://zos.alipayobjects.com/rmsportal/xOFtYOCPdCHNwAzYVqSJ.png" alt="Correct example" data-reactid="243"/></div><div class="preview-image-title" data-reactid="244">Correct example</div><div class="preview-image-description" data-reactid="245">For the intricate “JPG” lettering, an outline is added for readability</div><!-- react-empty: 246 --></div><div class="preview-image-box" style="width:50%;" data-reactid="247"><div class="preview-image-wrapper bad" data-reactid="248"><img class="preview-img no-padding bad" src="https://zos.alipayobjects.com/rmsportal/pxpaZCbYqucHqnxyazta.png" alt="Incorrect example" data-reactid="249"/></div><div class="preview-image-title" data-reactid="250">Incorrect example</div><div class="preview-image-description" data-reactid="251">The text in the icon is crowded and hard to read</div><!-- react-empty: 252 --></div></div><p data-reactid="253"><!-- react-text: 254 -->In certain special cases (for example, when the icon is too compact), adjustments to line width, outlines, or other subtle changes may be made to increase readability.<!-- /react-text --></p><h3 id="Perspective" data-reactid="255"><span data-reactid="256"><!-- react-text: 257 -->Perspective<!-- /react-text --></span><a href="#Perspective" class="anchor" data-reactid="258">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="259"><div class="preview-image-box" style="width:50%;" data-reactid="260"><div class="preview-image-wrapper good" data-reactid="261"><img class="preview-img no-padding good" src="https://zos.alipayobjects.com/rmsportal/YqNpTvpCeBeRAPWSFJbz.png" alt="Correct example" data-reactid="262"/></div><div class="preview-image-title" data-reactid="263">Correct example</div><div class="preview-image-description" data-reactid="264">Maintains a flat, simple style</div><!-- react-empty: 265 --></div><div class="preview-image-box" style="width:50%;" data-reactid="266"><div class="preview-image-wrapper bad" data-reactid="267"><img class="preview-img no-padding bad" src="https://zos.alipayobjects.com/rmsportal/tqMBxDQruzWhunynJaNC.png" alt="Incorrect example" data-reactid="268"/></div><div class="preview-image-title" data-reactid="269">Incorrect example</div><div class="preview-image-description" data-reactid="270">Icons should not have depth nor varying perspectives</div><!-- react-empty: 271 --></div></div><p data-reactid="272"><!-- react-text: 273 -->Always keep a simple, flat style. Icons should not have a sense of depth nor a large amount of detail.<!-- /react-text --></p><h3 id="Naming-conventions" data-reactid="274"><span data-reactid="275"><!-- react-text: 276 -->Naming conventions<!-- /react-text --></span><a href="#Naming-conventions" class="anchor" data-reactid="277">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="278"><div class="preview-image-box" data-reactid="279"><div class="preview-image-wrapper" data-reactid="280"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/RjDmLIjLtUdoIQDIuVrw.png" data-reactid="281"/></div><div class="preview-image-title" data-reactid="282"></div><div class="preview-image-description" data-reactid="283"></div><!-- react-empty: 284 --></div></div><p data-reactid="285"><!-- react-text: 286 -->Uniform naming conventions make finding icons faster and easier. For example, icons with a surrounding outline have a uniform "-o" suffix.<!-- /react-text --></p><h3 id="Icon-sizing" data-reactid="287"><span data-reactid="288"><!-- react-text: 289 -->Icon sizing<!-- /react-text --></span><a href="#Icon-sizing" class="anchor" data-reactid="290">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="291"><div class="preview-image-box" data-reactid="292"><div class="preview-image-wrapper" data-reactid="293"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/nHFxbYpwlUHwOcrkvgGw.png" data-reactid="294"/></div><div class="preview-image-title" data-reactid="295"></div><div class="preview-image-description" data-reactid="296"></div><!-- react-empty: 297 --></div></div><p data-reactid="298"><!-- react-text: 299 -->Icons should be scaled according to the text size, according to the Ant Design specification.<!-- /react-text --></p><p data-reactid="300"><!-- react-text: 301 -->For example, icons inline with 12pt font should be 12px in size with 8px of spacing.<!-- /react-text --></p><h3 id="Color" data-reactid="302"><span data-reactid="303"><!-- react-text: 304 -->Color<!-- /react-text --></span><a href="#Color" class="anchor" data-reactid="305">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="306"><div class="preview-image-box" data-reactid="307"><div class="preview-image-wrapper" data-reactid="308"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/uYhuxxiWZlgVwdmfqUli.png" data-reactid="309"/></div><div class="preview-image-title" data-reactid="310"></div><div class="preview-image-description" data-reactid="311">Colors demonstrated - @Black = #000000、@White = #FFFFFF、@Blue-6 = #108EE9</div><!-- react-empty: 312 --></div></div><p data-reactid="313"><!-- react-text: 314 -->The color of the icon should be consistent the color of the surrounding copy, unless the icon is being used to express state (in which case it should be colored accordingly).<!-- /react-text --></p><hr data-reactid="315"/><h2 id="Pictographs" data-reactid="316"><span data-reactid="317"><!-- react-text: 318 -->Pictographs<!-- /react-text --></span><a href="#Pictographs" class="anchor" data-reactid="319">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="320"><div class="preview-image-box" data-reactid="321"><div class="preview-image-wrapper" data-reactid="322"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/tFBnAjChLpybfxtnotTx.png" data-reactid="323"/></div><div class="preview-image-title" data-reactid="324"></div><div class="preview-image-description" data-reactid="325"></div><!-- react-empty: 326 --></div></div><p data-reactid="327"><!-- react-text: 328 -->While certain icons may be used to express an action or to communicate state, other icons may act as pictographs which can be used to either communicate meaning or to help a user remember an abstract concept.<!-- /react-text --></p><blockquote data-reactid="329"><p data-reactid="330"><!-- react-text: 331 -->Note: The design principles for system icons (stroke weight, etc.) also apply to pictographs.<!-- /react-text --></p></blockquote><h3 id="Pictograph-sizing" data-reactid="332"><span data-reactid="333"><!-- react-text: 334 -->Pictograph sizing<!-- /react-text --></span><a href="#Pictograph-sizing" class="anchor" data-reactid="335">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="336"><div class="preview-image-box" data-reactid="337"><div class="preview-image-wrapper" data-reactid="338"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/ByDcWtCrgspVLqjTsFdu.png" data-reactid="339"/></div><div class="preview-image-title" data-reactid="340"></div><div class="preview-image-description" data-reactid="341"></div><!-- react-empty: 342 --></div></div><p data-reactid="343"><!-- react-text: 344 -->Conventionally, we recommend storing pictograph icons in three sizes: 32px, 48px, and 64px. That said, the physical dimensions of an icon should match the dimensions of where it is used.<!-- /react-text --></p><h3 id="Colors" data-reactid="345"><span data-reactid="346"><!-- react-text: 347 -->Colors<!-- /react-text --></span><a href="#Colors" class="anchor" data-reactid="348">#</a></h3><div class="preview-image-boxes clearfix" data-reactid="349"><div class="preview-image-box" data-reactid="350"><div class="preview-image-wrapper" data-reactid="351"><img class="preview-img no-padding" src="https://zos.alipayobjects.com/rmsportal/QfFDvJISCInKnjsshowY.png" data-reactid="352"/></div><div class="preview-image-title" data-reactid="353"></div><div class="preview-image-description" data-reactid="354"></div><!-- react-empty: 355 --></div></div><p data-reactid="356"><!-- react-text: 357 -->Pictographs should either be monochrome (using a neutral color) or consist of two colors (the neutral color + primary color), with the primary color not exceeding 40% of the pictograph's area.<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="358"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-18 ant-col-md-offset-6 ant-col-lg-20 ant-col-lg-offset-4" data-reactid="359"><section class="prev-next-nav" data-reactid="360"><a class="prev-page" href="/docs/spec/colors" data-reactid="361">Colors</a><a class="next-page" href="/docs/spec/font" data-reactid="362">Font</a></section></div></div></div><footer id="footer" data-reactid="363"><ul data-reactid="364"><li data-reactid="365"><h2 data-reactid="366"><i class="anticon anticon-github" data-reactid="367"></i><!-- react-text: 368 --> GitHub<!-- /react-text --></h2><div data-reactid="369"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="370"><span data-reactid="371">Repository</span></a></div><div data-reactid="372"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="373"><span data-reactid="374">Customize Theme</span></a></div><div data-reactid="375"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="376"><span data-reactid="377">Awesome Ant Design</span></a></div></li><li data-reactid="378"><h2 data-reactid="379"><i class="anticon anticon-link" data-reactid="380"></i><!-- react-text: 381 --> <!-- /react-text --><span data-reactid="382">Links</span></h2><div data-reactid="383"><a href="https://design.alipay.com/" data-reactid="384"><span data-reactid="385">Ant Financial Design Platform</span></a></div><div data-reactid="386"><a href="http://mobile.ant.design" data-reactid="387">Ant Design Mobile</a><span data-reactid="388"> - </span><span data-reactid="389">Mobile UI</span></div><div data-reactid="390"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="391">dva</a><!-- react-text: 392 --> - <!-- /react-text --><span data-reactid="393">Framework</span></div><div data-reactid="394"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="395">dva-cli</a><!-- react-text: 396 --> -<!-- /react-text --><span data-reactid="397">Developer Tools</span></div><div data-reactid="398"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="399">Egg</a><span data-reactid="400"> - </span><span data-reactid="401">Enterprise Node Framework</span></div><div data-reactid="402"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="403">AntV</a><span data-reactid="404"> - </span><span data-reactid="405">Data Visualization</span></div><div data-reactid="406"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="407">Ant Motion</a><span data-reactid="408"> - </span><span data-reactid="409">Motion Soluction</span></div><div data-reactid="410"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="411">AntD Library</a><span data-reactid="412"> - </span><span data-reactid="413">Axure library</span></div><div data-reactid="414"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="415">Ant UX</a><span data-reactid="416"> - </span><span data-reactid="417">Sitemap Template</span></div></li><li data-reactid="418"><h2 data-reactid="419"><i class="anticon anticon-customer-service" data-reactid="420"></i><!-- react-text: 421 --> <!-- /react-text --><span data-reactid="422">Community</span></h2><div data-reactid="423"><a href="/changelog" data-reactid="424"><span data-reactid="425">Change Log</span></a></div><div data-reactid="426"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="427"><span data-reactid="428">FAQ</span></a></div><div data-reactid="429"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="430"><span data-reactid="431">Chat Room (中文)</span></a></div><div data-reactid="432"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design-english" data-reactid="433"><span data-reactid="434">Chat Room (English)</span></a></div><div data-reactid="435"><a target="_blank" rel="noopener noreferrer" href="http://new-issue.ant.design/" data-reactid="436"><span data-reactid="437">Bug Report</span></a></div><div data-reactid="438"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="439"><span data-reactid="440">Issues</span></a></div><div data-reactid="441"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="442"><span data-reactid="443">StackOverflow</span></a></div><div data-reactid="444"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="445"><span data-reactid="446">SegmentFault</span></a></div></li><li data-reactid="447"><h2 data-reactid="448"><!-- react-text: 449 -->Copyright © <!-- /react-text --><!-- react-text: 450 -->2017<!-- /react-text --></h2><div data-reactid="451"><span data-reactid="452">Created by AIUX</span></div><div data-reactid="453"><!-- react-text: 454 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="455">BiSheng</a></div></li></ul></footer></div>
|
||
</div>
|
||
<script src="/common.js"></script>
|
||
<script src="/index.js"></script>
|
||
</body>
|
||
</html>
|