diff --git a/components/button/index.md b/components/button/index.md index 071b031c0dd7747afb750171728308e0d0b12a01..ea4cd11879c88b2b0c9e405b6b873410d968eedd 100644 --- a/components/button/index.md +++ b/components/button/index.md @@ -10,7 +10,7 @@ ## 何时使用 -标记了一个（或一组）操作命令，引导用户点击。 +标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。 ## 如何使用 diff --git a/components/datepicker/demo/formatter.md b/components/datepicker/demo/formatter.md index 23d12e2cad63e830f0452495a92191f04d22b700..5308229f5d10d7d2a332560b6dba670a9fe0e8b8 100644 --- a/components/datepicker/demo/formatter.md +++ b/components/datepicker/demo/formatter.md @@ -2,7 +2,7 @@ - order: 1 -使用 `format` 属性自定义您需要的日期定义格式：yyyy/MM/dd +使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。 --- diff --git a/components/datepicker/demo/range.md b/components/datepicker/demo/range.md index e832d79cb2d55eea0f7e57f4232f3dd0d1a6b516..a34f6a1e9d8e37eaa8107e7007f8365aaceb0d6d 100644 --- a/components/datepicker/demo/range.md +++ b/components/datepicker/demo/range.md @@ -2,9 +2,9 @@ - order: 3 -设置可选日期的范围，用 disabled 方法来定义不可选择时间。 +设置 `disabled` 方法，来确定不可选时段。 -比如不可选择今天之后的日期。 +如上例：不可选择今天之后的日期。 --- diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md index 4dd83b8995c6b657cac91b22dca8c21c04c30ddd..3726ebb9b64d9da048c9b612d1d604ec92673e88 100644 --- a/components/dropdown/demo/basic.md +++ b/components/dropdown/demo/basic.md @@ -22,7 +22,7 @@ var menu = React.render( - diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md index 15b069d1e23660a46ec1bc2d27fccce0bd3c2078..5a5f302aed40a808ff0d24c346fbfdd143fcc187 100644 --- a/components/dropdown/demo/event.md +++ b/components/dropdown/demo/event.md @@ -21,7 +21,7 @@ var menu = React.render( - diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md index 94f78dbfd1b1328e3a87c95cf97586ecd3f9b636..99234928d47aea86a8c81f37bb3431e196884306 100644 --- a/components/dropdown/demo/item.md +++ b/components/dropdown/demo/item.md @@ -23,7 +23,7 @@ var menu = React.render( - diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md index 46d7f60f023b4159ebf10384f50e10486eede4d2..b852f1f2f872da245774beffe4d9251c7de76da0 100644 --- a/components/dropdown/demo/trigger.md +++ b/components/dropdown/demo/trigger.md @@ -23,12 +23,12 @@ var menu = React.render(
- - 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%;