Merge branch 'master' of https://github.com/ant-design/ant-design

components/button/demo/button-group.md

@@ -32,12 +32,12 @@
 <h4>带图标按钮组合 </h4>
 <div class="ant-btn-group">
   <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-caret-left"></span>
+  <span class="anticon anticon-angle-double-left"></span>
-  <span>前 进</span>
+  <span>后 退</span>
   </button>
   <button class="ant-btn ant-btn-primary">
-  <span>后 退</span>
+  <span>前 进</span>
-  <span class="anticon anticon-caret-right"></span>
+  <span class="anticon anticon-angle-double-right"></span>
   </button>
 </div>
 <div class="ant-btn-group">
@@ -56,7 +56,7 @@
   <button class="ant-btn ant-btn-ghost">4</button>
   <button class="ant-btn ant-btn-ghost">
   <span>前 进</span>
-  <span class="anticon anticon-caret-right"></span>
+  <span class="anticon anticon-angle-double-right"></span>
   </button>
 </div>
 <h4>尺寸</h4>
@@ -66,9 +66,9 @@
   <button class="ant-btn ant-btn-ghost">大</button>
 </div>
 <div class="ant-btn-group">
-  <button class="ant-btn ant-btn-ghost">正常</button>
+  <button class="ant-btn ant-btn-ghost">默 认</button>
-  <button class="ant-btn ant-btn-ghost">正常</button>
+  <button class="ant-btn ant-btn-ghost">默 认</button>
-  <button class="ant-btn ant-btn-ghost">正常</button>
+  <button class="ant-btn ant-btn-ghost">默 认</button>
 </div>
 <div class="ant-btn-group ant-btn-group-sm">
   <button class="ant-btn ant-btn-ghost">小</button>
@@ -81,4 +81,7 @@
 .nico-insert-code h4:first-child {
   margin-top: 0;
 }
+.nico-insert-code .ant-btn-group {
+  margin-left: 8px;
+}
 </style>

components/button/demo/styled.md

@@ -6,11 +6,7 @@
 
   使用下面列出的类即可创建带有预定义样式的按钮，我们通过样式来显示重要程度的不同。
 
-- `ant-btn-primary`
+  `ant-btn-primary`、`ant-btn-default`、`ant-btn-ghost`
-
-- `ant-btn-default`
-
-- `ant-btn-ghost`
 
 **注**: 当按钮文字为两个字时，中间需要**间隔一个字符**。
 

components/dropdown/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-点击触发
+最简单的下拉菜单。
 
 ---
 
@@ -10,21 +10,22 @@
 var Menu = antd.Menu;
 var Dropdown = antd.Dropdown;
 
-function onClick(key){
+var menu = <Menu>
- alert('select ' + key);
+  <Menu.Item key="0">
-}
+    <a href="http://www.alipay.com/">第一个菜单项</a>
-
+  </Menu.Item>
-var menu = <Menu style={{width:140}} onClick={onClick}>
+  <Menu.Item key="1">
-  <Menu.Item disabled>disabled</Menu.Item>
+    <a href="http://www.taobao.com/">第二个菜单项</a>
-  <Menu.Item key="1">第一个菜单项</Menu.Item>
+  </Menu.Item>
   <Menu.Divider/>
-  <Menu.Item key="2">第二个菜单项</Menu.Item>
+  <Menu.Item key="3">第三个菜单项</Menu.Item>
 </Menu>;
 
-
 React.render(
-  <Dropdown animation="slide-up" overlay={menu} trigger="click">
+  <Dropdown animation="slide-up" overlay={menu}>
-  <button className="ant-btn ant-btn-ghost">点我下来 <span className="anticon anticon-caret-down"></span></button>
+    <button className="ant-btn ant-btn-ghost">
+      点我下来 <i className="anticon anticon-caret-down"></i>
+    </button>
   </Dropdown>
 , document.getElementById('components-dropdown-demo-basic'));
 ````

components/dropdown/demo/event.md

@@ -0,0 +1,32 @@
+# 基本
+
+- order: 1
+
+点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。
+
+---
+
+````jsx
+var Menu = antd.Menu;
+var Dropdown = antd.Dropdown;
+
+function onClick(key){
+  alert('选中了菜单' + key);
+}
+
+var menu = <Menu onClick={onClick}>
+  <Menu.Item key="1">第一个菜单项</Menu.Item>
+  <Menu.Item key="2">第二个菜单项</Menu.Item>
+  <Menu.Item key="3">第三个菜单项</Menu.Item>
+  <Menu.Item key="4" disabled>第四个菜单项</Menu.Item>
+</Menu>;
+
+
+React.render(
+  <Dropdown overlay={menu}>
+    <button className="ant-btn ant-btn-ghost">
+      鼠标移入 <i className="anticon anticon-caret-down"></i>
+    </button>
+  </Dropdown>
+, document.getElementById('components-dropdown-demo-event'));
+````

components/dropdown/demo/hover.md

@@ -1,30 +0,0 @@
-# 基本
-
-- order: 1
-
-鼠标触发
-
----
-
-````jsx
-var Menu = antd.Menu;
-var Dropdown = antd.Dropdown;
-
-function onClick(key){
- alert('select ' + key);
-}
-
-var menu = <Menu style={{width:140}} onClick={onClick}>
-  <Menu.Item disabled>disabled</Menu.Item>
-  <Menu.Item key="1">第一个菜单项</Menu.Item>
-  <Menu.Divider/>
-  <Menu.Item key="2">第二个菜单项</Menu.Item>
-</Menu>;
-
-
-React.render(
-  <Dropdown overlay={menu} trigger="hover">
-  <button className="ant-btn ant-btn-ghost">hover <span className="anticon anticon-caret-down"></span></button>
-  </Dropdown>
-, document.getElementById('components-dropdown-demo-hover'));
-````

components/dropdown/demo/trigger.md

@@ -0,0 +1,38 @@
+# 触发方式
+
+- order: 1
+
+点击或鼠标移入触发。
+
+---
+
+````jsx
+var Menu = antd.Menu;
+var Dropdown = antd.Dropdown;
+
+var menu = <Menu>
+  <Menu.Item key="0">
+    <a href="http://www.alipay.com/">第一个菜单项</a>
+  </Menu.Item>
+  <Menu.Item key="1">
+    <a href="http://www.taobao.com/">第二个菜单项</a>
+  </Menu.Item>
+  <Menu.Divider/>
+  <Menu.Item key="3">第三个菜单项</Menu.Item>
+</Menu>;
+
+React.render(
+  <div>
+    <Dropdown animation="slide-up" overlay={menu} trigger="click">
+      <button className="ant-btn ant-btn-ghost">
+        点我下来 <i className="anticon anticon-caret-down"></i>
+      </button>
+    </Dropdown>
+    <Dropdown animation="slide-up" overlay={menu}>
+      <button className="ant-btn ant-btn-ghost">
+        鼠标移入 <i className="anticon anticon-caret-down"></i>
+      </button>
+    </Dropdown>
+  </div>
+, document.getElementById('components-dropdown-demo-trigger'));
+````

components/iconfont/index.md

@@ -15,6 +15,8 @@
 <span class="anticon anticon-link"></span>
 ```
 
+> 点击图标复制代码。
+
 ## 图标列表
 
 ### 一. 方向性图标
@@ -482,89 +484,78 @@ ul.anticons-list {
 }
 ul.anticons-list li {
   float: left;
-  margin: 10px 5px;
+  margin: 5px;
   padding-bottom: 10px;
-  width: 150px;
+  width: 154px;
-  height: 120px;
   text-align: center;
   list-style: none;
   cursor: pointer;
-  height: 92px;
+  height: 110px;
   color: #5C6B77;
   transition: all 0.2s ease;
   position: relative;
 }
-ul.anticons-list li:before {
+ul.anticons-list li:hover,
-  content: "点击后 ctrl+c 复制代码";
+ul.anticons-list li.zeroclipboard-is-hover {
-  top: -17px;
-  left: 13px;
-  font-size: 12px;
-  text-align: center;
-  position: absolute;
-  display: none;
-  color: #aaa;
-  transform: scale(0.8);
-}
-ul.anticons-list li:hover {
   background-color: #4BB8FF;
   color: #fff;
   border-radius: 4px;
 }
-ul.anticons-list li:hover:before {
+ul.anticons-list li.copied.zeroclipboard-is-hover {
-  display: block;
+  color: rgba(255,255,255,0.2);
+}
+ul.anticons-list li:after {
+  position: absolute;
+  top: 10px;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  content: "Copied!";
+  text-align: center;
+  line-height: 110px;
+  color: #fff;
+  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  opacity: 0;
+}
+ul.anticons-list li.copied:after {
+  opacity: 1;
+  top: 0;
 }
 .anticon {
-  font-size: 24px;
+  font-size: 26px;
-  margin: 18px 0 16px;
+  margin: 26px 0 16px;
 }
 .anticon-class {
   display: block;
   text-align: center;
   word-wrap: break-word;
-  transform: scale(0.85);
+  transform: scale(0.83);
   font-family: Consolas;
 }
 </style>
 
+<script src="/static/ZeroClipboard.js"></script>
 <script>
 $(function() {
-  var input = $('input');
+  ZeroClipboard.config({
-  input.css('opacity', '0.01');
+    swfPath: "http://static.alipayobjects.com/zeroclipboard/2.2.0/dist/ZeroClipboard.swf"
-  $('.anticons-list li').mouseenter(function() {
+  });
-    var iconText = $(this).find('.anticon-class').html();
+  // clipboard
-    input.val('<span class="anticon anticon-' + iconText + '"></span>').appendTo(this);
+  $('.anticons-list li').each(function(i, item) {
+    var client = new ZeroClipboard(item);
+    client.on( "copy", function (event) {
+      client.setText('<i class="anticon anticon-' + $(item).find('.anticon-class').html() + '></i>');
+    });
+    client.on( "ready", function( readyEvent ) {
+      client.on( "aftercopy", function( event ) {
+        // `this` === `client`
+        // `event.target` === the element that was clicked
+        $(event.target).addClass('copied');
         setTimeout(function() {
-      input[0].focus();
+          $(event.target).removeClass('copied');
-      input[0].select();
+        }, 2000);
-    }, 50);
-  }).mouseleave(function() {
-    input.remove();
       });
-
-  $('.anticons-list li').click(function() {
-    setTimeout(function() {
-      input[0].focus();
-      input[0].select();
-    }, 50);
     });
-
-  var ctrlDown = false;
-  var ctrlKey = 17, vKey = 86, cKey = 67, cmdKey = 224;
-
-  $(document).keydown(function(e) {
-    if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
-      ctrlDown = true;
-    }
-  }).keyup(function(e) {
-    if (e.keyCode == ctrlKey || e.keyCode == cmdKey) {
-      ctrlDown = false;
-    }
-  });
-
-  $(document).keydown(function(e) {
-    if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)) {
-      console.log('复制成功!');
-    }
   });
 });
 </script>

static/style.css

@@ -566,6 +566,13 @@ footer ul li > a {
   background: #F7F7F7;
 }
 
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+}
+
 #api ~ ul > li > p > strong ~ code {
   background: #fff;
   color: #CC7300;

theme/templates/layout.html

@@ -41,12 +41,12 @@
         <li class="{%- if post.meta.category === 'start' %}current{%- endif %}">
           <a href="/docs/introduce">上手</a>
         </li>
-        <li class="{%- if post.filename === 'design' %}current{%- endif %}">
-          <a href="/docs/design">设计</a>
-        </li>
         <li class="{%- if post.meta.template === 'component' %}current{%- endif %}">
           <a href="/components">组件</a>
         </li>
+        <li class="{%- if post.filename === 'design' %}current{%- endif %}">
+          <a href="/docs/design">设计</a>
+        </li>
         <li class="{%- if post.filename === 'modes' %}current{%- endif %}">
           <a href="/docs/modes">模式</a>
         </li>