-
-
+
鼠标移入
diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md
new file mode 100644
index 0000000000000000000000000000000000000000..1ea14d6ad9d5ede7d0a1bdd31dbc30c0833fb3ac
--- /dev/null
+++ b/components/popover/demo/basic.md
@@ -0,0 +1,22 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Popover = antd.Popover;
+var content = [
+
内容
,
+
内容
,
+
内容
+];
+
+React.render(
+
+ 弹出卡片
+
+, document.getElementById('components-popover-demo-basic'));
+````
diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md
new file mode 100644
index 0000000000000000000000000000000000000000..f752ebe1dc9c56674b41457f6ea78cea064d2656
--- /dev/null
+++ b/components/popover/demo/placement.md
@@ -0,0 +1,39 @@
+# 位置
+
+- order: 1
+
+位置有四个方向。
+
+---
+
+````jsx
+var Popover = antd.Popover;
+var text =
标题;
+var content = [
+
内容
,
+
内容
,
+
内容
+];
+
+React.render(
+
+ 左
+
+
+ 右
+
+
+ 上
+
+
+ 下
+
+
, document.getElementById('components-popover-demo-placement'));
+````
+
+
+
diff --git a/components/popover/demo/triggerType.md b/components/popover/demo/triggerType.md
new file mode 100644
index 0000000000000000000000000000000000000000..64c13894e3ff783fdc24adc8819b05fa1904bd75
--- /dev/null
+++ b/components/popover/demo/triggerType.md
@@ -0,0 +1,28 @@
+# 三种触发方式
+
+- order: 2
+
+鼠标移入、聚集、点击。
+
+---
+
+````jsx
+var Popover = antd.Popover;
+var content = [
+
内容
,
+
内容
,
+
内容
+];
+
+React.render(
+
+ 移入
+
+
+ 聚焦
+
+
+ 点击
+
+
, document.getElementById('components-popover-demo-triggertype'));
+````
diff --git a/components/popover/index.jsx b/components/popover/index.jsx
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..af003e6b82bf176d861e80112d6ec48004bccb34 100644
--- a/components/popover/index.jsx
+++ b/components/popover/index.jsx
@@ -0,0 +1,42 @@
+'use strict';
+
+var React = require('react');
+var Tooltip = require('rc-tooltip');
+
+module.exports = React.createClass({
+ getDefaultProps() {
+ return {
+ transitionName: '',
+ placement: 'top',
+ trigger: 'hover'
+ };
+ },
+ render() {
+ var overlay =
+
+ {this.props.title}
+
+
+ {this.props.overlay}
+
+
;
+
+ var transitionName = ({
+ top: 'zoom-down',
+ bottom: 'zoom-up',
+ left: 'zoom-right',
+ right: 'zoom-left'
+ })[this.props.placement];
+
+ return (
+
+ {this.props.children}
+
+ );
+ }
+});
diff --git a/components/popover/index.md b/components/popover/index.md
index d49cdecb1b702525f59326c93eabd716e6fa42fb..7d710a1007147888858171e3fa88607c05d971d8 100644
--- a/components/popover/index.md
+++ b/components/popover/index.md
@@ -5,3 +5,20 @@
---
+点击/鼠标移入元素,弹出气泡式的卡片浮层。
+
+## 何时使用
+
+当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户交互展现。
+
+和 `Tooltip` 的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容。
+
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|------------------------------------------|---------------|--------|
+| trigger | 触发行为,可选 `hover/focus/click` | string | hover |
+| placement | 气泡框位置,可选 `top/left/right/bottom` | string | top |
+| title | 提示文字 | React.Element | 无 |
+| content | 提示文字 | React.Element | 无 |
diff --git a/components/progress/index.md b/components/progress/index.md
index fa4b2b380206240b9267ecc1383a4d10cd88ed66..567b5eff12f73731ebe196cafd11ad4bb85350e0 100644
--- a/components/progress/index.md
+++ b/components/progress/index.md
@@ -10,8 +10,8 @@
## 何时使用
-- 需要告知用户进行时、失败、已完成的等运行状态。
-- 需要展示操作的百分比时。
+- 需要告知用户操作的运行状态,如:进行中、已完成、已失败。
+- 需要展示操作的进度时。
## 属性参数
diff --git a/components/tooltip/index.jsx b/components/tooltip/index.jsx
index db06f61a3be0fd139b06ac248d51b3645a79f5a3..9eef744521ec157a9d673d6cf4997da5fc0e9ec9 100644
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@@ -4,16 +4,23 @@ var React = require('react');
var Tooltip = require('rc-tooltip');
module.exports = React.createClass({
- getDefaultProps: function () {
+ getDefaultProps() {
return {
placement: 'top'
};
},
- render: function() {
+ render() {
+ var transitionName = ({
+ top: 'zoom-down',
+ bottom: 'zoom-up',
+ left: 'zoom-right',
+ right: 'zoom-left'
+ })[this.props.placement];
return (
{this.props.children}
diff --git a/components/tooltip/index.md b/components/tooltip/index.md
index 20bee74592fc75942a871252b6c2bb44f8bb6659..282027a5ff49b860a83b621b3c50603b2f3b0bd5 100644
--- a/components/tooltip/index.md
+++ b/components/tooltip/index.md
@@ -12,7 +12,7 @@
鼠标移入则显示提示,移出消失,气泡浮层不承载复杂文本和操作。
-可用来代替系统默认的 title 提示,提供一个按钮/文字/操作的文案解释。
+可用来代替系统默认的 `title` 提示,提供一个`按钮/文字/操作`的文案解释。
## API
diff --git a/index.js b/index.js
index e5dd512654f9adb54d7a422840ee1d96fec3e35b..1a38864a26312fa49735dedbf2a78407bf490a12 100644
--- a/index.js
+++ b/index.js
@@ -8,6 +8,7 @@ var antd = {
Menu: require('rc-menu'),
Dropdown: require('./components/dropdown'),
Progress: require('./components/progress'),
+ Popover: require('./components/popover'),
Select: require('./components/select'),
confirm: require('./components/modal/confirm')
};
diff --git a/package.json b/package.json
index 7d06ccadde9b9b9b54623c14838d0c4eb7edea5d..267a13efdd8d5fdc4468070fd57d7474ea3fe9a8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "antd",
- "version": "0.0.1",
+ "version": "0.1.0",
"title": "Ant Design",
"description": "下一个设计&前端框架",
"homepage": "http://ant-design.github.io/",
diff --git a/static/style.css b/static/style.css
index 9f988c73cc64a47d565e61b54ed6ba537668e053..69cc786f7ed3dd3997b651765248dca02b053fca 100644
--- a/static/style.css
+++ b/static/style.css
@@ -563,6 +563,13 @@ footer ul li > a {
margin: 20px 0;
}
+.markdown code,
+.markdown kbd,
+.markdown pre,
+.markdown samp {
+ font-family: Consolas, monospace;
+}
+
.markdown p,
.markdown pre {
margin: 1.2em 0;
diff --git a/style/components/datepicker/Picker.less b/style/components/datepicker/Picker.less
index 9fcd34177e15b23f493d28a1d82e31e2fe5e310c..a97674a791fbd835e3e90cd66264b815f0e79df1 100644
--- a/style/components/datepicker/Picker.less
+++ b/style/components/datepicker/Picker.less
@@ -12,6 +12,7 @@
display: inline-block;
&-input {
.ant-input;
+ cursor: text;
}
&-icon {
position: absolute;
diff --git a/style/components/dropdown.less b/style/components/dropdown.less
index bfecc9d577a15fb385f56f9c94140357eeb2c1cb..54cfbf3bfb40eebd1d134d9721b43f834cb32b14 100644
--- a/style/components/dropdown.less
+++ b/style/components/dropdown.less
@@ -15,6 +15,15 @@
&-wrap {
position: relative;
+ .anticon-down {
+ transition: transform 0.2s ease;
+ }
+ }
+
+ &-wrap-open {
+ .anticon-down {
+ transform: rotate(180deg);
+ }
}
&-hidden {
@@ -55,9 +64,13 @@
clear: both;
font-size: 12px;
font-weight: normal;
- color: #666666;
+ color: #666;
white-space: nowrap;
+ a {
+ color: #666;
+ }
+
&:hover {
background-color: #ebfaff;
}
@@ -148,4 +161,4 @@
transform: scaleY(0);
}
}
-}
\ No newline at end of file
+}
diff --git a/style/components/index.less b/style/components/index.less
index cac152640948270429b711d8ef45e2679008607b..d8328d3f0ae0efc40ff9e69cdef06e4cc8518dc8 100644
--- a/style/components/index.less
+++ b/style/components/index.less
@@ -7,6 +7,7 @@
@import "confirm";
@import "tabs";
@import "tooltip";
+@import "popover";
@import "form";
@import "loading";
-@import "progress";
\ No newline at end of file
+@import "progress";
diff --git a/style/components/popover.less b/style/components/popover.less
new file mode 100644
index 0000000000000000000000000000000000000000..630e055bdc2c2a8d91a79921473d385200f1b553
--- /dev/null
+++ b/style/components/popover.less
@@ -0,0 +1,226 @@
+@import "../mixins/index";
+@popoverPrefixClass: ~"@{css-prefix}popover";
+
+//
+// Popovers
+// --------------------------------------------------
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+@popover-bg: #fff;
+//** Popover maximum width
+@popover-min-width: 177px;
+@popover-max-width: 276px;
+//** Popover border color
+@popover-border-color: #d9d9d9;
+
+//** Popover arrow width
+@popover-arrow-width: 4px;
+//** Popover distance with trigger
+@popover-distance: @popover-arrow-width+4;
+//** Popover arrow color
+@popover-arrow-color: @popover-bg;
+
+//** Popover outer arrow width
+@popover-arrow-outer-width: (@popover-arrow-width + 1);
+//** Popover outer arrow color
+@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1080;
+ cursor: auto;
+ -moz-user-select: text;
+ user-select: text;
+ white-space: normal;
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+ font-weight: normal;
+ text-align: left;
+
+ &:after {
+ content: "";
+ position: absolute;
+ background: rgba(255,255,255,0.01);
+ }
+
+ &-hidden {
+ display: none;
+ }
+
+ // Offset the popover to account for the popover arrow
+ &-placement-top {
+ margin-top: -@popover-arrow-width;
+ padding-bottom: @popover-distance;
+ &:after {
+ top: 100%;
+ left: 0;
+ width: 100%;
+ height: 8px;
+ }
+ }
+
+ &-placement-right {
+ margin-left: @popover-arrow-width;
+ padding-left: @popover-distance;
+ &:after {
+ top: 0;
+ left: -8px;
+ width: 8px;
+ height: 100%;
+ }
+ }
+
+ &-placement-bottom {
+ margin-top: @popover-arrow-width;
+ padding-top: @popover-distance;
+ &:after {
+ top: -8px;
+ left: 0;
+ width: 100%;
+ height: 8px;
+ }
+ }
+
+ &-placement-left {
+ margin-left: -@popover-arrow-width;
+ padding-right: @popover-distance;
+ &:after {
+ top: 0;
+ left: 100%;
+ width: 8px;
+ height: 100%;
+ }
+ }
+
+ &-inner {
+ max-width: @popover-max-width;
+ min-width: @popover-min-width;
+ background-color: @popover-bg;
+ background-clip: padding-box;
+ border: 1px solid @popover-border-color;
+ border-radius: @border-radius-base;
+ padding: 1px;
+ box-shadow: 0 0 4px #d9d9d9;
+ }
+
+ &-title {
+ margin: 0; // reset heading margin
+ padding: 0 8px;
+ line-height: 30px;
+ height: 30px;
+ background-color: @popover-bg;
+ border-bottom: 1px solid #e9e9e9;
+ color: #666;
+ }
+
+ &-content {
+ padding: 8px;
+ }
+
+ &-descrition {
+ [icon] {
+ font-size: 16px;
+ margin-right: 2px;
+ line-height: 18px;
+ }
+ [icon='warn-circle'] {
+ color: #F9C35A;
+ }
+ }
+
+ &-buttons {
+ text-align: right;
+ margin-top: 12px;
+
+ button {
+ margin-left: 2px;
+ }
+ }
+
+ // Arrows
+ // .popover-arrow is outer, .popover-arrow:after is inner
+
+ &-arrow {
+ &,
+ &:after {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ }
+ }
+
+ &-arrow {
+ border-width: @popover-arrow-outer-width;
+ }
+ &-arrow:after {
+ border-width: @popover-arrow-width;
+ content: "";
+ }
+
+ &-placement-top > &-arrow {
+ left: 50%;
+ margin-left: -@popover-arrow-outer-width;
+ border-bottom-width: 0;
+ border-top-color: @popover-arrow-outer-color;
+ bottom: @popover-distance - @popover-arrow-outer-width + 1;
+ &:after {
+ content: " ";
+ bottom: 1px;
+ margin-left: -@popover-arrow-width;
+ border-bottom-width: 0;
+ border-top-color: @popover-arrow-color;
+ }
+ }
+ &-placement-right > &-arrow {
+ top: 50%;
+ left: @popover-distance - @popover-arrow-outer-width + 1;
+ margin-top: -@popover-arrow-outer-width;
+ border-left-width: 0;
+ border-right-color: @popover-arrow-outer-color;
+ &:after {
+ content: " ";
+ left: 1px;
+ bottom: -@popover-arrow-width;
+ border-left-width: 0;
+ border-right-color: @popover-arrow-color;
+ }
+ }
+ &-placement-bottom > &-arrow {
+ left: 50%;
+ margin-left: -@popover-arrow-outer-width;
+ border-top-width: 0;
+ border-bottom-color: @popover-arrow-outer-color;
+ top: @popover-distance - @popover-arrow-outer-width + 1;
+ &:after {
+ content: " ";
+ top: 1px;
+ margin-left: -@popover-arrow-width;
+ border-top-width: 0;
+ border-bottom-color: @popover-arrow-color;
+ }
+ }
+
+ &-placement-left > &-arrow {
+ top: 50%;
+ right: @popover-distance - @popover-arrow-outer-width + 1;
+ margin-top: -@popover-arrow-outer-width;
+ border-right-width: 0;
+ border-left-color: @popover-arrow-outer-color;
+ &:after {
+ content: " ";
+ right: 1px;
+ border-right-width: 0;
+ border-left-color: @popover-arrow-color;
+ bottom: -@popover-arrow-width;
+ }
+ }
+}
diff --git a/style/components/tooltip.less b/style/components/tooltip.less
index b70dd187b952dd79782c963ec313c339db7e1ce4..7c2aa914a1d16ec25a8487d54f20bb4b2dde6e73 100644
--- a/style/components/tooltip.less
+++ b/style/components/tooltip.less
@@ -15,7 +15,7 @@
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
-//** Tooltip arrow color
+//** Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width+4;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
@@ -31,7 +31,7 @@
font-size: @font-size-base;
line-height: @line-height-base;
opacity: @tooltip-opacity;
-
+
&-hidden {
display: none;
}
@@ -51,7 +51,7 @@
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
- box-shadow: 0 0 4px rgba(0,0,0,0.4);
+ box-shadow: 0 0 4px #d9d9d9;
}
// Arrows
diff --git a/style/core/motion.less b/style/core/motion.less
index 865a64d3bc4e3310b1b05fc2262adc82904ec72e..054800f572beb2c1fd532512da2aa48fb6585a17 100644
--- a/style/core/motion.less
+++ b/style/core/motion.less
@@ -144,16 +144,6 @@
}
}
-@-webkit-keyframes loadingCircle {
- 0% {
- -webkit-transform-origin: 50% 50%;
- -webkit-transform: rotate(0deg);
- }
- 100% {
- -webkit-transform-origin: 50% 50%;
- -webkit-transform: rotate(360deg);
- }
-}
@keyframes loadingCircle {
0% {
transform-origin: 50% 50%;