home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-15 07:46:41 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
8200affa7f3ff9def0dbaaaa111157e36ccb4d31
ant-design/docs/spec/alignment.html
T
afc163 8200affa7f Updates
2016-12-23 12:01:39 +08:00

85 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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 - One Design Language</title>
<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>');
}
</script>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="-58321982"><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-6 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 style="display:block;" class="ant-col-xs-0 ant-col-sm-17 ant-col-md-18 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"></span></div></li></ul></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="19"><b data-reactid="20"></b></span></div></div></div><button type="button" class="ant-btn ant-btn-ghost ant-btn-sm lang" data-reactid="21"><span data-reactid="22"><!-- react-text: 23 -->中文<!-- /react-text --></span></button><ul class="ant-menu ant-menu-horizontal ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" id="nav" tabindex="0" data-reactid="24"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="25"><a href="/" data-reactid="26"><span data-reactid="27"><!-- react-text: 28 -->Home<!-- /react-text --></span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="29"><a href="/docs/spec/introduce" data-reactid="30"><span data-reactid="31"><!-- react-text: 32 -->Specification<!-- /react-text --></span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/react/introduce" data-reactid="34"><span data-reactid="35"><!-- react-text: 36 -->Components<!-- /react-text --></span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="37"><a href="/docs/pattern/navigation" data-reactid="38"><span data-reactid="39"><!-- react-text: 40 -->Pattern<!-- /react-text --></span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/practice/cases" data-reactid="42"><span data-reactid="43"><!-- react-text: 44 -->Practice<!-- /react-text --></span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="45"><a href="/docs/resource/download" data-reactid="46"><span data-reactid="47"><!-- react-text: 48 -->Resource<!-- /react-text --></span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="49"><div class="ant-row" data-reactid="50"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="51"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="52"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="53"><a href="/docs/spec/introduce" data-reactid="54">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/spec/feature" data-reactid="56">Features</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="57"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="true" aria-owns="1482465683287_113" 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="1482465683287_113" data-reactid="60"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="61"><a href="/docs/spec/principle" data-reactid="62">Introduction</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/spec/proximity" data-reactid="64">Proximity</a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="65"><a href="/docs/spec/alignment" data-reactid="66">Alignment</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/docs/spec/contrast" data-reactid="68">Contrast</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="69"><a href="/docs/spec/repetition" data-reactid="70">Repetition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/docs/spec/direct" data-reactid="72">Make it Direct</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="73"><a href="/docs/spec/stay" data-reactid="74">Stay on the Page</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="75"><a href="/docs/spec/lightweight" data-reactid="76">Keep it Lightweight</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/docs/spec/invitation" data-reactid="78">Provide an Invitation</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="79"><a href="/docs/spec/transition" data-reactid="80">Use Transition</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/docs/spec/reaction" data-reactid="82">React Immediately</a></li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="83"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-open="true" aria-owns="1482465683294_114" aria-haspopup="true" data-reactid="84"><h4 data-reactid="85">Design Fundamental</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="1482465683294_114" data-reactid="86"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="87"><a href="/docs/spec/font" data-reactid="88">Font</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/docs/spec/typography" data-reactid="90">Typography</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/docs/spec/colors" data-reactid="92">Colors</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/docs/spec/layout" data-reactid="94">Layout</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/docs/spec/motion" data-reactid="96">Motion</a></li></ul></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="97"><article class="markdown" data-reactid="98"><h1 data-reactid="99"><!-- react-text: 100 -->Alignment<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/alignment.en-US.md" data-reactid="101"><i class="anticon anticon-edit" data-reactid="102"></i></a></h1><section class="markdown" data-reactid="103"><p data-reactid="104"><!-- react-text: 105 -->As is described in the Law of Continuity of Gestalt psychology, in the perceptual process, people usually tend to understand the object in the way that it is firstly perceived, to let the straight lines be straight and let the curve lines be curve. In the design of interface, aligning the elements meets users’ perception, also delivers the information to users in a more smooth way.<!-- /react-text --></p><blockquote data-reactid="106"><p data-reactid="107"><strong data-reactid="108"><!-- react-text: 109 --> Gestalt psychology or gestaltism（German：Gestalttheorie）<!-- /react-text --></strong><!-- react-text: 110 --> ：Gestalttheorie is an important genre of psychology. It rose in the beginning of the 20 century in Germany.The central principle of gestalt psychology is that the mind forms a global whole with self-organizing tendencies.『The whole is other than the sum of the parts.』--Quote from Wikipedia<!-- /react-text --></p></blockquote></section><section class="toc" data-reactid="111"><ul data-reactid="112"><li data-reactid="113"><a class="bisheng-toc-h2" href="#Text-Alignment" data-reactid="114"><!-- react-text: 115 -->Text Alignment<!-- /react-text --></a></li><li data-reactid="116"><a class="bisheng-toc-h2" href="#Form-Alignment" data-reactid="117"><!-- react-text: 118 -->Form Alignment<!-- /react-text --></a></li><li data-reactid="119"><a class="bisheng-toc-h2" href="#Numbers-Alignment" data-reactid="120"><!-- react-text: 121 -->Numbers Alignment<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="122"><h2 id="Text-Alignment" data-reactid="123"><span data-reactid="124"><!-- react-text: 125 -->Text Alignment<!-- /react-text --></span><a href="#Text-Alignment" class="anchor" data-reactid="126">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="127"><div class="preview-image-box" style="width:50%;" data-reactid="128"><div class="preview-image-wrapper good false" data-reactid="129"><img class="preview-img good" src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png" alt="good example" data-reactid="130"/></div><div class="preview-image-title" data-reactid="131">good example</div><div class="preview-image-description" data-reactid="132">Align the title and text to the left; use one visual starting point.</div><!-- react-empty: 133 --></div><div class="preview-image-box" style="width:50%;" data-reactid="134"><div class="preview-image-wrapper false bad" data-reactid="135"><img class="preview-img bad" src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png" data-reactid="136"/></div><div class="preview-image-title" data-reactid="137"></div><div class="preview-image-description" data-reactid="138">The tile and the text start in different visual point. This is not recommended except the differences between title and text are emphasized. </div><!-- react-empty: 139 --></div></div><p data-reactid="140"><!-- react-text: 141 -->If the paragraphs or the length of the words are too short or too loose, then a unified visual starting point is needed.<!-- /react-text --></p><hr data-reactid="142"/><h2 id="Form-Alignment" data-reactid="143"><span data-reactid="144"><!-- react-text: 145 -->Form Alignment<!-- /react-text --></span><a href="#Form-Alignment" class="anchor" data-reactid="146">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="147"><div class="preview-image-box" data-reactid="148"><div class="preview-image-wrapper false false" data-reactid="149"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/DmEbaUsrpJkRyUh.png" alt="example of colon alignment" data-reactid="150"/></div><div class="preview-image-title" data-reactid="151">example of colon alignment</div><div class="preview-image-description" data-reactid="152"></div><!-- react-empty: 153 --></div></div><p data-reactid="154"><!-- react-text: 155 -->Colon alignment(right-align) can encircle the content into a certain range. Users can infer where the chart is through the regular arranged colon so that the speed of filling in the chart can be speeded up.<!-- /react-text --></p><p data-reactid="156"><!-- react-text: 157 -->More ways of aligning，please visit <!-- /react-text --><a href="/docs/pattern/form#对齐方式" data-reactid="158">(/docs/pattern/form#对齐方式)</a><!-- react-text: 159 -->。<!-- /react-text --></p><hr data-reactid="160"/><h2 id="Numbers-Alignment" data-reactid="161"><span data-reactid="162"><!-- react-text: 163 -->Numbers Alignment<!-- /react-text --></span><a href="#Numbers-Alignment" class="anchor" data-reactid="164">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="165"><div class="preview-image-box" style="width:50%;" data-reactid="166"><div class="preview-image-wrapper good false" data-reactid="167"><img class="preview-img good" src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png" alt="good example" data-reactid="168"/></div><div class="preview-image-title" data-reactid="169">good example</div><div class="preview-image-description" data-reactid="170"></div><!-- react-empty: 171 --></div><div class="preview-image-box" style="width:50%;" data-reactid="172"><div class="preview-image-wrapper false bad" data-reactid="173"><img class="preview-img bad" src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png" alt="bad example" data-reactid="174"/></div><div class="preview-image-title" data-reactid="175">bad example</div><div class="preview-image-description" data-reactid="176"></div><!-- react-empty: 177 --></div></div><p data-reactid="178"><!-- react-text: 179 -->To compare the numbers faster, we suggest that all numbers should keep the same digit numbers after decimal point; meanwhile all numbers should be right-aligned. 。<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="180"><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="181"><section class="prev-next-nav" data-reactid="182"><a class="prev-page" href="/docs/spec/proximity" data-reactid="183">Proximity</a><a class="next-page" href="/docs/spec/contrast" data-reactid="184">Contrast</a></section></div></div></div><footer id="footer" data-reactid="185"><ul data-reactid="186"><li data-reactid="187"><h2 data-reactid="188">GitHub</h2><div data-reactid="189"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="190"><span data-reactid="191"><!-- react-text: 192 -->Repository<!-- /react-text --></span></a></div><div data-reactid="193"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="194">dva</a><!-- react-text: 195 --> - <!-- /react-text --><span data-reactid="196"><!-- react-text: 197 -->Framework<!-- /react-text --></span></div><div data-reactid="198"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="199">dva-cli</a><!-- react-text: 200 --> -<!-- /react-text --><span data-reactid="201"><!-- react-text: 202 -->Scaffold<!-- /react-text --></span></div><div data-reactid="203"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="204">ant-tool</a><!-- react-text: 205 --> - <!-- /react-text --><span data-reactid="206"><!-- react-text: 207 -->Developer Tools<!-- /react-text --></span></div></li><li data-reactid="208"><h2 data-reactid="209"><span data-reactid="210"><!-- react-text: 211 -->Links<!-- /react-text --></span></h2><div data-reactid="212"><a href="http://mobile.ant.design" data-reactid="213">Ant Design Mobile</a><span data-reactid="214"> - </span><span data-reactid="215"><!-- react-text: 216 -->Mobile<!-- /react-text --></span></div><div data-reactid="217"><a href="https://g2.alipay.com/" data-reactid="218">G2</a><span data-reactid="219"> - </span><span data-reactid="220"><!-- react-text: 221 -->Data Visualization<!-- /react-text --></span></div><div data-reactid="222"><a href="https://antv.alipay.com/" data-reactid="223">AntV</a><span data-reactid="224"> - </span><span data-reactid="225"><!-- react-text: 226 -->Data Visualization Specification<!-- /react-text --></span></div><div data-reactid="227"><a href="http://motion.ant.design" data-reactid="228">Ant Motion</a><span data-reactid="229"> - </span><span data-reactid="230"><!-- react-text: 231 -->Motion<!-- /react-text --></span></div><div data-reactid="232"><a href="http://library.ant.design/" data-reactid="233">AntD Library</a><span data-reactid="234"> - </span><span data-reactid="235"><!-- react-text: 236 -->Axure library of Ant Design<!-- /react-text --></span></div><div data-reactid="237"><a href="http://ux.ant.design" data-reactid="238">Ant UX</a><span data-reactid="239"> - </span><span data-reactid="240"><!-- react-text: 241 -->Sitemap Template<!-- /react-text --></span></div></li><li data-reactid="242"><h2 data-reactid="243"><span data-reactid="244"><!-- react-text: 245 -->Community<!-- /react-text --></span></h2><div data-reactid="246"><a rel="noopener noreferrer" href="/changelog" data-reactid="247"><span data-reactid="248"><!-- react-text: 249 -->Change Log<!-- /react-text --></span></a></div><div data-reactid="250"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="251"><span data-reactid="252"><!-- react-text: 253 -->Feedback<!-- /react-text --></span></a></div><div data-reactid="254"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="255"><span data-reactid="256"><!-- react-text: 257 -->Chat Room<!-- /react-text --></span></a></div><div data-reactid="258"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="259"><span data-reactid="260"><!-- react-text: 261 -->Bug Report<!-- /react-text --></span></a></div></li><li data-reactid="262"><div data-reactid="263"><!-- react-text: 264 -->©2016 <!-- /react-text --><span data-reactid="265"><!-- react-text: 266 -->Created by Ant UED<!-- /react-text --></span></div><div data-reactid="267"><!-- react-text: 268 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="269">BiSheng</a></div><div style="margin-top:10px;" data-reactid="270"><span data-reactid="271"><!-- react-text: 272 -->Version: <!-- /react-text --></span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="273"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="274"><div class="ant-select-selection__rendered" data-reactid="275"><div class="ant-select-selection-selected-value" title="1.11.4" style="display:block;opacity:1;" data-reactid="276">1.11.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="277"><b data-reactid="278"></b></span></div></div></div></li></ul></footer></div>
</div>
<script>
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';
}
var queryString = location.search;
if (queryString) {
var pathname = location.pathname;
var isZhCNConfig = queryString.indexOf('zh-CN') > -1;
if (isZhCNConfig !== isZhCN(pathname)) {
location.pathname = getLocalizedPathname(pathname, isZhCNConfig)
}
}
</script>
<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>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink