home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-21 10:46:32 +10:00
Code Issues Packages Projects Releases Wiki Activity
Files
6fe3dcec87c665b8fd9cec4e8ccbb2e72d928ba1
ant-design/docs/spec/direct.html
T
afc163 0a78f4c925 Updates
2016-03-21 18:15:15 +08:00

488 lines
16 KiB
HTML
Raw Blame History

<!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="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" content="一个 UI 设计语言"/>
<title>
直截了当 - Ant Design
</title>
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
<link rel="stylesheet" href="../../dist/demo.css">
<script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js,jquery/1.11.3/jquery.min.js,bluebird/3.1.1/bluebird.min.js"></script>
<script>
(function() {
window.ANT_COMPONENTS = [];
window.InstantClickChangeFns = [];
ANT_COMPONENTS.push({
title: 'Pagination',
desc: '分页'
});
ANT_COMPONENTS.push({
title: 'Affix',
desc: '固钉'
});
ANT_COMPONENTS.push({
title: 'Badge',
desc: '徽标数'
});
ANT_COMPONENTS.push({
title: 'Breadcrumb',
desc: '面包屑'
});
ANT_COMPONENTS.push({
title: 'Button',
desc: '按钮'
});
ANT_COMPONENTS.push({
title: 'Calendar',
desc: '日历'
});
ANT_COMPONENTS.push({
title: 'Carousel',
desc: '走马灯'
});
ANT_COMPONENTS.push({
title: 'Cascader',
desc: '级联选择'
});
ANT_COMPONENTS.push({
title: 'Checkbox',
desc: '多选框'
});
ANT_COMPONENTS.push({
title: 'Collapse',
desc: '折叠面板'
});
ANT_COMPONENTS.push({
title: 'DatePicker',
desc: '日期选择框'
});
ANT_COMPONENTS.push({
title: 'Dropdown',
desc: '下拉菜单'
});
ANT_COMPONENTS.push({
title: 'Form',
desc: '表单'
});
ANT_COMPONENTS.push({
title: 'Icon',
desc: '图标'
});
ANT_COMPONENTS.push({
title: 'InputNumber',
desc: '数字输入框'
});
ANT_COMPONENTS.push({
title: 'Layout',
desc: '布局'
});
ANT_COMPONENTS.push({
title: 'Menu',
desc: '导航菜单'
});
ANT_COMPONENTS.push({
title: 'Message',
desc: '全局提示'
});
ANT_COMPONENTS.push({
title: 'Modal',
desc: '对话框'
});
ANT_COMPONENTS.push({
title: 'Notification',
desc: '通知提醒框'
});
ANT_COMPONENTS.push({
title: 'Alert',
desc: '警告提示'
});
ANT_COMPONENTS.push({
title: 'Popconfirm',
desc: '气泡确认框'
});
ANT_COMPONENTS.push({
title: 'Popover',
desc: '气泡卡片'
});
ANT_COMPONENTS.push({
title: 'Progress',
desc: '进度条'
});
ANT_COMPONENTS.push({
title: 'QueueAnim',
desc: '进出场动画'
});
ANT_COMPONENTS.push({
title: 'Radio',
desc: '单选框'
});
ANT_COMPONENTS.push({
title: 'Select',
desc: '选择器'
});
ANT_COMPONENTS.push({
title: 'Slider',
desc: '滑动输入条'
});
ANT_COMPONENTS.push({
title: 'Spin',
desc: '加载中'
});
ANT_COMPONENTS.push({
title: 'Steps',
desc: '步骤条'
});
ANT_COMPONENTS.push({
title: 'Switch',
desc: '开关'
});
ANT_COMPONENTS.push({
title: 'Table',
desc: '表格'
});
ANT_COMPONENTS.push({
title: 'Tabs',
desc: '标签页'
});
ANT_COMPONENTS.push({
title: 'Tag',
desc: '标签'
});
ANT_COMPONENTS.push({
title: 'TimePicker',
desc: '时间选择框'
});
ANT_COMPONENTS.push({
title: 'Timeline',
desc: '时间轴'
});
ANT_COMPONENTS.push({
title: 'Tooltip',
desc: '文字提示'
});
ANT_COMPONENTS.push({
title: 'Transfer',
desc: '穿梭框'
});
ANT_COMPONENTS.push({
title: 'Tree',
desc: '树形控件'
});
ANT_COMPONENTS.push({
title: 'TreeSelect',
desc: '树选择'
});
ANT_COMPONENTS.push({
title: 'Upload',
desc: '上传'
});
// fix ie location origin
// http://stackoverflow.com/questions/22564167/window-location-origin-gives-wrong-value-when-using-ie
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//"
+ window.location.hostname
+ (window.location.port ? ':' + window.location.port : '');
}
var i = location.pathname.split('/').lastIndexOf('ant-design');
if (i > 0) {
window.rootUrl = location.origin + location.pathname.split('/').slice(0, 2+1).join('/');
} else {
window.rootUrl = location.origin;
}
})();
</script>
<script>
window.antdVersion = {
latest: '0.12.12'
};
</script>
<script src="../../dist/demo.js"></script>
</head>
<body >
<header id="header" class="clearfix">
<a class="logo" href="../..">
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
Ant Design
</a>
<div class="search">
<div id="autoComplete"></div>
</div>
<nav class="nav" tabindex="-1">
<span class="bar"></span>
<ul>
<li class="">
<a href="../..">首页</a>
</li>
<li class="">
<a href="../practice/cases">实践</a>
</li>
<li class="">
<a href="../pattern/navigation">模式</a>
</li>
<li class="">
<a href="../react/introduce">组件</a>
</li>
<li class="current">
<a href="./introduce">语言</a>
</li>
<li class="">
<a href="../resource/download">资源</a>
</li>
</ul>
</nav>
<div class="nav-phone-icon"></div>
</header>
<div class="main-wrapper">
<aside class="aside-container">
<ul>
<li class="">
<a href="introduce"
class="">
Ant Design
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="feature"
class="">
三大特性
<span class="chinese"></span>
</a>
</li>
<li open="open">
<h4>十大原则</h4>
<ul class="">
<li class="">
<a href="principle"
class="">
引言
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="proximity"
class="">
亲密性
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="alignment"
class="">
对齐
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="contrast"
class="">
对比
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="repetition"
class="">
重复
<span class="chinese"></span>
</a>
</li>
<li class="current">
<a href="direct"
class="">
直截了当
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="lightweight"
class="">
简化交互
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="stay"
class="">
足不出户
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="invitation"
class="">
提供邀请
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="transition"
class="">
巧用过渡
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="reaction"
class="">
即时反应
<span class="chinese"></span>
</a>
</li>
</ul>
</li>
<li open="open">
<h4>设计基础</h4>
<ul class="">
<li class="">
<a href="font"
class="">
字体
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="typography"
class="">
排版
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="colors"
class="">
色彩
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="layout/"
class="">
常用布局
<span class="chinese"></span>
</a>
</li>
</ul>
</li>
<li open="open">
<h4>动画</h4>
<ul class="">
<li class="">
<a href="easing"
class="">
自然运动
<span class="chinese"></span>
</a>
</li>
<li class="">
<a href="motion"
class="">
组件动画
<span class="chinese"></span>
</a>
</li>
</ul>
</li>
</ul>
</aside>
<section class="main-container">
<article class="markdown">
<h1>直截了当 <span class="subtitle">Make it Direct</span></h1>
<p>正如 Alan Cooper 所言：『需要在哪里输出，就要允许在哪里输入』。这就是直接操作的原理。eg：不要为了编辑内容而打开另一个页面，应该直接在上下文中实现编辑。</p>
<div class="toc"><ul><li><a href="#页内编辑">页内编辑</a></li><li><a href="#利用拖放">利用拖放</a></li><li><a href="#直接选择（敬请期待）"><span class="waiting">直接选择（敬请期待）</span></a></li></ul></div>
<h2 id="页内编辑">页内编辑<a href="#页内编辑" class="anchor">#</a> </h2><p><img class="preview-img" align="right" alt="单击编辑示例" description="状态一：普通的浏览模式，不区分可编辑行和不可编辑行；<br>
状态二：鼠标悬停时，『指针』变为『手型』，编辑区域底色变黄，出现『Tooltips』提示单击编辑；<br>
状态三：鼠标点击后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/PmVuUUKeamHdveT.png"></p>
<p>单字段行内编辑</p>
<p>当『易读性』远比『易编辑性』重要时，可以使用『单击编辑』。</p>
<p><br></p>
<p><img class="preview-img" align="right" alt="文字链/图标编辑示例" description="状态一：在可编辑行附近出现文字链/图标；<br>
状态二：鼠标点击『编辑』后，出现『输入框』、『确定』、『取消』表单元素，同时光标定位在『输入框』中。" src="https://os.alipayobjects.com/rmsportal/ZmRlahliUbCurhu.png"></p>
<p>当『易读性』为主，同时又要突出操作行的『易编辑性』时，可使用『文字链/图标编辑』。</p>
<p><br></p>
<p><img class="preview-img" align="right" alt="多字段行内编辑示例" description="编辑模式在不破坏整体性的前提下，可扩大空间，以便放下『输入框』等表单元素；其中，在 Table 中进行编辑模式切换时，需要保证每列的不跳动。" src="https://os.alipayobjects.com/rmsportal/hGXGErepBnrwqzj.png"></p>
<p>多字段行内编辑</p>
<blockquote>
<p>注：在『多字段行内编辑』的情况下，显示的内容和编辑时所需的字段会存在比较大的差异，所以更需要『巧用过渡』原则中的<a href="../spec/transition#解释刚刚发生了什么">『解释刚刚发生了什么』</a>来消除这种视觉影响。</p>
</blockquote>
<p><br></p>
<p>更多有关『页内编辑』的模式，可查看<a href="../pattern/table#模块编辑">『模式／表格／交互』</a>中的内容。</p>
<p><br></p>
<hr>
<h2 id="利用拖放">利用拖放<a href="#利用拖放" class="anchor">#</a> </h2><p><img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的『图标』；<br>
状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；<br>
状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://os.alipayobjects.com/rmsportal/DjMFcqSxZrulbGF.png"></p>
<p>拖放列表</p>
<p>只能限制在一个维度（上/下或者左/右）进行拖放。</p>
<p><br></p>
<p><img class="preview-img" align="right" alt="拖放图片/文件示例" src="https://os.alipayobjects.com/rmsportal/KVhqdSoLUjXPXuN.png"></p>
<p>拖放图片/文件</p>
<p><br></p>
<p><span class="waiting">拖放对象（敬请期待）</span></p>
<p><span class="waiting">拖放多个对象（敬请期待）</span></p>
<p><br></p>
<hr>
<h2 id="直接选择（敬请期待）"><span class="waiting">直接选择（敬请期待）</span><a href="#直接选择（敬请期待）" class="anchor">#</a> </h2>
</article>
</section>
</div><footer id="footer">
<ul>
<li>
<h2>GitHub</h2>
<a target="_blank "href="https://github.com/ant-design/ant-design">仓库</a>
<a target="_blank" href="https://github.com/ant-design/antd-init">脚手架</a>
<a target="_blank" href="http://ant-tool.github.io/">开发工具</a>
</li>
<li>
<h2>关于我们</h2>
<a target="_blank" href="https://github.com/ant-ued/blog">博客 - Ant UED</a>
</li>
<li>
<h2>联系我们</h2>
<a target="_blank" href="https://github.com/ant-design/ant-design/issues">反馈和建议</a>
<a target="_blank" href="https://gitter.im/ant-design/ant-design">讨论</a>
<a target="_blank" href="http://dwz.cn/2AF9ao">报告 Bug</a>
</li>
<li>
<div>©2015 蚂蚁金服体验技术部出品</div>
<div>文档版本：<span id="versions-select"></span></div>
</li>
</ul>
</footer>
<script data-no-instant>
if (!location.port) {
(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');
InstantClick.on('change', function() {
ga('send', 'pageview', location.pathname + location.search);
});
}
</script>
<script data-no-instant>
InstantClick.on('change', function() {
InstantClickChangeFns.forEach(function(fn) {
fn();
});
});
InstantClick.init();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink