home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-16 00:06:26 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
b7f7cb8708a8d55ebef372a0ed65e596cfd8d94f
ant-design/docs/spec/alignment-cn.html
T
Wei Zhu 941cd3d61b Updates
2017-01-21 00:48:58 +08:00

84 lines
20 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 - A UI 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.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>
<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>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="508222944"><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="/index-cn" 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-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">搜索组件...</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">EN</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="23"><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="24"><a href="/index-cn" data-reactid="25"><span data-reactid="26">首页</span></a></li><li class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="27"><a href="/docs/spec/introduce-cn" data-reactid="28"><span data-reactid="29">规范</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="30"><a href="/docs/react/introduce-cn" data-reactid="31"><span data-reactid="32">组件</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="33"><a href="/docs/pattern/navigation-cn" data-reactid="34"><span data-reactid="35">模式</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="36"><a href="/docs/practice/cases-cn" data-reactid="37"><span data-reactid="38">实践</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="39"><a href="/docs/resource/download-cn" data-reactid="40"><span data-reactid="41">资源</span></a></li></ul></div></div></header><div class="main-wrapper" data-reactid="42"><div class="ant-row" data-reactid="43"><div class="ant-col-xs-24 ant-col-sm-24 ant-col-md-6 ant-col-lg-4" data-reactid="44"><ul class="ant-menu ant-menu-inline aside-container ant-menu-light ant-menu-root" role="menu" aria-activedescendant="" tabindex="0" data-reactid="45"><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="46"><a href="/docs/spec/introduce-cn" data-reactid="47">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="48"><a href="/docs/spec/feature-cn" data-reactid="49">三大特性</a></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu" data-reactid="50"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="十大原则$Menu" aria-haspopup="true" data-reactid="51"><h4 data-reactid="52">十大原则</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="十大原则$Menu" data-reactid="53"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="54"><a href="/docs/spec/principle-cn" data-reactid="55">引言</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="56"><a href="/docs/spec/proximity-cn" data-reactid="57">亲密性</a></li><li style="padding-left:48px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="58"><a href="/docs/spec/alignment-cn" data-reactid="59">对齐</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="60"><a href="/docs/spec/contrast-cn" data-reactid="61">对比</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="62"><a href="/docs/spec/repetition-cn" data-reactid="63">重复</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="64"><a href="/docs/spec/direct-cn" data-reactid="65">直截了当</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="66"><a href="/docs/spec/stay-cn" data-reactid="67">足不出户</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="68"><a href="/docs/spec/lightweight-cn" data-reactid="69">简化交互</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="70"><a href="/docs/spec/invitation-cn" data-reactid="71">提供邀请</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="72"><a href="/docs/spec/transition-cn" data-reactid="73">巧用过渡</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="74"><a href="/docs/spec/reaction-cn" data-reactid="75">即时反应</a></li></ul></li><li class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" data-reactid="76"><div style="padding-left:24px;" class="ant-menu-submenu-title" aria-expanded="true" aria-owns="设计基础$Menu" aria-haspopup="true" data-reactid="77"><h4 data-reactid="78">设计基础</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="设计基础$Menu" data-reactid="79"><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="80"><a href="/docs/spec/font-cn" data-reactid="81">字体</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="82"><a href="/docs/spec/typography-cn" data-reactid="83">排版</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="84"><a href="/docs/spec/colors-cn" data-reactid="85">色彩</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="86"><a href="/docs/spec/layout-cn" data-reactid="87">常用布局</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="88"><a href="/docs/spec/motion-cn" data-reactid="89">组件动画</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="90"><article class="markdown" data-reactid="91"><h1 data-reactid="92"><!-- react-text: 93 -->对齐<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/blob/master/docs/spec/alignment.zh-CN.md" data-reactid="94"><i class="anticon anticon-edit" data-reactid="95"></i></a></h1><section class="markdown" data-reactid="96"><p data-reactid="97"><!-- react-text: 98 -->正如『格式塔学派』中的连续律（Law of Continuity）所描述的，在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线。在界面设计中，将元素进行对齐，既符合用户的认知特性，也能引导视觉流向，让用户更流畅地接收信息。<!-- /react-text --></p><blockquote data-reactid="99"><p data-reactid="100"><strong data-reactid="101"><!-- react-text: 102 --> 格式塔学派（德语：Gestalttheorie）<!-- /react-text --></strong><!-- react-text: 103 --> ：是心理学重要流派之一，兴起于 20 世纪初的德国，又称为完形心理学；主张人脑的运作原理是整体的，『整体不同于其部件的总和』。——摘自『维基百科』<!-- /react-text --></p></blockquote></section><section class="toc" data-reactid="104"><ul data-reactid="105"><li data-reactid="106"><a class="bisheng-toc-h2" href="#文案类对齐" data-reactid="107"><!-- react-text: 108 -->文案类对齐<!-- /react-text --></a></li><li data-reactid="109"><a class="bisheng-toc-h2" href="#表单类对齐" data-reactid="110"><!-- react-text: 111 -->表单类对齐<!-- /react-text --></a></li><li data-reactid="112"><a class="bisheng-toc-h2" href="#数字类对齐" data-reactid="113"><!-- react-text: 114 -->数字类对齐<!-- /react-text --></a></li></ul></section><section class="markdown" data-reactid="115"><h2 id="文案类对齐" data-reactid="116"><span data-reactid="117"><!-- react-text: 118 -->文案类对齐<!-- /react-text --></span><a href="#文案类对齐" class="anchor" data-reactid="119">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="120"><div class="preview-image-box" style="width:50%;" data-reactid="121"><div class="preview-image-wrapper good false" data-reactid="122"><img class="preview-img good" src="https://os.alipayobjects.com/rmsportal/xvmiAZAIxrEcqdP.png" alt="推荐示例" data-reactid="123"/></div><div class="preview-image-title" data-reactid="124">推荐示例</div><div class="preview-image-description" data-reactid="125">标题和正文左对齐，使用了一个视觉起点。</div><!-- react-empty: 126 --></div><div class="preview-image-box" style="width:50%;" data-reactid="127"><div class="preview-image-wrapper false bad" data-reactid="128"><img class="preview-img bad" src="https://os.alipayobjects.com/rmsportal/qvycImsTiDGVgLJ.png" alt="不推荐示例" data-reactid="129"/></div><div class="preview-image-title" data-reactid="130">不推荐示例</div><div class="preview-image-description" data-reactid="131">标题和正文使用了两个视觉起点，不推荐该种对齐方式，除非刻意强调两者区别。</div><!-- react-empty: 132 --></div></div><p data-reactid="133"><!-- react-text: 134 -->如果页面的字段或段落较短、较散时，需要确定一个统一的视觉起点。<!-- /react-text --></p><hr data-reactid="135"/><h2 id="表单类对齐" data-reactid="136"><span data-reactid="137"><!-- react-text: 138 -->表单类对齐<!-- /react-text --></span><a href="#表单类对齐" class="anchor" data-reactid="139">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="140"><div class="preview-image-box" data-reactid="141"><div class="preview-image-wrapper false false" data-reactid="142"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/DmEbaUsrpJkRyUh.png" alt="冒号对齐示例" data-reactid="143"/></div><div class="preview-image-title" data-reactid="144">冒号对齐示例</div><div class="preview-image-description" data-reactid="145"></div><!-- react-empty: 146 --></div></div><p data-reactid="147"><!-- react-text: 148 -->冒号对齐（右对齐）能让内容锁定在一定范围内，让用户眼球顺着冒号的视觉流，就能找到所有填写项，从而提高填写效率。<!-- /react-text --></p><p data-reactid="149"><!-- react-text: 150 -->更多对齐方式，请查看<!-- /react-text --><a href="/docs/pattern/form#对齐方式" data-reactid="151">『模式／表单／规格／对齐方式』</a><!-- react-text: 152 -->。<!-- /react-text --></p><hr data-reactid="153"/><h2 id="数字类对齐" data-reactid="154"><span data-reactid="155"><!-- react-text: 156 -->数字类对齐<!-- /react-text --></span><a href="#数字类对齐" class="anchor" data-reactid="157">#</a></h2><div class="preview-image-boxes clearfix" data-reactid="158"><div class="preview-image-box" style="width:50%;" data-reactid="159"><div class="preview-image-wrapper good false" data-reactid="160"><img class="preview-img good" src="https://os.alipayobjects.com/rmsportal/hCSQTEmahFyQcWk.png" alt="正确示例" data-reactid="161"/></div><div class="preview-image-title" data-reactid="162">正确示例</div><div class="preview-image-description" data-reactid="163"></div><!-- react-empty: 164 --></div><div class="preview-image-box" style="width:50%;" data-reactid="165"><div class="preview-image-wrapper false bad" data-reactid="166"><img class="preview-img bad" src="https://os.alipayobjects.com/rmsportal/FDjScmPlWFPxkxL.png" alt="错误示例" data-reactid="167"/></div><div class="preview-image-title" data-reactid="168">错误示例</div><div class="preview-image-description" data-reactid="169"></div><!-- react-empty: 170 --></div></div><p data-reactid="171"><!-- react-text: 172 -->为了快速对比数值大小，建议所有数值取相同有效位数，并且右对齐。<!-- /react-text --></p></section></article></div></div><div class="ant-row" data-reactid="173"><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="174"><section class="prev-next-nav" data-reactid="175"><a class="prev-page" href="/docs/spec/proximity-cn" data-reactid="176">亲密性</a><a class="next-page" href="/docs/spec/contrast-cn" data-reactid="177">对比</a></section></div></div></div><footer id="footer" data-reactid="178"><ul data-reactid="179"><li data-reactid="180"><h2 data-reactid="181">GitHub</h2><div data-reactid="182"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="183"><span data-reactid="184">仓库</span></a></div><div data-reactid="185"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="186">dva</a><!-- react-text: 187 --> - <!-- /react-text --><span data-reactid="188">应用框架</span></div><div data-reactid="189"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="190">dva-cli</a><!-- react-text: 191 --> -<!-- /react-text --><span data-reactid="192">脚手架</span></div><div data-reactid="193"><a target="_blank" rel="noopener noreferrer" href="http://ant-tool.github.io" data-reactid="194">ant-tool</a><!-- react-text: 195 --> - <!-- /react-text --><span data-reactid="196">开发工具</span></div></li><li data-reactid="197"><h2 data-reactid="198"><span data-reactid="199">相关站点</span></h2><div data-reactid="200"><a href="http://mobile.ant.design" data-reactid="201">Ant Design Mobile</a><span data-reactid="202"> - </span><span data-reactid="203">移动版</span></div><div data-reactid="204"><a href="https://g2.alipay.com/" data-reactid="205">G2</a><span data-reactid="206"> - </span><span data-reactid="207">数据可视化</span></div><div data-reactid="208"><a href="https://antv.alipay.com/" data-reactid="209">AntV</a><span data-reactid="210"> - </span><span data-reactid="211">数据可视化规范</span></div><div data-reactid="212"><a href="http://motion.ant.design" data-reactid="213">Ant Motion</a><span data-reactid="214"> - </span><span data-reactid="215">设计动效</span></div><div data-reactid="216"><a href="http://library.ant.design/" data-reactid="217">AntD Library</a><span data-reactid="218"> - </span><span data-reactid="219">Axure 部件库</span></div><div data-reactid="220"><a href="http://ux.ant.design" data-reactid="221">Ant UX</a><span data-reactid="222"> - </span><span data-reactid="223">页面逻辑素材</span></div></li><li data-reactid="224"><h2 data-reactid="225"><span data-reactid="226">社区</span></h2><div data-reactid="227"><a rel="noopener noreferrer" href="/changelog" data-reactid="228"><span data-reactid="229">更新记录</span></a></div><div data-reactid="230"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues" data-reactid="231"><span data-reactid="232">反馈和建议</span></a></div><div data-reactid="233"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="234"><span data-reactid="235">讨论</span></a></div><div data-reactid="236"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="237"><span data-reactid="238">报告 Bug</span></a></div></li><li data-reactid="239"><div data-reactid="240"><!-- react-text: 241 -->©2016 <!-- /react-text --><span data-reactid="242">蚂蚁金服体验技术部出品</span></div><div data-reactid="243"><!-- react-text: 244 -->Powered by <!-- /react-text --><a href="https://github.com/benjycui/bisheng" data-reactid="245">BiSheng</a></div><div style="margin-top:10px;" data-reactid="246"><span data-reactid="247">文档版本：</span><div class="ant-select-sm ant-select ant-select-enabled" data-reactid="248"><div class="ant-select-selection
ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0" data-reactid="249"><div class="ant-select-selection__rendered" data-reactid="250"><div class="ant-select-selection-selected-value" title="2.6.4" style="display:block;opacity:1;" data-reactid="251">2.6.4</div></div><span class="ant-select-arrow" style="user-select:none;-webkit-user-select:none;" unselectable="unselectable" data-reactid="252"><b data-reactid="253"></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 src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink