Files
ant-design/docs/spec/cases-cn.html
T
2017-03-11 12:51:12 +08:00

120 lines
22 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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>
<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.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>
</head>
<body>
<div id="react-content">
<div class="page-wrapper" data-reactroot="" data-reactid="1" data-react-checksum="2144011706"><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="/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-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">搜索组件...</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">EN</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.8.1" style="display:block;opacity:1;" data-reactid="28">2.8.1</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="/index-cn" data-reactid="33"><span data-reactid="34">首页</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-cn" data-reactid="36"><span data-reactid="37">规范</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="38"><a href="/docs/react/introduce-cn" data-reactid="39"><span data-reactid="40">组件</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="41"><a href="/docs/pattern/navigation-cn" data-reactid="42"><span data-reactid="43">模式</span></a></li><li class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="44"><a href="/docs/resource/download-cn" data-reactid="45"><span data-reactid="46">资源</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-cn" data-reactid="52">Ant Design</a></li><li style="padding-left:24px;" class="ant-menu-item-selected ant-menu-item" role="menuitem" aria-selected="true" data-reactid="53"><a href="/docs/spec/cases-cn" data-reactid="54">实践案例</a></li><li style="padding-left:24px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="55"><a href="/docs/spec/feature-cn" data-reactid="56">基本理念</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="设计原则$Menu" aria-haspopup="true" data-reactid="58"><h4 data-reactid="59">设计原则</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="设计原则$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/principle-cn" data-reactid="62">引言</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="63"><a href="/docs/spec/proximity-cn" data-reactid="64">亲密性</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="65"><a href="/docs/spec/alignment-cn" data-reactid="66">对齐</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="67"><a href="/docs/spec/contrast-cn" data-reactid="68">对比</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="69"><a href="/docs/spec/repetition-cn" data-reactid="70">重复</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="71"><a href="/docs/spec/direct-cn" data-reactid="72">直截了当</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="73"><a href="/docs/spec/lightweight-cn" data-reactid="74">简化交互</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="75"><a href="/docs/spec/stay-cn" data-reactid="76">足不出户</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="77"><a href="/docs/spec/invitation-cn" data-reactid="78">提供邀请</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="79"><a href="/docs/spec/transition-cn" data-reactid="80">巧用过渡</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="81"><a href="/docs/spec/reaction-cn" data-reactid="82">即时反应</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-expanded="true" aria-owns="设计基础$Menu" aria-haspopup="true" data-reactid="84"><h4 data-reactid="85">设计基础</h4></div><ul class="ant-menu ant-menu-inline ant-menu-sub" role="menu" aria-activedescendant="" id="设计基础$Menu" 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-cn" data-reactid="88">字体</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="89"><a href="/docs/spec/typography-cn" data-reactid="90">排版</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="91"><a href="/docs/spec/colors-cn" data-reactid="92">色彩</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="93"><a href="/docs/spec/layout-cn" data-reactid="94">常用布局</a></li><li style="padding-left:48px;" class="ant-menu-item" role="menuitem" aria-selected="false" data-reactid="95"><a href="/docs/spec/motion-cn" data-reactid="96">组件动画</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 -->实践案例<!-- /react-text --><a class="edit-button" href="https://github.com/ant-design/ant-design/edit/master/docs/spec/cases.zh-CN.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 -->从 2015 年 4 月起,Ant Design 在蚂蚁金服中后台产品线迅速推广,对接多条业务线,覆盖系统 400 个以上。定位于中台业务的 Ant Design 兼顾专业和非专业的设计人员,具有学习成本低、上手速度快、实现效果好等特点,并且提供从界面设计到前端开发的全链路生态,可以大大提升设计和开发的效率。<!-- /react-text --></p><p data-reactid="106"><!-- react-text: 107 -->Ant Design 目前在外部也有 <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/477" data-reactid="108"><!-- react-text: 109 -->许多产品实践<!-- /react-text --></a><!-- react-text: 110 -->,如果你的公司和产品从中受益,欢迎留言。<!-- /react-text --></p><h2 id="最佳实践" data-reactid="111"><span data-reactid="112"><!-- react-text: 113 -->最佳实践<!-- /react-text --></span><a href="#最佳实践" class="anchor" data-reactid="114">#</a></h2></section><section class="markdown" data-reactid="115"><h3 id="金融云" data-reactid="116"><span data-reactid="117"><!-- react-text: 118 -->金融云<!-- /react-text --></span><a href="#金融云" class="anchor" data-reactid="119">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-with-carousel" data-reactid="120"><div class="preview-image-box" data-reactid="121"><div class="preview-image-wrapper false false" data-reactid="122"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/kBgLUfEwxlBdwUr.png" 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><p data-reactid="127"><!-- react-text: 128 -->金融云是面向金融机构深度定制的行业云计算服务;助力金融机构向新金融转型升级,推动平台、数据和技术方面的能力全面对外开放。<!-- /react-text --></p><p data-reactid="129"><a href="https://www.cloud.alipay.com/" target="_blank" class="outside-link" data-reactid="130"><!-- react-text: 131 -->立即访问<!-- /react-text --></a></p><hr data-reactid="132"/><h3 id="OceanBase-Cloud-Platform" data-reactid="133"><span data-reactid="134"><!-- react-text: 135 -->OceanBase Cloud Platform<!-- /react-text --></span><a href="#OceanBase-Cloud-Platform" class="anchor" data-reactid="136">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-with-carousel" data-reactid="137"><div class="preview-image-box" data-reactid="138"><div class="preview-image-wrapper false false" data-reactid="139"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/JUAXPZYtVyUQfGu.png" data-reactid="140"/></div><div class="preview-image-title" data-reactid="141"></div><div class="preview-image-description" data-reactid="142"></div><!-- react-empty: 143 --></div></div><p data-reactid="144"><!-- react-text: 145 -->OceanBase 是一款真正意义上的云端分布式关系型数据库,而 OceanBase Cloud Platform(云平台)是以 OceanBase 数据库为基础的云服务,可以帮助用户快速创建、使用 OB 服务。<!-- /react-text --></p><p data-reactid="146"><a href="http://oceanbase.alipay.com/" target="_blank" class="outside-link internal" data-reactid="147"><!-- react-text: 148 -->立即访问<!-- /react-text --></a></p><hr data-reactid="149"/><h3 id="服务宝体验平台" data-reactid="150"><span data-reactid="151"><!-- react-text: 152 -->服务宝体验平台<!-- /react-text --></span><a href="#服务宝体验平台" class="anchor" data-reactid="153">#</a></h3><div class="preview-image-boxes clearfix preview-image-boxes-with-carousel" data-reactid="154"><div class="preview-image-box" data-reactid="155"><div class="preview-image-wrapper false false" data-reactid="156"><img class="preview-img" src="https://os.alipayobjects.com/rmsportal/PiSveQClPzmxPTy.png" data-reactid="157"/></div><div class="preview-image-title" data-reactid="158"></div><div class="preview-image-description" data-reactid="159"></div><!-- react-empty: 160 --></div></div><p data-reactid="161"><!-- react-text: 162 -->体验平台是收集用户与公司所有的接触点(包括来电咨询/微博等渠道)的数据,通过数据挖掘和体验同学运营的方式推送给公司内部的业务团队/产品经理,并推动体验问题解决,从而实现良性运转流。<!-- /react-text --></p><p data-reactid="163"><a href="http://tiyan.alipay.com/" target="_blank" class="outside-link internal" data-reactid="164"><!-- react-text: 165 -->立即访问<!-- /react-text --></a></p><hr data-reactid="166"/><p data-reactid="167"><!-- react-text: 168 -->更多 <!-- /react-text --><a href="https://github.com/ant-design/ant-design/issues/477" data-reactid="169"><!-- react-text: 170 -->社区案例<!-- /react-text --></a><!-- react-text: 171 --><!-- /react-text --></p><style data-reactid="172">
.preview-image-boxes {
margin-top: -36px;
}
.preview-image-wrapper {
padding: 0;
background: #fff;
}
.toc {
display: none;
}
</style></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/introduce-cn" data-reactid="176">Ant Design</a><a class="next-page" href="/docs/spec/feature-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"><i class="anticon anticon-github" data-reactid="182"></i><!-- react-text: 183 --> GitHub<!-- /react-text --></h2><div data-reactid="184"><a target="_blank " href="https://github.com/ant-design/ant-design" data-reactid="185"><span data-reactid="186">仓库</span></a></div><div data-reactid="187"><a target="_blank " href="https://ant.design/docs/react/customize-theme" data-reactid="188"><span data-reactid="189">定制主题</span></a></div><div data-reactid="190"><a target="_blank " href="https://github.com/websemantics/awesome-ant-design" data-reactid="191"><span data-reactid="192">Awesome Ant Design</span></a></div></li><li data-reactid="193"><h2 data-reactid="194"><i class="anticon anticon-link" data-reactid="195"></i><!-- react-text: 196 --> <!-- /react-text --><span data-reactid="197">相关站点</span></h2><div data-reactid="198"><a href="http://mobile.ant.design" data-reactid="199">Ant Design Mobile</a><span data-reactid="200"> - </span><span data-reactid="201">移动版</span></div><div data-reactid="202"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva" data-reactid="203">dva</a><!-- react-text: 204 --> - <!-- /react-text --><span data-reactid="205">应用框架</span></div><div data-reactid="206"><a target="_blank" rel="noopener noreferrer" href="https://github.com/dvajs/dva-cli" data-reactid="207">dva-cli</a><!-- react-text: 208 --> -<!-- /react-text --><span data-reactid="209">开发工具</span></div><div data-reactid="210"><a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/" data-reactid="211">Egg</a><span data-reactid="212"> - </span><span data-reactid="213">企业级 Node 开发框架</span></div><div data-reactid="214"><a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/" data-reactid="215">AntV</a><span data-reactid="216"> - </span><span data-reactid="217">数据可视化</span></div><div data-reactid="218"><a target="_blank" rel="noopener noreferrer" href="http://motion.ant.design" data-reactid="219">Ant Motion</a><span data-reactid="220"> - </span><span data-reactid="221">设计动效</span></div><div data-reactid="222"><a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/" data-reactid="223">AntD Library</a><span data-reactid="224"> - </span><span data-reactid="225">Axure 部件库</span></div><div data-reactid="226"><a target="_blank" rel="noopener noreferrer" href="http://ux.ant.design" data-reactid="227">Ant UX</a><span data-reactid="228"> - </span><span data-reactid="229">页面逻辑素材</span></div></li><li data-reactid="230"><h2 data-reactid="231"><i class="anticon anticon-customer-service" data-reactid="232"></i><!-- react-text: 233 --> <!-- /react-text --><span data-reactid="234">社区</span></h2><div data-reactid="235"><a href="/changelog" data-reactid="236"><span data-reactid="237">更新记录</span></a></div><div data-reactid="238"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ" data-reactid="239"><span data-reactid="240">常见问题</span></a></div><div data-reactid="241"><a target="_blank" rel="noopener noreferrer" href="https://gitter.im/ant-design/ant-design" data-reactid="242"><span data-reactid="243">在线讨论</span></a></div><div data-reactid="244"><a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/issues/new" data-reactid="245"><span data-reactid="246">报告 Bug</span></a></div><div data-reactid="247"><a target="_blank" rel="noopener noreferrer" href="http://stackoverflow.com/questions/tagged/antd" data-reactid="248"><span data-reactid="249">StackOverflow</span></a></div><div data-reactid="250"><a target="_blank" rel="noopener noreferrer" href="https://segmentfault.com/t/antd" data-reactid="251"><span data-reactid="252">SegmentFault</span></a></div></li><li data-reactid="253"><h2 data-reactid="254"><!-- react-text: 255 -->Copyright © <!-- /react-text --><!-- react-text: 256 -->2017<!-- /react-text --></h2><div data-reactid="257"><span data-reactid="258">蚂蚁金服体验技术部出品</span></div><div data-reactid="259"><!-- react-text: 260 -->Built with <!-- /react-text --><a target="_blank" rel="noopener noreferrer" href="https://github.com/benjycui/bisheng" data-reactid="261">BiSheng</a></div></li></ul></footer></div>
</div>
<script src="/common.js"></script>
<script src="/index.js"></script>
</body>
</html>