├── static └── .gitkeep ├── components ├── locale-provider │ ├── style │ │ └── index.js │ └── demo │ │ └── basic.md ├── style │ ├── index.js │ ├── index.less │ ├── core │ │ ├── index.less │ │ ├── motion │ │ │ ├── other.less │ │ │ ├── fade.less │ │ │ └── swing.less │ │ └── motion.less │ └── mixins │ │ ├── size.less │ │ ├── opacity.less │ │ ├── index.less │ │ └── clearfix.less ├── mention │ ├── style │ │ └── index.js │ └── demo │ │ ├── multilines.md │ │ └── basic.md ├── icon │ ├── style │ │ └── index.js │ ├── index.js │ └── src │ │ └── Icon.vue ├── rate │ ├── star.index.js │ ├── rate.index.js │ ├── style │ │ └── index.js │ ├── demo │ │ ├── basic.md │ │ ├── half.md │ │ └── disabled.md │ ├── index.zh-CN.md │ └── index.en-US.md ├── steps │ ├── step.index.js │ ├── steps.index.js │ ├── style │ │ └── index.js │ └── demo │ │ ├── simple.md │ │ ├── small-size.md │ │ ├── icon.md │ │ ├── vertical.md │ │ ├── error.md │ │ └── vertical-small.md ├── form │ ├── form.item.index.js │ ├── form.index.js │ ├── style │ │ └── index.js │ └── src │ │ └── Form.vue ├── menu │ ├── menu.item.index.js │ ├── sub.menu.index.js │ ├── menu.item.group.index.js │ ├── menu.index.js │ ├── style │ │ └── index.js │ └── src │ │ ├── MenuItemGroup.vue │ │ └── src │ │ └── MenuItemGroup.vue ├── input │ ├── input.group.index.js │ ├── style │ │ ├── index.js │ │ └── index.less │ ├── input.index.js │ ├── demo │ │ ├── basic.md │ │ ├── textarea.md │ │ └── group.md │ └── src │ │ └── InputGroup.vue ├── radio │ ├── radio.group.index.js │ ├── radio.button.index.js │ ├── style │ │ └── index.js │ ├── radio.index.js │ └── demo │ │ └── basic.md ├── tabs │ ├── tabs.plane.index.js │ ├── style │ │ └── index.js │ ├── tabs.index.js │ ├── src │ │ └── TabsPlane.vue │ └── demo │ │ ├── disabled.md │ │ ├── icon.md │ │ ├── size.md │ │ ├── basic.md │ │ ├── extra.md │ │ └── card.md ├── affix │ ├── index.js │ ├── style │ │ ├── index.js │ │ └── index.less │ ├── demo │ │ ├── basic.md │ │ ├── bottom.md │ │ ├── offset.md │ │ └── on-change.md │ └── index.zh-CN.md ├── alert │ ├── index.js │ ├── style │ │ └── index.js │ └── demo │ │ ├── basic.md │ │ ├── close-text.md │ │ ├── style.md │ │ └── banner.md ├── badge │ ├── index.js │ ├── style │ │ └── index.js │ └── demo │ │ ├── link.md │ │ ├── 99plus.md │ │ ├── no-wrapper.md │ │ ├── basic.md │ │ ├── overflow.md │ │ └── dot.md ├── card │ ├── index.js │ ├── style │ │ └── index.js │ ├── demo │ │ ├── simple.md │ │ ├── loading.md │ │ ├── basic.md │ │ └── border-less.md │ └── index.zh-CN.md ├── tag │ ├── index.js │ ├── style │ │ └── index.js │ ├── demo │ │ ├── basic.md │ │ └── colorful.md │ ├── index.zh-CN.md │ ├── index.en-US.md │ └── src │ │ └── Tag.vue ├── back-top │ ├── index.js │ ├── style │ │ ├── index.js │ │ └── index.less │ ├── demo │ │ ├── basic.md │ │ └── custom.md │ └── index.zh-CN.md ├── button │ ├── button.group.index.js │ ├── style │ │ └── index.js │ ├── button.index.js │ ├── src │ │ └── ButtonGroup.vue │ └── demo │ │ └── size.md ├── carousel │ ├── style │ │ └── index.js │ └── demo │ │ ├── vertical.md │ │ ├── fade.md │ │ ├── autoplay.md │ │ └── basic.md ├── checkbox │ ├── checkbox.group.index.js │ ├── style │ │ ├── index.js │ │ └── index.less │ ├── checkbox.index.js │ └── demo │ │ ├── disabled.md │ │ └── basic.md ├── collapse │ ├── collapse.panel.index.js │ ├── style │ │ └── index.js │ └── collapse.index.js ├── layout │ ├── style │ │ └── index.js │ └── demo │ │ ├── sort.md │ │ ├── flex-order.md │ │ └── reponsive.md ├── message │ ├── style │ │ └── index.js │ └── demo │ │ ├── info.md │ │ ├── duration.md │ │ └── loading.md ├── popover │ ├── style │ │ └── index.js │ └── demo │ │ ├── basic.md │ │ └── triggerType.md ├── progress │ ├── style │ │ └── index.js │ ├── index.js │ └── demo │ │ ├── line.md │ │ ├── circle-mini.md │ │ ├── line-mini.md │ │ ├── circle.md │ │ └── format.md ├── spin │ ├── index.js │ ├── style │ │ └── index.js │ ├── demo │ │ ├── basic.md │ │ ├── tip.md │ │ ├── inside.md │ │ └── size.md │ └── index.zh-CN.md ├── switch │ ├── index.js │ ├── style │ │ └── index.js │ ├── demo │ │ ├── size.md │ │ ├── text.md │ │ └── basic.md │ └── index.zh-CN.md ├── timeline │ ├── style │ │ └── index.js │ ├── timeline.item.index.js │ ├── timeline.index.js │ ├── demo │ │ ├── basic.md │ │ ├── custom.md │ │ └── pending.md │ └── src │ │ └── TimelineItem.vue ├── tooltip │ ├── index.js │ ├── style │ │ └── index.js │ ├── src │ │ └── placeMap.txt │ └── demo │ │ └── basic.md ├── auto-complete │ └── style │ │ ├── index.js │ │ └── index.less ├── breadcrumb │ ├── breadcrumb.item.index.js │ ├── style │ │ ├── index.js │ │ └── index.less │ ├── breadcrumb.index.js │ ├── src │ │ ├── Breadcrumb.vue │ │ └── BreadcrumbItem.vue │ └── demo │ │ ├── basic.md │ │ ├── withIcon.md │ │ └── separator.md ├── col │ ├── col.index.js │ └── style │ │ └── index.js ├── input-number │ ├── style │ │ └── index.js │ ├── index.js │ └── demo │ │ ├── basic.md │ │ └── digit.md ├── notification │ ├── style │ │ └── index.js │ └── demo │ │ └── basic.md ├── pagination │ ├── index.js │ ├── locale │ │ ├── en_US.tsx │ │ └── zh_CN.tsx │ ├── style │ │ └── index.js │ └── demo │ │ ├── more.md │ │ ├── basic.md │ │ ├── simple.md │ │ ├── jump.md │ │ ├── changer.md │ │ ├── total.md │ │ ├── mini.md │ │ └── controlled.md ├── row │ ├── row.index.js │ └── style │ │ └── index.js ├── table │ ├── table.index.js │ └── style │ │ └── index.js ├── popconfirm │ ├── style │ │ └── index.js │ └── demo │ │ ├── locale.md │ │ └── basic.md ├── calendar │ ├── locale │ │ ├── en_US.tsx │ │ ├── ru_RU.tsx │ │ └── zh_CN.tsx │ ├── style │ │ └── index.js │ └── demo │ │ ├── basic.md │ │ ├── card.md │ │ ├── locale.md │ │ └── custom-render.md ├── modal │ ├── style │ │ ├── index.less │ │ └── index.js │ └── demo │ │ ├── manual.md │ │ └── confirm.md ├── cascader │ └── style │ │ └── index.js ├── dropdown │ ├── style │ │ └── index.js │ └── demo │ │ └── sub-menu.md ├── select │ ├── style │ │ └── index.js │ └── demo │ │ └── search.md ├── slider │ ├── style │ │ └── index.js │ └── demo │ │ ├── tip-formatter.md │ │ ├── basic.md │ │ └── event.md ├── tree │ └── style │ │ ├── index.js │ │ └── mixin.less ├── upload │ ├── style │ │ └── index.js │ └── demo │ │ └── beforeUpload.md ├── time-picker │ ├── style │ │ └── index.js │ ├── locale │ │ ├── zh_CN.tsx │ │ ├── en_US.tsx │ │ └── ru_RU.tsx │ └── demo │ │ ├── disabled.md │ │ ├── without-seconds.md │ │ ├── basic.md │ │ ├── size.md │ │ └── value.md ├── date-picker │ ├── style │ │ ├── MonthPicker.less │ │ ├── index.js │ │ └── index.less │ ├── demo │ │ ├── disabled.md │ │ ├── basic.md │ │ ├── month-picker.md │ │ ├── formatter.md │ │ ├── size.md │ │ ├── time.md │ │ └── disabled-date.md │ └── locale │ │ ├── en_US.tsx │ │ ├── ru_RU.tsx │ │ └── zh_CN.tsx ├── tree-select │ └── style │ │ └── index.tsx ├── transfer │ └── style │ │ └── index.js └── index.js ├── src ├── pages │ ├── affix │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── bottom.md │ │ │ ├── offset.md │ │ │ ├── on-change.md │ │ │ ├── index.vue │ │ │ ├── Basic.vue │ │ │ ├── Offset.vue │ │ │ └── Bottom.vue │ │ └── index.vue │ ├── badge │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── dot.md │ │ │ ├── change.md │ │ │ ├── link.md │ │ │ ├── 99plus.md │ │ │ ├── overflow.md │ │ │ └── no-wrapper.md │ │ └── index.vue │ ├── card │ │ ├── demo │ │ │ ├── simple.md │ │ │ ├── basic.md │ │ │ ├── loading.md │ │ │ ├── grid.md │ │ │ ├── no-padding.md │ │ │ └── border-less.md │ │ ├── index.vue │ │ └── index.zh-CN.md │ ├── input │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── group.md │ │ │ ├── addon.md │ │ │ ├── search-input.md │ │ │ ├── textarea.md │ │ │ ├── autosize-textarea.md │ │ │ ├── size.md │ │ │ ├── Textarea.vue │ │ │ └── Basic.vue │ │ └── index.vue │ ├── message │ │ ├── demo │ │ │ ├── info.md │ │ │ ├── duration.md │ │ │ ├── index.vue │ │ │ └── loading.md │ │ └── index.vue │ ├── modal │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── manual.md │ │ │ ├── async.md │ │ │ ├── info.md │ │ │ ├── confirm.md │ │ │ ├── footer.md │ │ │ ├── confirm-promise.md │ │ │ └── position.md │ │ └── index.vue │ ├── pagination │ │ ├── demo │ │ │ ├── more.md │ │ │ ├── basic.md │ │ │ ├── simple.md │ │ │ ├── jump.md │ │ │ ├── index.vue │ │ │ ├── changer.md │ │ │ ├── total.md │ │ │ ├── mini.md │ │ │ ├── Basic.vue │ │ │ ├── More.vue │ │ │ └── controlled.md │ │ └── index.vue │ ├── progress │ │ ├── demo │ │ │ ├── line.md │ │ │ ├── circle.md │ │ │ ├── circle-mini.md │ │ │ ├── dynamic.md │ │ │ ├── line-mini.md │ │ │ ├── format.md │ │ │ └── circle-dynamic.md │ │ └── index.vue │ ├── radio │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── disable.md │ │ │ ├── radiobutton.md │ │ │ ├── size.md │ │ │ ├── radiogroup-more.md │ │ │ ├── radiogroup.md │ │ │ └── Basic.vue │ │ └── index.vue │ ├── rate │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── half.md │ │ │ ├── disabled.md │ │ │ ├── text.md │ │ │ ├── Basic.vue │ │ │ ├── index.vue │ │ │ ├── Half.vue │ │ │ └── Disabled.vue │ │ ├── index.vue │ │ └── index.zh-CN.md │ ├── spin │ │ ├── demo │ │ │ ├── inside.md │ │ │ ├── basic.md │ │ │ ├── nested.md │ │ │ ├── size.md │ │ │ ├── Basic.vue │ │ │ ├── tip.md │ │ │ ├── index.vue │ │ │ └── Size.vue │ │ ├── index.vue │ │ └── index.zh-CN.md │ ├── steps │ │ ├── demo │ │ │ ├── simple.md │ │ │ ├── vertical.md │ │ │ ├── vertical-small.md │ │ │ ├── error.md │ │ │ ├── step-next.md │ │ │ ├── icon.md │ │ │ └── small-size.md │ │ └── index.vue │ ├── switch │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── text.md │ │ │ ├── disabled.md │ │ │ ├── size.md │ │ │ ├── Size.vue │ │ │ ├── index.vue │ │ │ └── Basic.vue │ │ └── index.vue │ ├── tabs │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── index.vue │ │ │ └── Basic.vue │ │ └── index.vue │ ├── tag │ │ ├── demo │ │ │ ├── colorful.md │ │ │ ├── basic.md │ │ │ └── index.vue │ │ ├── index.vue │ │ └── index.zh-CN.md │ ├── tooltip │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── placement.md │ │ │ ├── index.vue │ │ │ └── Basic.vue │ │ └── index.vue │ ├── back-top │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── custom.md │ │ │ ├── index.vue │ │ │ └── Basic.vue │ │ ├── index.vue │ │ └── index.zh-CN.md │ ├── breadcrumb │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── index.vue │ │ │ ├── withIcon.md │ │ │ └── separator.md │ │ └── index.vue │ ├── collapse │ │ ├── demo │ │ │ ├── mix.md │ │ │ ├── basic.md │ │ │ ├── accordion.md │ │ │ └── index.vue │ │ └── index.vue │ ├── input-number │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── size.md │ │ │ ├── index.vue │ │ │ └── digit.md │ │ └── index.vue │ ├── timeline │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── custom.md │ │ │ ├── color.md │ │ │ ├── pending.md │ │ │ └── index.vue │ │ └── index.vue │ ├── alert │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── closable.md │ │ │ ├── style.md │ │ │ ├── close-text.md │ │ │ ├── banner.md │ │ │ ├── Basic.vue │ │ │ └── CloseText.vue │ │ └── index.vue │ ├── checkbox │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── disabled.md │ │ │ ├── controller.md │ │ │ ├── group.md │ │ │ └── index.vue │ │ └── index.vue │ ├── form │ │ ├── demo │ │ │ ├── inline-form.md │ │ │ ├── input-group.md │ │ │ ├── mix.md │ │ │ ├── horizontal-form.md │ │ │ └── advanced-search-form.md │ │ └── index.vue │ ├── layout │ │ ├── demo │ │ │ ├── flex-align.md │ │ │ ├── flex-order.md │ │ │ ├── sort.md │ │ │ ├── gutter.md │ │ │ ├── offset.md │ │ │ ├── basic.md │ │ │ ├── flex.md │ │ │ ├── reponsive.md │ │ │ └── reponsive-more.md │ │ └── index.vue │ ├── table │ │ ├── demo │ │ │ ├── basic.md │ │ │ ├── row-selection.md │ │ │ └── index.vue │ │ └── index.vue │ ├── notification │ │ ├── demo │ │ │ ├── with-icon.md │ │ │ ├── basic.md │ │ │ ├── duration.md │ │ │ └── index.vue │ │ └── index.vue │ ├── icon │ │ └── index.vue │ └── Demo.vue ├── assets │ └── logo.png ├── App.vue ├── components │ └── CopyClipboard.vue ├── sass │ └── site │ │ ├── new-version-info-modal.less │ │ ├── style.js │ │ ├── footer.less │ │ ├── not-found.less │ │ └── page-nav.less └── main.js ├── .eslintignore ├── config ├── bundle.env.js ├── prod.env.js ├── test.env.js └── dev.env.js ├── .babelrc ├── .gitignore ├── test ├── unit │ ├── .eslintrc │ ├── specs │ │ └── Hello.spec.js │ └── index.js └── e2e │ └── specs │ └── test.js ├── .editorconfig ├── index.html ├── .tags1 ├── .eslintrc.js └── README.md /static/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/locale-provider/style/index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/pages/affix/demo/basic.md: -------------------------------------------------------------------------------- 1 | 最简单的用法。 2 | -------------------------------------------------------------------------------- /src/pages/affix/demo/bottom.md: -------------------------------------------------------------------------------- 1 | 固定在屏幕下方。 2 | -------------------------------------------------------------------------------- /src/pages/badge/demo/basic.md: -------------------------------------------------------------------------------- 1 | 简单的徽章展示。 2 | -------------------------------------------------------------------------------- /src/pages/badge/demo/dot.md: -------------------------------------------------------------------------------- 1 | 没有具体的数字。 2 | -------------------------------------------------------------------------------- /src/pages/card/demo/simple.md: -------------------------------------------------------------------------------- 1 | 只包含内容区域。 2 | -------------------------------------------------------------------------------- /src/pages/input/demo/basic.md: -------------------------------------------------------------------------------- 1 | 基本使用。 2 | -------------------------------------------------------------------------------- /src/pages/input/demo/group.md: -------------------------------------------------------------------------------- 1 | 输入框的组合展现。 2 | -------------------------------------------------------------------------------- /src/pages/message/demo/info.md: -------------------------------------------------------------------------------- 1 | 信息提醒反馈。 2 | -------------------------------------------------------------------------------- /src/pages/modal/demo/basic.md: -------------------------------------------------------------------------------- 1 | 第一个对话框。 2 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/more.md: -------------------------------------------------------------------------------- 1 | 更多分页。 2 | -------------------------------------------------------------------------------- /src/pages/progress/demo/line.md: -------------------------------------------------------------------------------- 1 | 标准的进度条。 2 | -------------------------------------------------------------------------------- /src/pages/radio/demo/basic.md: -------------------------------------------------------------------------------- 1 | 最简单的用法。 2 | -------------------------------------------------------------------------------- /src/pages/rate/demo/basic.md: -------------------------------------------------------------------------------- 1 | 最简单的用法。 2 | -------------------------------------------------------------------------------- /src/pages/rate/demo/half.md: -------------------------------------------------------------------------------- 1 | 支持选中半星。 2 | -------------------------------------------------------------------------------- /src/pages/spin/demo/inside.md: -------------------------------------------------------------------------------- 1 | 放入一个容器中。 2 | -------------------------------------------------------------------------------- /src/pages/steps/demo/simple.md: -------------------------------------------------------------------------------- 1 | 简单的步骤条。 2 | -------------------------------------------------------------------------------- /src/pages/switch/demo/basic.md: -------------------------------------------------------------------------------- 1 | 最简单的用法。 2 | -------------------------------------------------------------------------------- /src/pages/switch/demo/text.md: -------------------------------------------------------------------------------- 1 | 带有文字和图标。 2 | -------------------------------------------------------------------------------- /src/pages/tabs/demo/basic.md: -------------------------------------------------------------------------------- 1 | 默认选中第一项。 2 | -------------------------------------------------------------------------------- /src/pages/tag/demo/colorful.md: -------------------------------------------------------------------------------- 1 | 四种颜色的标签。 2 | -------------------------------------------------------------------------------- /src/pages/tooltip/demo/basic.md: -------------------------------------------------------------------------------- 1 | 最简单的用法。 2 | -------------------------------------------------------------------------------- /src/pages/affix/demo/offset.md: -------------------------------------------------------------------------------- 1 | 达到一定的偏移量才触发。 2 | -------------------------------------------------------------------------------- /src/pages/back-top/demo/basic.md: -------------------------------------------------------------------------------- 1 | 最简单的用法。 2 | -------------------------------------------------------------------------------- /src/pages/badge/demo/change.md: -------------------------------------------------------------------------------- 1 | 展示动态变化的效果。 2 | -------------------------------------------------------------------------------- /src/pages/badge/demo/link.md: -------------------------------------------------------------------------------- 1 | 用 a 标签进行包裹即可。 2 | -------------------------------------------------------------------------------- /src/pages/breadcrumb/demo/basic.md: -------------------------------------------------------------------------------- 1 | 最简单的用法。 2 | -------------------------------------------------------------------------------- /src/pages/card/demo/basic.md: -------------------------------------------------------------------------------- 1 | 包含标题、内容、操作区域。 2 | -------------------------------------------------------------------------------- /src/pages/card/demo/loading.md: -------------------------------------------------------------------------------- 1 | 数据读入前会有文本块样式。 2 | -------------------------------------------------------------------------------- /src/pages/collapse/demo/mix.md: -------------------------------------------------------------------------------- 1 | 手风琴嵌套折叠面板。 2 | -------------------------------------------------------------------------------- /src/pages/input-number/demo/basic.md: -------------------------------------------------------------------------------- 1 | 数字输入框。 2 | -------------------------------------------------------------------------------- /src/pages/input/demo/addon.md: -------------------------------------------------------------------------------- 1 | 用于配置一些固定组合。 2 | -------------------------------------------------------------------------------- /src/pages/modal/demo/manual.md: -------------------------------------------------------------------------------- 1 | 手动关闭modal。 2 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/basic.md: -------------------------------------------------------------------------------- 1 | 基础分页。 2 | -------------------------------------------------------------------------------- /src/pages/progress/demo/circle.md: -------------------------------------------------------------------------------- 1 | 圈形的进度。 2 | -------------------------------------------------------------------------------- /src/pages/radio/demo/disable.md: -------------------------------------------------------------------------------- 1 | Radio 不可用。 2 | -------------------------------------------------------------------------------- /src/pages/rate/demo/disabled.md: -------------------------------------------------------------------------------- 1 | 只读，无法进行鼠标交互。 2 | -------------------------------------------------------------------------------- /src/pages/rate/demo/text.md: -------------------------------------------------------------------------------- 1 | 给评分组件加上文案展示。 2 | -------------------------------------------------------------------------------- /src/pages/timeline/demo/basic.md: -------------------------------------------------------------------------------- 1 | 基本的时间轴。 2 | -------------------------------------------------------------------------------- /components/style/index.js: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /src/pages/affix/demo/on-change.md: -------------------------------------------------------------------------------- 1 | 可以获得是否固定的状态。 2 | -------------------------------------------------------------------------------- /src/pages/alert/demo/basic.md: -------------------------------------------------------------------------------- 1 | 最简单的用法，适用于简短的警告提示。 2 | -------------------------------------------------------------------------------- /src/pages/badge/demo/99plus.md: -------------------------------------------------------------------------------- 1 | 超过 99 的会显示为 `99+`。 2 | -------------------------------------------------------------------------------- /src/pages/card/demo/grid.md: -------------------------------------------------------------------------------- 1 | 在系统概览页面常常和栅格进行配合。 2 | -------------------------------------------------------------------------------- /src/pages/card/demo/no-padding.md: -------------------------------------------------------------------------------- 1 | 可以调整默认边距，设定宽度。 2 | -------------------------------------------------------------------------------- /src/pages/checkbox/demo/basic.md: -------------------------------------------------------------------------------- 1 | 简单的 checkbox。 2 | -------------------------------------------------------------------------------- /src/pages/checkbox/demo/disabled.md: -------------------------------------------------------------------------------- 1 | checkbox 不可用。 2 | -------------------------------------------------------------------------------- /src/pages/form/demo/inline-form.md: -------------------------------------------------------------------------------- 1 | 行内排列，常用于登录界面。 2 | -------------------------------------------------------------------------------- /src/pages/form/demo/input-group.md: -------------------------------------------------------------------------------- 1 | 各类输入框的组合展现。 2 | -------------------------------------------------------------------------------- /src/pages/input/demo/search-input.md: -------------------------------------------------------------------------------- 1 | 带有搜索按钮的输入框。 2 | -------------------------------------------------------------------------------- /src/pages/layout/demo/flex-align.md: -------------------------------------------------------------------------------- 1 | Flex 子元素垂直对齐。 2 | -------------------------------------------------------------------------------- /src/pages/progress/demo/circle-mini.md: -------------------------------------------------------------------------------- 1 | 小一号的圈形进度。 2 | -------------------------------------------------------------------------------- /src/pages/progress/demo/dynamic.md: -------------------------------------------------------------------------------- 1 | 会动的进度条才是好进度条。 2 | -------------------------------------------------------------------------------- /src/pages/progress/demo/line-mini.md: -------------------------------------------------------------------------------- 1 | 适合放在较狭窄的区域内。 2 | -------------------------------------------------------------------------------- /src/pages/radio/demo/radiobutton.md: -------------------------------------------------------------------------------- 1 | 按钮样式的单选组合。 2 | -------------------------------------------------------------------------------- /src/pages/spin/demo/basic.md: -------------------------------------------------------------------------------- 1 | 一个简单的 loading 状态。 2 | -------------------------------------------------------------------------------- /src/pages/steps/demo/vertical.md: -------------------------------------------------------------------------------- 1 | 简单的竖直方向的步骤条。 2 | -------------------------------------------------------------------------------- /src/pages/switch/demo/disabled.md: -------------------------------------------------------------------------------- 1 | Switch 失效状态。 2 | -------------------------------------------------------------------------------- /src/pages/table/demo/basic.md: -------------------------------------------------------------------------------- 1 | 简单的表格，最后一列是各种操作。 2 | -------------------------------------------------------------------------------- /src/pages/table/demo/row-selection.md: -------------------------------------------------------------------------------- 1 | 第一列是联动的选择框。 2 | -------------------------------------------------------------------------------- /src/pages/tooltip/demo/placement.md: -------------------------------------------------------------------------------- 1 | 位置有 12 个方向。 2 | -------------------------------------------------------------------------------- /src/pages/alert/demo/closable.md: -------------------------------------------------------------------------------- 1 | 显示关闭按钮，点击可关闭警告提示。 2 | -------------------------------------------------------------------------------- /src/pages/card/demo/border-less.md: -------------------------------------------------------------------------------- 1 | 在灰色背景上使用无边框的卡片。 2 | -------------------------------------------------------------------------------- /src/pages/checkbox/demo/controller.md: -------------------------------------------------------------------------------- 1 | 联动 checkbox。 2 | -------------------------------------------------------------------------------- /src/pages/checkbox/demo/group.md: -------------------------------------------------------------------------------- 1 | 方便的从数组生成 Checkbox 组。 2 | -------------------------------------------------------------------------------- /src/pages/modal/demo/async.md: -------------------------------------------------------------------------------- 1 | 点击确定后异步关闭对话框，例如提交表单。 2 | -------------------------------------------------------------------------------- /src/pages/modal/demo/info.md: -------------------------------------------------------------------------------- 1 | 各种类型的信息提示，只提供一个按钮用于关闭。 2 | -------------------------------------------------------------------------------- /src/pages/notification/demo/with-icon.md: -------------------------------------------------------------------------------- 1 | 通知提醒框左侧有图标。 2 | -------------------------------------------------------------------------------- /src/pages/progress/demo/format.md: -------------------------------------------------------------------------------- 1 | `format` 属性指定格式。 2 | -------------------------------------------------------------------------------- /src/pages/radio/demo/size.md: -------------------------------------------------------------------------------- 1 | 大中小三种组合，可以和表单输入框进行对应配合。 2 | -------------------------------------------------------------------------------- /src/pages/steps/demo/vertical-small.md: -------------------------------------------------------------------------------- 1 | 简单的竖直方向的小型步骤条。 2 | -------------------------------------------------------------------------------- /src/pages/switch/demo/size.md: -------------------------------------------------------------------------------- 1 | `size="small"` 表示小号开关。 2 | -------------------------------------------------------------------------------- /src/pages/tag/demo/basic.md: -------------------------------------------------------------------------------- 1 | 简单的标签展示，添加 closable 表示可关闭。 2 | -------------------------------------------------------------------------------- /src/pages/timeline/demo/custom.md: -------------------------------------------------------------------------------- 1 | 可以设置为图标或其他自定义元素。 2 | -------------------------------------------------------------------------------- /components/mention/style/index.js: -------------------------------------------------------------------------------- 1 | import './index.less'; 2 | -------------------------------------------------------------------------------- /src/pages/collapse/demo/basic.md: -------------------------------------------------------------------------------- 1 | 可以同时展开多个面板，这个例子默认展开了第一个。 2 | -------------------------------------------------------------------------------- /src/pages/form/demo/mix.md: -------------------------------------------------------------------------------- 1 | 集中营，展示和表单相关的其他 ant-design 组件。 2 | -------------------------------------------------------------------------------- /src/pages/modal/demo/confirm.md: -------------------------------------------------------------------------------- 1 | 使用 `confirm()` 可以快捷地弹出确认框。 2 | -------------------------------------------------------------------------------- /src/pages/notification/demo/basic.md: -------------------------------------------------------------------------------- 1 | 最简单的用法，4.5 秒后自动关闭。 2 | -------------------------------------------------------------------------------- /src/pages/progress/demo/circle-dynamic.md: -------------------------------------------------------------------------------- 1 | 会动的进度条才是好进度条。 2 | -------------------------------------------------------------------------------- /components/icon/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | -------------------------------------------------------------------------------- /src/pages/collapse/demo/accordion.md: -------------------------------------------------------------------------------- 1 | 手风琴，每次只打开一个tab。默认打开第一个。 2 | -------------------------------------------------------------------------------- /src/pages/layout/demo/flex-order.md: -------------------------------------------------------------------------------- 1 | 通过 Flex 布局的 Order 来改变元素的排序。 2 | -------------------------------------------------------------------------------- /src/pages/spin/demo/nested.md: -------------------------------------------------------------------------------- 1 | 可以直接把内容内嵌到 `Spin` 中，将现有容器变为加载状态。 2 | -------------------------------------------------------------------------------- /src/pages/spin/demo/size.md: -------------------------------------------------------------------------------- 1 | 小的用于文本加载，默认用于卡片容器级加载，大的用于**页面级**加载。 2 | -------------------------------------------------------------------------------- /src/pages/steps/demo/error.md: -------------------------------------------------------------------------------- 1 | 使用 Steps 的 `status` 属性来指定当前步骤的状态。 2 | -------------------------------------------------------------------------------- /src/pages/steps/demo/step-next.md: -------------------------------------------------------------------------------- 1 | 随机生成 3~6 个步骤，初始随机进行到其中一个步骤。 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | components/* 4 | lib/*.js -------------------------------------------------------------------------------- /components/rate/star.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/Star'); 2 | -------------------------------------------------------------------------------- /src/pages/back-top/demo/custom.md: -------------------------------------------------------------------------------- 1 | 可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。 2 | -------------------------------------------------------------------------------- /src/pages/input/demo/textarea.md: -------------------------------------------------------------------------------- 1 | 用于多行输入，指定 `type` 为一个特殊的 `textarea`。 2 | -------------------------------------------------------------------------------- /src/pages/radio/demo/radiogroup-more.md: -------------------------------------------------------------------------------- 1 | 垂直的 RadioGroup，配合更多输入框选项。 2 | -------------------------------------------------------------------------------- /src/pages/steps/demo/icon.md: -------------------------------------------------------------------------------- 1 | 通过设置 `ant-step` 的 `icon` 属性，可以启用自定义图标。 2 | -------------------------------------------------------------------------------- /components/steps/step.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/Steps'); 2 | -------------------------------------------------------------------------------- /config/bundle.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"bundle"' 3 | } 4 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/alert/demo/style.md: -------------------------------------------------------------------------------- 1 | 共有四种样式 `success`、`info`、`warning`、`error`。 2 | -------------------------------------------------------------------------------- /src/pages/modal/demo/footer.md: -------------------------------------------------------------------------------- 1 | 更复杂的例子，自定义了页脚的按钮，点击提交后进入 loading 状态，完成后关闭。 2 | -------------------------------------------------------------------------------- /src/pages/steps/demo/small-size.md: -------------------------------------------------------------------------------- 1 | 迷你版的步骤条，通过设置 `` 启用. 2 | -------------------------------------------------------------------------------- /components/form/form.item.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/FormItem'); 2 | -------------------------------------------------------------------------------- /components/menu/menu.item.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/MenuItem'); 2 | -------------------------------------------------------------------------------- /components/menu/sub.menu.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/SubMenu'); 2 | -------------------------------------------------------------------------------- /src/pages/badge/demo/overflow.md: -------------------------------------------------------------------------------- 1 | 超过 `overflowCount` 的会显示为 `${overflowCount}+`。 2 | -------------------------------------------------------------------------------- /src/pages/form/demo/horizontal-form.md: -------------------------------------------------------------------------------- 1 | 示例展示了如何通过使用 `Form.create` 来获取和更新表单提交的数值。 2 | -------------------------------------------------------------------------------- /components/input/input.group.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/InputGroup'); 2 | -------------------------------------------------------------------------------- /components/radio/radio.group.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/RadioGroup'); 2 | -------------------------------------------------------------------------------- /components/tabs/tabs.plane.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/TabsPlane.vue'); 2 | -------------------------------------------------------------------------------- /src/pages/notification/demo/duration.md: -------------------------------------------------------------------------------- 1 | 自定义通知框自动关闭的延时，默认`4.5s`，取消自动关闭只要将该值设为 `0` 即可。 2 | -------------------------------------------------------------------------------- /src/pages/timeline/demo/color.md: -------------------------------------------------------------------------------- 1 | 圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。 2 | -------------------------------------------------------------------------------- /components/affix/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Affix'); 3 | -------------------------------------------------------------------------------- /components/alert/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Alert') 3 | -------------------------------------------------------------------------------- /components/badge/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Badge'); 3 | -------------------------------------------------------------------------------- /components/card/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Card') 3 | -------------------------------------------------------------------------------- /components/menu/menu.item.group.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/MenuItemGroup'); 2 | -------------------------------------------------------------------------------- /components/radio/radio.button.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/RadioButton'); 2 | -------------------------------------------------------------------------------- /components/style/index.less: -------------------------------------------------------------------------------- 1 | @import "./themes/default"; 2 | @import "./core/index.less"; 3 | -------------------------------------------------------------------------------- /components/tag/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Tag'); 3 | -------------------------------------------------------------------------------- /components/tag/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kokoroX/vue-ant-ui/HEAD/src/assets/logo.png -------------------------------------------------------------------------------- /src/pages/layout/demo/sort.md: -------------------------------------------------------------------------------- 1 | 列排序。 2 | 3 | 通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。 4 | -------------------------------------------------------------------------------- /components/affix/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/alert/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/back-top/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/BackTop'); 3 | -------------------------------------------------------------------------------- /components/back-top/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/badge/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/button/button.group.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/buttonGroup.vue'); 2 | -------------------------------------------------------------------------------- /components/button/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/card/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/carousel/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/checkbox/checkbox.group.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/CheckboxGroup'); 2 | -------------------------------------------------------------------------------- /components/checkbox/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/collapse/collapse.panel.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/CollapsePanel'); 2 | -------------------------------------------------------------------------------- /components/collapse/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/form/form.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Form'); 3 | -------------------------------------------------------------------------------- /components/icon/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Icon.vue'); 3 | -------------------------------------------------------------------------------- /components/input/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/layout/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/menu/menu.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Menu'); 3 | -------------------------------------------------------------------------------- /components/menu/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/message/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/popover/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/progress/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/radio/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/rate/rate.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Rate'); 3 | -------------------------------------------------------------------------------- /components/rate/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/spin/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Spin.vue'); 3 | -------------------------------------------------------------------------------- /components/spin/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/steps/steps.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Step'); 3 | -------------------------------------------------------------------------------- /components/steps/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/switch/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Switch'); 3 | -------------------------------------------------------------------------------- /components/switch/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/tabs/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/timeline/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/timeline/timeline.item.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/TimelineItem'); 2 | -------------------------------------------------------------------------------- /components/tooltip/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Tooltip'); 3 | -------------------------------------------------------------------------------- /components/tooltip/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /src/pages/radio/demo/radiogroup.md: -------------------------------------------------------------------------------- 1 | 一组互斥的 Radio 配合使用。 2 | 请使用e.target的_value属性 value会自动转换成字符串 3 | -------------------------------------------------------------------------------- /components/auto-complete/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/breadcrumb/breadcrumb.item.index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./src/BreadcrumbItem'); 2 | -------------------------------------------------------------------------------- /components/breadcrumb/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/col/col.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('../layout/src/Col'); 3 | -------------------------------------------------------------------------------- /components/input-number/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/input/input.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Input'); 3 | -------------------------------------------------------------------------------- /components/notification/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | -------------------------------------------------------------------------------- /components/pagination/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Pagination'); 3 | -------------------------------------------------------------------------------- /components/progress/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Progress'); 3 | -------------------------------------------------------------------------------- /components/radio/radio.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Radio'); 3 | -------------------------------------------------------------------------------- /components/row/row.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('../layout/src/Row'); 3 | -------------------------------------------------------------------------------- /components/table/table.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Table.vue'); 3 | -------------------------------------------------------------------------------- /components/tabs/tabs.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Tabs.vue'); 3 | -------------------------------------------------------------------------------- /src/pages/modal/demo/confirm-promise.md: -------------------------------------------------------------------------------- 1 | 使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭 2 | -------------------------------------------------------------------------------- /components/button/button.index.js: -------------------------------------------------------------------------------- 1 | require('./style'); 2 | module.exports = require('./src/Button.vue'); 3 | -------------------------------------------------------------------------------- /components/checkbox/checkbox.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Checkbox'); 3 | -------------------------------------------------------------------------------- /components/collapse/collapse.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Collapse'); 3 | -------------------------------------------------------------------------------- /components/input-number/index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/InputNumber'); 3 | -------------------------------------------------------------------------------- /components/popconfirm/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import '../../popover/style'; 3 | -------------------------------------------------------------------------------- /components/timeline/timeline.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Timeline'); 3 | -------------------------------------------------------------------------------- /src/pages/layout/demo/gutter.md: -------------------------------------------------------------------------------- 1 | 栅格常常需要和间隔进行配合，你可以使用 `ant-row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。 2 | -------------------------------------------------------------------------------- /src/pages/modal/demo/position.md: -------------------------------------------------------------------------------- 1 | `1.0` 之后，Modal 的 `align` 属性被移除，您可以直接使用 `style.top` 或配合其他样式来设置对话框位置。 2 | -------------------------------------------------------------------------------- /components/col/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import '../../layout/style/index.less'; 3 | -------------------------------------------------------------------------------- /components/row/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import '../../layout/style/index.less'; 3 | -------------------------------------------------------------------------------- /src/pages/layout/demo/offset.md: -------------------------------------------------------------------------------- 1 | 列偏移。 2 | 3 | 使用 `offset` 可以将列向右侧偏。例如，`offset="4"` 将元素向右侧偏移了 4 个列（column）的宽度。 4 | -------------------------------------------------------------------------------- /components/auto-complete/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | @import "../../select/style/index"; -------------------------------------------------------------------------------- /components/breadcrumb/breadcrumb.index.js: -------------------------------------------------------------------------------- 1 | require('./style') 2 | module.exports = require('./src/Breadcrumb'); 3 | -------------------------------------------------------------------------------- /components/calendar/locale/en_US.tsx: -------------------------------------------------------------------------------- 1 | import en_US from '../../date-picker/locale/en_US'; 2 | export default en_US; 3 | -------------------------------------------------------------------------------- /components/calendar/locale/ru_RU.tsx: -------------------------------------------------------------------------------- 1 | import ru_RU from '../../date-picker/locale/ru_RU'; 2 | export default ru_RU; 3 | -------------------------------------------------------------------------------- /components/calendar/locale/zh_CN.tsx: -------------------------------------------------------------------------------- 1 | import zh_CN from '../../date-picker/locale/zh_CN'; 2 | export default zh_CN; 3 | -------------------------------------------------------------------------------- /src/pages/input-number/demo/size.md: -------------------------------------------------------------------------------- 1 | 三种大小的数字输入框，当 size 分别为 `large` 和 `small` 时，输入框高度为 `32px` 和 `22px` ，默认高度为 `28px` 2 | -------------------------------------------------------------------------------- /components/modal/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | @import "./modal"; 3 | @import "./confirm"; 4 | -------------------------------------------------------------------------------- /components/pagination/locale/en_US.tsx: -------------------------------------------------------------------------------- 1 | import en_US from 'rc-pagination/lib/locale/en_US'; 2 | export default en_US; 3 | -------------------------------------------------------------------------------- /components/pagination/locale/zh_CN.tsx: -------------------------------------------------------------------------------- 1 | import zh_CN from 'rc-pagination/lib/locale/zh_CN'; 2 | export default zh_CN; 3 | -------------------------------------------------------------------------------- /src/pages/form/demo/advanced-search-form.md: -------------------------------------------------------------------------------- 1 | 三列栅格式的表单排列方式，常用于数据表格的高级搜索。 2 | 3 | 有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。 4 | -------------------------------------------------------------------------------- /src/pages/timeline/demo/pending.md: -------------------------------------------------------------------------------- 1 | 在最后位置添加一个幽灵节点，表示时间轴未完成，还在记录过程中。可以指定 `pending={true}` 或者 `pending={一个 React 元素}`。 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /components/checkbox/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | @import "./mixin"; 3 | 4 | .antCheckboxFn(); 5 | -------------------------------------------------------------------------------- /src/pages/input/demo/autosize-textarea.md: -------------------------------------------------------------------------------- 1 | `autosize` 属性适用于 `textarea` 节点，并且只有高度会自动变化。另外 `autosize` 可以设定为一个对象，指定最小行数和最大行数。 2 | -------------------------------------------------------------------------------- /components/style/core/index.less: -------------------------------------------------------------------------------- 1 | @import "../mixins/index"; 2 | @import "base"; 3 | @import "iconfont"; 4 | @import "motion"; 5 | -------------------------------------------------------------------------------- /src/pages/input/demo/size.md: -------------------------------------------------------------------------------- 1 | 我们为 `` 输入框定义了三种尺寸（大、默认、小），高度分别为 `32px`、`28px` 和 `22px`。 2 | 3 | 注意： 在表单里面，我们只使用大尺寸的输入框。 4 | -------------------------------------------------------------------------------- /src/pages/layout/demo/basic.md: -------------------------------------------------------------------------------- 1 | 从堆叠到水平排列。 2 | 3 | 使用单一的一组 `ant-row` 和 `ant-col` 栅格组件，就可以创建一个基本的栅格系统，所有列（ant-col）必须放在 `ant-row` 内。 4 | -------------------------------------------------------------------------------- /src/pages/layout/demo/flex.md: -------------------------------------------------------------------------------- 1 | 使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。 2 | -------------------------------------------------------------------------------- /src/pages/layout/demo/reponsive.md: -------------------------------------------------------------------------------- 1 | 参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设四个响应尺寸：`xs` `sm` `md` `lg`。 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | selenium-debug.log 6 | test/unit/coverage 7 | test/e2e/reports 8 | .tags 9 | .tags1 -------------------------------------------------------------------------------- /components/affix/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | 3 | .ant-affix { 4 | position: fixed; 5 | z-index: @zindex-affix; 6 | } 7 | -------------------------------------------------------------------------------- /components/form/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../layout/style'; 6 | -------------------------------------------------------------------------------- /components/cascader/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../input/style'; 6 | -------------------------------------------------------------------------------- /components/dropdown/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../button/style'; 6 | -------------------------------------------------------------------------------- /components/modal/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../button/style'; 6 | -------------------------------------------------------------------------------- /components/select/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../input/style'; 6 | -------------------------------------------------------------------------------- /components/slider/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../tooltip/style'; 6 | -------------------------------------------------------------------------------- /components/tree/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../checkbox/style'; 6 | -------------------------------------------------------------------------------- /components/upload/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../progress/style'; 6 | -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | }, 5 | "globals": { 6 | "expect": true, 7 | "sinon": true 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /components/time-picker/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../input/style'; 6 | -------------------------------------------------------------------------------- /src/pages/layout/demo/reponsive-more.md: -------------------------------------------------------------------------------- 1 | `span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` 属性中来使用。 2 | 3 | 其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。 4 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var devEnv = require('./dev.env') 3 | 4 | module.exports = merge(devEnv, { 5 | NODE_ENV: '"testing"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /components/calendar/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../select/style'; 6 | import '../../radio/style'; 7 | -------------------------------------------------------------------------------- /components/date-picker/style/MonthPicker.less: -------------------------------------------------------------------------------- 1 | .@{calendar-prefix-cls}-month { 2 | .@{calendar-prefix-cls}-month-panel, 3 | .@{calendar-prefix-cls}-year-panel { 4 | top: 0; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /components/pagination/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../select/style'; 6 | import '../../input/style'; 7 | -------------------------------------------------------------------------------- /components/date-picker/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../input/style'; 6 | import '../../time-picker/style'; 7 | -------------------------------------------------------------------------------- /components/tree-select/style/index.tsx: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../select/style'; 6 | import '../../checkbox/style'; 7 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /components/style/mixins/size.less: -------------------------------------------------------------------------------- 1 | // Sizing shortcuts 2 | 3 | .size(@width; @height) { 4 | width: @width; 5 | height: @height; 6 | } 7 | 8 | .square(@size) { 9 | .size(@size; @size); 10 | } 11 | -------------------------------------------------------------------------------- /components/style/mixins/opacity.less: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | .opacity(@opacity) { 4 | opacity: @opacity; 5 | // IE8 filter 6 | @opacity-ie: (@opacity * 100); 7 | filter: ~"alpha(opacity=@{opacity-ie})"; 8 | } 9 | -------------------------------------------------------------------------------- /components/transfer/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../checkbox/style'; 6 | import '../../button/style'; 7 | import '../../input/style'; 8 | -------------------------------------------------------------------------------- /components/tooltip/src/placeMap.txt: -------------------------------------------------------------------------------- 1 | top: translate(-50%,-100%); 2 | left: translate(-100%,-50%); 3 | bottom: translate(-50%,0%); 4 | right: translate(0%,-50%); 5 | 6 | top: 0.5, 0 7 | left: 0, 0.5 8 | bottom: 0.5, 1 9 | right: 1, 0.5 10 | -------------------------------------------------------------------------------- /components/button/src/ButtonGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /components/style/mixins/index.less: -------------------------------------------------------------------------------- 1 | // Mixins 2 | // -------------------------------------------------- 3 | @import "opacity.less"; 4 | @import "size.less"; 5 | @import "compatibility"; 6 | @import "clearfix"; 7 | @import "iconfont"; 8 | @import "motion"; 9 | -------------------------------------------------------------------------------- /components/time-picker/locale/zh_CN.tsx: -------------------------------------------------------------------------------- 1 | import TimepickerLocale from 'rc-time-picker/lib/locale/zh_CN'; 2 | import assign from 'object-assign'; 3 | const locale = assign({}, { 4 | placeholder: '请选择时间', 5 | }, TimepickerLocale); 6 | 7 | export default locale; 8 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-ant-ui 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /components/style/core/motion/other.less: -------------------------------------------------------------------------------- 1 | @keyframes loadingCircle { 2 | 0% { 3 | transform-origin: 50% 50%; 4 | transform: rotate(0deg); 5 | } 6 | 100% { 7 | transform-origin: 50% 50%; 8 | transform: rotate(360deg); 9 | } 10 | } 11 | 12 | -------------------------------------------------------------------------------- /components/time-picker/locale/en_US.tsx: -------------------------------------------------------------------------------- 1 | import TimepickerLocale from 'rc-time-picker/lib/locale/en_US'; 2 | import assign from 'object-assign'; 3 | const locale = assign({}, { 4 | placeholder: 'Select a time', 5 | }, TimepickerLocale); 6 | 7 | export default locale; 8 | -------------------------------------------------------------------------------- /components/table/style/index.js: -------------------------------------------------------------------------------- 1 | import '../../style/index.less'; 2 | import './index.less'; 3 | 4 | // style dependencies 5 | import '../../radio/style'; 6 | import '../../checkbox/style'; 7 | import '../../dropdown/style'; 8 | import '../../spin/style'; 9 | import '../../pagination/style'; 10 | -------------------------------------------------------------------------------- /components/icon/src/Icon.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /components/rate/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法。 11 | 12 | ## en-US 13 | 14 | The simplest usage. 15 | 16 | ````jsx 17 | import { Rate } from 'antd'; 18 | 19 | ReactDOM.render(, mountNode); 20 | ```` 21 | -------------------------------------------------------------------------------- /components/radio/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法。 11 | 12 | ## en-US 13 | 14 | The simplest use. 15 | 16 | ```jsx 17 | import { Radio } from 'antd'; 18 | 19 | ReactDOM.render(Radio, mountNode); 20 | ``` 21 | 2 22 | -------------------------------------------------------------------------------- /components/spin/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本用法 5 | en-US: basic Usage 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 一个简单的 loading 状态。 11 | 12 | ## en-US 13 | 14 | A simple loading status. 15 | 16 | ````jsx 17 | import { Spin } from 'antd'; 18 | 19 | ReactDOM.render(, mountNode); 20 | ```` 21 | -------------------------------------------------------------------------------- /src/pages/tag/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /components/input/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本使用 5 | en-US: Basic usage 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 基本使用。 11 | 12 | ## en-US 13 | 14 | Basic usage example 15 | 16 | ````jsx 17 | import { Input } from 'antd'; 18 | 19 | ReactDOM.render(, mountNode); 20 | ```` 21 | -------------------------------------------------------------------------------- /components/style/mixins/clearfix.less: -------------------------------------------------------------------------------- 1 | // mixins for clearfix 2 | // ------------------------ 3 | .clearfix() { 4 | zoom: 1; 5 | &:before, 6 | &:after { 7 | content: " "; 8 | display: table; 9 | } 10 | &:after { 11 | clear: both; 12 | visibility: hidden; 13 | font-size: 0; 14 | height: 0; 15 | } 16 | } -------------------------------------------------------------------------------- /src/pages/card/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/icon/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/rate/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/spin/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/tabs/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /components/rate/demo/half.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 半星 5 | en-US: Half star 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 支持选中半星。 11 | 12 | ## en-US 13 | 14 | Support select half star. 15 | 16 | ````jsx 17 | import { Rate } from 'antd'; 18 | 19 | ReactDOM.render(, mountNode); 20 | ```` 21 | -------------------------------------------------------------------------------- /components/time-picker/locale/ru_RU.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Andrey Gayvoronsky on 13/04/16. 3 | */ 4 | import TimepickerLocale from 'rc-time-picker/lib/locale/ru_RU'; 5 | import assign from 'object-assign'; 6 | const locale = assign({}, { 7 | placeholder: 'Выберите время', 8 | }, TimepickerLocale); 9 | 10 | export default locale; 11 | -------------------------------------------------------------------------------- /src/pages/affix/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/alert/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/badge/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/input/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/modal/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/radio/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/steps/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/layout/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/switch/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /.tags1: -------------------------------------------------------------------------------- 1 | !_TAG_FILE_FORMAT 2 /extended format; --format=1 will not append ;" to lines/ 2 | !_TAG_FILE_SORTED 0 /0=unsorted, 1=sorted, 2=foldcase/ 3 | !_TAG_PROGRAM_AUTHOR Darren Hiebert /dhiebert@users.sourceforge.net/ 4 | !_TAG_PROGRAM_NAME Exuberant Ctags // 5 | !_TAG_PROGRAM_URL http://ctags.sourceforge.net /official site/ 6 | !_TAG_PROGRAM_VERSION 5.8 // 7 | -------------------------------------------------------------------------------- /components/breadcrumb/src/Breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | -------------------------------------------------------------------------------- /src/pages/message/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/tooltip/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /components/pagination/demo/more.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 更多 5 | en-US: More 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 更多分页。 11 | 12 | ## en-US 13 | 14 | More pages. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | ReactDOM.render( 20 | , 21 | mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /src/pages/back-top/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/checkbox/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/collapse/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/progress/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/timeline/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /components/pagination/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 基础分页。 11 | 12 | ## en-US 13 | 14 | Basic pagination. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | ReactDOM.render( 20 | , 21 | mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /components/popconfirm/demo/locale.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 国际化 4 | --- 5 | 6 | 设置 `okText` `cancelText` 以自定义按钮文字。 7 | 8 | ````jsx 9 | import { Popconfirm } from 'antd'; 10 | 11 | ReactDOM.render( 12 | 13 | Delete 14 | 15 | , mountNode); 16 | ```` 17 | -------------------------------------------------------------------------------- /components/rate/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 只读 5 | en-US: Read only 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 只读，无法进行鼠标交互。 11 | 12 | ## en-US 13 | 14 | Read only, can't use mouse to interact. 15 | 16 | ````jsx 17 | import { Rate } from 'antd'; 18 | 19 | ReactDOM.render(, mountNode); 20 | ```` 21 | -------------------------------------------------------------------------------- /components/pagination/demo/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: 简洁 5 | en-US: Simple mode 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 简单的翻页。 11 | 12 | ## en-US 13 | 14 | Simple mode. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | ReactDOM.render( 20 | , 21 | mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /src/pages/breadcrumb/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: 简洁 5 | en-US: Simple mode 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 简单的翻页。 11 | 12 | ## en-US 13 | 14 | Simple mode. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | ReactDOM.render( 20 | , 21 | mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /src/pages/Demo.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 18 | 19 | 21 | -------------------------------------------------------------------------------- /src/pages/tabs/demo/index.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 19 | -------------------------------------------------------------------------------- /components/back-top/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法。 11 | 12 | ## en-US 13 | 14 | The most basic usage. 15 | 16 | ````jsx 17 | import { BackTop } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | 22 | 向下滚动后，见右下角灰色按钮 23 |
24 | , mountNode); 25 | ```` 26 | -------------------------------------------------------------------------------- /components/input/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | @import "../../style/mixins/index"; 3 | @import "./mixin"; 4 | @import "./search-input"; 5 | 6 | // Input styles 7 | .ant-input { 8 | .input; 9 | } 10 | 11 | //== Style for input-group: input with label, with button or dropdown... 12 | .ant-input-group { 13 | .input-group(~"ant-input"); 14 | } 15 | -------------------------------------------------------------------------------- /src/pages/input-number/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/pages/notification/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /components/alert/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法，适用于简短的警告提示。 11 | 12 | ## en-US 13 | 14 | The simplest usage for short messages. 15 | 16 | ````jsx 17 | import { Alert } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | , mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/jump.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 跳转 5 | en-US: Jumper 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 快速跳转到某一页。 11 | 12 | ## en-US 13 | 14 | Jump to a page directly. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | ReactDOM.render( 20 | , 21 | mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /components/affix/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法。 11 | 12 | ## en-US 13 | 14 | The simplest usage. 15 | 16 | ````jsx 17 | import { Affix, Button } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | , mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /components/pagination/demo/jump.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 跳转 5 | en-US: Jumper 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 快速跳转到某一页。 11 | 12 | ## en-US 13 | 14 | Jump to a page directly. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | ReactDOM.render( 20 | , 21 | mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /components/date-picker/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 禁用 5 | en-US: Disabled 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 选择框的不可用状态。 11 | 12 | ## en-US 13 | 14 | A disabled state of the `DatePicker`. 15 | 16 | ````jsx 17 | import { DatePicker } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | , mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /components/style/core/motion.less: -------------------------------------------------------------------------------- 1 | @import "../mixins/motion"; 2 | @import "motion/fade"; 3 | @import "motion/move"; 4 | @import "motion/other"; 5 | @import "motion/slide"; 6 | @import "motion/swing"; 7 | @import "motion/zoom"; 8 | 9 | // For common/openAnimation 10 | .ant-motion-collapse { 11 | overflow: hidden; 12 | &-active { 13 | transition: height .2s @ease-out; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 23 | -------------------------------------------------------------------------------- /src/pages/table/demo/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | -------------------------------------------------------------------------------- /components/time-picker/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 禁用 5 | en-US: disabled 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 禁用时间选择。 11 | 12 | ## en-US 13 | 14 | A disabled state of the `TimePicker`. 15 | 16 | 17 | ````jsx 18 | import { TimePicker } from 'antd'; 19 | 20 | ReactDOM.render( 21 | 22 | , mountNode); 23 | ```` 24 | -------------------------------------------------------------------------------- /components/tooltip/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法。 11 | 12 | ## en-US 13 | 14 | The simplest usage. 15 | 16 | ````jsx 17 | import { Tooltip } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | Text will show when mouse enter. 22 | 23 | , mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /components/affix/demo/bottom.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 下方固定 5 | en-US: Bottom 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 固定在屏幕下方。 11 | 12 | ## en-US 13 | 14 | Affix to bottom. 15 | 16 | ````jsx 17 | import { Affix, Button } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | , mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /components/tree/style/mixin.less: -------------------------------------------------------------------------------- 1 | @import "../../style/mixins/index"; 2 | 3 | .antTreeSwitcherIcon() { 4 | position: relative; 5 | &:after { 6 | .iconfont-size-under-12px(6px); 7 | display: inline-block; 8 | .iconfont-font("\e611"); 9 | font-weight: bold; 10 | position: absolute; 11 | top: 1px; 12 | right: 4px; 13 | color: #666; 14 | transition: transform .3s ease; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/switch/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 两种大小 5 | en-US: Two sizes 6 | --- 7 | 8 | ## zh-CN 9 | 10 | `size="small"` 表示小号开关。 11 | 12 | ## en-US 13 | 14 | `size="small"` represents a small sized switch. 15 | 16 | ````jsx 17 | import { Switch } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | 22 | 23 |
24 | , mountNode); 25 | ```` 26 | -------------------------------------------------------------------------------- /src/pages/table/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 22 | -------------------------------------------------------------------------------- /test/unit/specs/Hello.spec.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Hello from 'src/components/Hello' 3 | 4 | describe('Hello.vue', () => { 5 | it('should render correct contents', () => { 6 | const vm = new Vue({ 7 | template: '
', 8 | components: { Hello } 9 | }).$mount() 10 | expect(vm.$el.querySelector('.hello h1').textContent).to.contain('Hello World!') 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /components/popover/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 最简单的用法，浮层的大小由内容区域决定。 7 | 8 | ````jsx 9 | import { Popover, Button } from 'antd'; 10 | 11 | const content = ( 12 |
13 |

内容

14 |

内容

15 |
16 | ); 17 | 18 | ReactDOM.render( 19 | 20 | 21 | 22 | , mountNode); 23 | ```` 24 | -------------------------------------------------------------------------------- /components/date-picker/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法。 11 | 12 | ## en-US 13 | 14 | The most basic usage. 15 | 16 | ````jsx 17 | import { DatePicker } from 'antd'; 18 | 19 | function onChange(value, dateString) { 20 | console.log(value, dateString); 21 | } 22 | 23 | ReactDOM.render(, mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /components/menu/src/MenuItemGroup.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | -------------------------------------------------------------------------------- /src/pages/form/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 22 | -------------------------------------------------------------------------------- /components/affix/demo/offset.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 偏移 5 | en-US: Offset 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 达到一定的偏移量才触发。 11 | 12 | ## en-US 13 | 14 | Affix element according to offset value. 15 | 16 | ````jsx 17 | import { Affix, Button } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | , mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /components/alert/demo/close-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 自定义关闭 5 | en-US: Customized Close Text 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。 11 | 12 | ## en-US 13 | 14 | Replace the default icon with customized text. 15 | 16 | ````jsx 17 | import { Alert } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | , mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /components/checkbox/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 不可用 5 | en-US: Disabled 6 | --- 7 | 8 | ## zh-CN 9 | 10 | checkbox 不可用。 11 | 12 | ## en-US 13 | 14 | Disabled checkbox. 15 | 16 | ````jsx 17 | import { Checkbox } from 'antd'; 18 | 19 | ReactDOM.render(
20 | 21 |
22 | 23 |
, mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /components/menu/src/src/MenuItemGroup.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | -------------------------------------------------------------------------------- /src/pages/alert/demo/close-text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 自定义关闭 5 | en-US: Customized Close Text 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`。 11 | 12 | ## en-US 13 | 14 | Replace the default icon with customized text. 15 | 16 | ````jsx 17 | import { Alert } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | , mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /components/input/demo/textarea.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 文本域 5 | en-US: Textarea 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 用于多行输入，指定 `type` 为一个特殊的 `textarea`。 11 | 12 | ## en-US 13 | 14 | For multi-line user input cases, an input whose `type` prop has the value of `"textarea"` can be used. 15 | 16 | ````jsx 17 | import { Input } from 'antd'; 18 | 19 | ReactDOM.render(, mountNode); 20 | ```` 21 | -------------------------------------------------------------------------------- /components/time-picker/demo/without-seconds.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 不展示秒 5 | en-US: Hide the seconds options 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 不展示秒，也不允许选择。 11 | 12 | ## en-US 13 | 14 | The `seconds` options are hidden and cannot be selected. 15 | 16 | ````jsx 17 | import { TimePicker } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | , mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /components/time-picker/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法。 11 | 12 | ## en-US 13 | 14 | The most basic usage. 15 | 16 | ````jsx 17 | import { TimePicker } from 'antd'; 18 | 19 | function onChange(time, timeString) { 20 | console.log(time, timeString); 21 | } 22 | 23 | ReactDOM.render( 24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /test/e2e/specs/test.js: -------------------------------------------------------------------------------- 1 | // For authoring Nightwatch tests, see 2 | // http://nightwatchjs.org/guide#usage 3 | 4 | module.exports = { 5 | 'default e2e tests': function (browser) { 6 | browser 7 | .url('http://localhost:8080') 8 | .waitForElementVisible('#app', 5000) 9 | .assert.elementPresent('.logo') 10 | .assert.containsText('h1', 'Hello World!') 11 | .assert.elementCount('p', 3) 12 | .end() 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | -------------------------------------------------------------------------------- /src/pages/pagination/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 22 | -------------------------------------------------------------------------------- /components/date-picker/demo/month-picker.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 9 3 | title: 4 | zh-CN: 月选择器 5 | en-US: MonthPicker 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 使用 `MonthPicker` 实现月选择器。 11 | 12 | ## en-US 13 | 14 | You can get a month selector by using `MonthPicker`. 15 | 16 | ````jsx 17 | import { DatePicker } from 'antd'; 18 | const MonthPicker = DatePicker.MonthPicker; 19 | ReactDOM.render( 20 | 21 | , mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /src/pages/back-top/demo/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | -------------------------------------------------------------------------------- /components/affix/demo/on-change.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 固定状态改变的回调 5 | en-US: Callback 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 可以获得是否固定的状态。 11 | 12 | ## en-US 13 | 14 | Callback with affixed state. 15 | 16 | ````jsx 17 | import { Affix, Button } from 'antd'; 18 | 19 | ReactDOM.render( 20 | console.log(affixed)}> 21 | 22 | 23 | , mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /components/badge/demo/link.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 可点击 5 | en-US: Clickable 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 用 a 标签进行包裹即可。 11 | 12 | ## en-US 13 | 14 | The badge can be wrapped with `a` tag to make it linkable. 15 | 16 | ````jsx 17 | import { Badge } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | 24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/card/demo/simple.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 简洁卡片 5 | en-US: Simple card 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 只包含内容区域。 11 | 12 | ## en-US 13 | 14 | A simple card only containing a content area. 15 | 16 | ````jsx 17 | import { Card } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 |

Card content

22 |

Card content

23 |

Card content

24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/checkbox/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本用法 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 简单的 checkbox。 11 | 12 | ## en-US 13 | 14 | Basic usage of checkbox. 15 | 16 | ````jsx 17 | import { Checkbox } from 'antd'; 18 | 19 | function onChange(e) { 20 | console.log(`checked = ${e.target.checked}`); 21 | } 22 | 23 | ReactDOM.render( 24 | Checkbox 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/card/demo/loading.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 预加载的卡片 5 | en-US: Loading card 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 数据读入前会有文本块样式。 11 | 12 | ## en-US 13 | 14 | Shows a loading indicator while the contents of the card are being fetched. 15 | 16 | ````jsx 17 | import { Card } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | Whatever content 22 | 23 | , mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /components/input-number/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 数字输入框。 11 | 12 | ## en-US 13 | 14 | Numeric-only input box. 15 | 16 | ````jsx 17 | import { InputNumber } from 'antd'; 18 | 19 | function onChange(value) { 20 | console.log('changed', value); 21 | } 22 | 23 | ReactDOM.render( 24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/popconfirm/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本 4 | --- 5 | 6 | 最简单的用法。 7 | 8 | ````jsx 9 | import { Popconfirm, message } from 'antd'; 10 | 11 | function confirm() { 12 | message.success('点击了确定'); 13 | } 14 | 15 | function cancel() { 16 | message.error('点击了取消'); 17 | } 18 | 19 | ReactDOM.render( 20 | 21 | 删除 22 | 23 | , mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /src/components/CopyClipboard.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 23 | -------------------------------------------------------------------------------- /src/pages/tooltip/demo/index.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | -------------------------------------------------------------------------------- /src/sass/site/new-version-info-modal.less: -------------------------------------------------------------------------------- 1 | .new-version-info-modal { 2 | img { 3 | width: 100px; 4 | position: absolute; 5 | left: 34px; 6 | top: 36px; 7 | } 8 | p { 9 | margin-top: 1em; 10 | } 11 | .anticon { 12 | display: none; 13 | } 14 | .ant-confirm-body { 15 | .ant-confirm-title { 16 | font-size: 18px; 17 | } 18 | margin-left: 120px; 19 | .ant-confirm-content { 20 | margin-left: 0; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /components/carousel/demo/vertical.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 垂直 5 | en-US: Vertical 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 垂直显示。 11 | 12 | ## en-US 13 | 14 | Vertical pagination. 15 | 16 | ````jsx 17 | import { Carousel } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 |

1

22 |

2

23 |

3

24 |

4

25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/switch/demo/text.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 文字和图标 5 | en-US: Text & icon 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 带有文字和图标。 11 | 12 | ## en-US 13 | 14 | With text and icon. 15 | 16 | ````jsx 17 | import { Switch, Icon } from 'antd'; 18 | 19 | ReactDOM.render(
20 | 21 | } unCheckedChildren={} /> 22 |
, mountNode); 23 | ```` 24 | -------------------------------------------------------------------------------- /components/tabs/src/TabsPlane.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 23 | -------------------------------------------------------------------------------- /components/calendar/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 一个通用的日历面板，支持年/月切换。 11 | 12 | 13 | ## en-US 14 | 15 | A basic calendar component with Year/Month switch. 16 | 17 | ````jsx 18 | import { Calendar } from 'antd'; 19 | 20 | function onPanelChange(value, mode) { 21 | console.log(value, mode); 22 | } 23 | 24 | ReactDOM.render( 25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/message/demo/info.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 普通提示 5 | en-US: Normal prompt 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 信息提醒反馈。 11 | 12 | ## en-US 13 | 14 | Normal messages as feedbacks. 15 | 16 | ````jsx 17 | import { message, Button } from 'antd'; 18 | 19 | const info = function () { 20 | message.info('This is a normal message'); 21 | }; 22 | 23 | ReactDOM.render( 24 | , mountNode); 25 | ```` 26 | -------------------------------------------------------------------------------- /components/carousel/demo/fade.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 渐显 5 | en-US: Fade in 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 切换效果为渐显。 11 | 12 | ## en-US 13 | 14 | Slides use fade for transition. 15 | 16 | ````jsx 17 | import { Carousel } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 |

1

22 |

2

23 |

3

24 |

4

25 | 26 | , mountNode); 27 | ```` 28 | 29 | -------------------------------------------------------------------------------- /components/date-picker/demo/formatter.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 日期格式 5 | en-US: Date format 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 使用 `format` 属性，可以自定义你需要的日期显示格式，如 `yyyy/MM/dd`。 11 | 12 | ## en-US 13 | 14 | By using `format`, you can customize the format(such as `yyyy/MM/dd`) the date is displayed in. 15 | 16 | ````jsx 17 | import { DatePicker } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | , mountNode); 22 | ```` 23 | -------------------------------------------------------------------------------- /components/date-picker/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | @import "../../style/mixins/index"; 3 | @import "../../input/style/mixin"; 4 | @import "../../button/style/mixin"; 5 | 6 | @calendar-prefix-cls: ant-calendar; 7 | @timepicker-prefix-cls: ant-calendar-time-picker; 8 | 9 | @import "Picker"; 10 | @import "Calendar"; 11 | @import "RangePicker"; 12 | @import "TimePicker"; 13 | @import "MonthPanel"; 14 | @import "YearPanel"; 15 | @import "DecadePanel"; 16 | @import "MonthPicker"; 17 | -------------------------------------------------------------------------------- /components/carousel/demo/autoplay.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 自动切换 5 | en-US: Scroll automatically 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 定时切换下一张。 11 | 12 | ## en-US 13 | 14 | Timing of scrolling to the next card/picture. 15 | 16 | ````jsx 17 | import { Carousel } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 |

1

22 |

2

23 |

3

24 |

4

25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/pagination/demo/changer.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 改变 5 | en-US: Changer 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 改变每页显示条目数。 11 | 12 | ## en-US 13 | 14 | Change `pageSize`. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | function onShowSizeChange(current, pageSize) { 20 | console.log(current, pageSize); 21 | } 22 | 23 | ReactDOM.render( 24 | , 25 | mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/changer.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 改变 5 | en-US: Changer 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 改变每页显示条目数。 11 | 12 | ## en-US 13 | 14 | Change `pageSize`. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | function onShowSizeChange(current, pageSize) { 20 | console.log(current, pageSize); 21 | } 22 | 23 | ReactDOM.render( 24 | , 25 | mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/tag/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 简单的标签展示，添加 closable 表示可关闭。 11 | 12 | ## en-US 13 | 14 | Simple demo of tag, 'closable' property represents which can be closed. 15 | 16 | ````jsx 17 | import { Tag } from 'antd'; 18 | 19 | function onClose(e) { 20 | console.log(e); 21 | } 22 | 23 | ReactDOM.render(
24 | Tag 1 25 | Tag 2 26 | Tag 3 27 |
, mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /components/badge/demo/99plus.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 大数字 5 | en-US: Overflowed count 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 超过 99 的会显示为 `99+`。 11 | 12 | ## en-US 13 | 14 | `99+` is displayed when count is larger than `99`. 15 | 16 | ````jsx 17 | import { Badge } from 'antd'; 18 | 19 | ReactDOM.render(, mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/breadcrumb/src/BreadcrumbItem.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 21 | -------------------------------------------------------------------------------- /components/card/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 典型卡片 5 | en-US: Basic card 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 包含标题、内容、操作区域。 11 | 12 | ## en-US 13 | 14 | A basic card containing a title, content and an extra corner content. 15 | 16 | ````jsx 17 | import { Card } from 'antd'; 18 | 19 | ReactDOM.render( 20 | More} style={{ width: 300 }}> 21 |

Card content

22 |

Card content

23 |

Card content

24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/date-picker/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 三种大小 5 | en-US: Three sizes 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 三种大小的输入框，大的用在表单中，中的为默认。 11 | 12 | ## en-US 13 | 14 | The input box comes in three sizes. `large` is used in the form, while the medium size is the default. 15 | 16 | 17 | ````jsx 18 | import { DatePicker } from 'antd'; 19 | 20 | ReactDOM.render( 21 |
22 | 23 | 24 | 25 |
26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /src/pages/collapse/demo/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | -------------------------------------------------------------------------------- /src/sass/site/style.js: -------------------------------------------------------------------------------- 1 | import './common.less' 2 | import './header.less' 3 | import './footer.less' 4 | import './home.less' 5 | import './page-nav.less' 6 | import './markdown.less' 7 | import './resource.less' 8 | import './responsive.less' 9 | import './preview-img.less' 10 | import './toc.less' 11 | import './not-found.less' 12 | import './font.less' 13 | import './highlight.less' 14 | import './demo.less' 15 | import './colors.less' 16 | import './mock-browser.less' 17 | import './new-version-info-modal.less' 18 | import './motion.less' 19 | -------------------------------------------------------------------------------- /components/tabs/demo/disabled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 禁用 5 | en-US: Disabled 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 禁用某一项。 11 | 12 | ## en-US 13 | 14 | Disabled a tab. 15 | 16 | ````jsx 17 | import { Tabs } from 'antd'; 18 | const TabPane = Tabs.TabPane; 19 | 20 | ReactDOM.render( 21 | 22 | Tab 1 23 | Tab 2 24 | Tab 3 25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/carousel/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法。 11 | 12 | ## en-US 13 | 14 | Basic usage. 15 | 16 | ````jsx 17 | import { Carousel } from 'antd'; 18 | 19 | function onChange(a, b, c) { 20 | console.log(a, b, c); 21 | } 22 | 23 | ReactDOM.render( 24 | 25 |

1

26 |

2

27 |

3

28 |

4

29 | 30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /src/pages/tag/demo/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | -------------------------------------------------------------------------------- /components/tag/demo/colorful.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 各种类型 5 | en-US: Colorful tags 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 四种颜色的标签。 11 | 12 | ## en-US 13 | Colorful tags. 14 | 15 | ````jsx 16 | import { Tag } from 'antd'; 17 | 18 | ReactDOM.render(
19 | Blue 20 | Green 21 | Yellow 22 | Red 23 |
, mountNode); 24 | ```` 25 | -------------------------------------------------------------------------------- /components/pagination/demo/total.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 9 3 | title: 4 | zh-CN: 总数 5 | en-US: Total number 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 通过设置 `showTotal` 展示总共有多少数据。 11 | 12 | ## en-US 13 | 14 | You can show the total number of data by setting `showTotal`. 15 | 16 | ````jsx 17 | import { Pagination, Select } from 'antd'; 18 | 19 | ReactDOM.render( 20 | `共 ${total} 条`} 24 | pageSize={20} defaultCurrent={1} 25 | />, 26 | mountNode 27 | ); 28 | ```` 29 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/total.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 9 3 | title: 4 | zh-CN: 总数 5 | en-US: Total number 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 通过设置 `showTotal` 展示总共有多少数据。 11 | 12 | ## en-US 13 | 14 | You can show the total number of data by setting `showTotal`. 15 | 16 | ````jsx 17 | import { Pagination, Select } from 'antd'; 18 | 19 | ReactDOM.render( 20 | `共 ${total} 条`} 24 | pageSize={20} defaultCurrent={1} 25 | />, 26 | mountNode 27 | ); 28 | ```` 29 | -------------------------------------------------------------------------------- /components/progress/demo/line.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 进度条 5 | en-US: Progress bar 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 标准的进度条。 11 | 12 | ## en-US 13 | 14 | A standard progress bar. 15 | 16 | ````jsx 17 | import { Progress } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | 22 | 23 | 24 | 25 | 26 |
27 | , mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /components/switch/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法。 11 | 12 | ## en-US 13 | 14 | The most basic usage. 15 | 16 | ````jsx 17 | import { Switch } from 'antd'; 18 | 19 | function onChange(checked) { 20 | console.log(`switch to ${checked}`); 21 | } 22 | 23 | ReactDOM.render( 24 | , 25 | mountNode 26 | ); 27 | ```` 28 | 29 | 33 | -------------------------------------------------------------------------------- /components/tabs/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 迷你型 5 | en-US: Mini tab 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 用在弹出框等较狭窄的容器内。 11 | 12 | ## en-US 13 | 14 | Small size can be uesed in Modal. 15 | 16 | ````jsx 17 | import { Tabs } from 'antd'; 18 | const TabPane = Tabs.TabPane; 19 | 20 | ReactDOM.render( 21 | 22 | Content of tab 1 23 | Content of tab 2 24 | Content of tab 3 25 | 26 | , mountNode); 27 | ```` 28 | 29 | -------------------------------------------------------------------------------- /test/unit/index.js: -------------------------------------------------------------------------------- 1 | // Polyfill fn.bind() for PhantomJS 2 | /* eslint-disable no-extend-native */ 3 | Function.prototype.bind = require('function-bind') 4 | 5 | // require all test files (files that ends with .spec.js) 6 | var testsContext = require.context('./specs', true, /\.spec$/) 7 | testsContext.keys().forEach(testsContext) 8 | 9 | // require all src files except main.js for coverage. 10 | // you can also change this to match only the subset of files that 11 | // you want coverage for. 12 | var srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/) 13 | srcContext.keys().forEach(srcContext) 14 | -------------------------------------------------------------------------------- /components/alert/demo/banner.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: 顶部公告 5 | en-US: Banner 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 用作顶部公告时，默认有图标，`type` 为 'warning'，并有特殊样式。 11 | 12 | ## en-US 13 | 14 | When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default. 15 | 16 | ````jsx 17 | import { Alert } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | 22 |
23 | 24 |
25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /src/pages/alert/demo/banner.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: 顶部公告 5 | en-US: Banner 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 用作顶部公告时，默认有图标，`type` 为 'warning'，并有特殊样式。 11 | 12 | ## en-US 13 | 14 | When `Alert` is used as banner, it has particular style, Icon and `type`(warning) are specified by default. 15 | 16 | ````jsx 17 | import { Alert } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | 22 |
23 | 24 |
25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /src/pages/input-number/demo/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /components/rate/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | subtitle: 评分 4 | type: Form Controls 5 | title: Rate 6 | --- 7 | 8 | 评分组件。 9 | 10 | ## 何时使用 11 | 12 | - 对评价进行展示。 13 | - 对事物进行快速的评级操作。 14 | 15 | ## API 16 | 17 | | 属性 | 说明 | 类型 | 默认值 | 18 | |------------|----------------|-------------------|-------------| 19 | | count | star 总数 | Number | 5 | 20 | | value | 当前数，受控值 | Number | - | 21 | | defaultValue | 默认值 | Number | 0 | 22 | | onChange(value: Number) | 回调 | Function | - | 23 | | allowHalf | 是否允许半选 | Boolean | false | 24 | | disabled | 只读，无法进行交互 | Boolean | false | 25 | -------------------------------------------------------------------------------- /components/slider/demo/tip-formatter.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 自定义提示 5 | en-US: Customerize tooltip 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 使用 `tipFormatter` 可以格式化 `Tooltip` 的内容，设置 `tipFormatter={null}`，则隐藏 `Tooltip`。 11 | 12 | ## en-US 13 | 14 | Use `tipFormatter` to formart content of `Toolip`. If `tipFormatter` is null, hide it. 15 | 16 | ````jsx 17 | import { Slider } from 'antd'; 18 | 19 | function formatter(value) { 20 | return `${value}%`; 21 | } 22 | 23 | ReactDOM.render(
24 | 25 | 26 |
, mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /src/pages/message/demo/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /components/mention/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 基本使用 4 | --- 5 | 6 | ## zh-CN 7 | 8 | 基本使用 9 | 10 | ## en-US 11 | 12 | Basic usage. 13 | 14 | ````jsx 15 | import { Mention } from 'antd'; 16 | const { toString, toEditorState } = Mention; 17 | 18 | function onChange(editorState) { 19 | console.log(toString(editorState)); 20 | } 21 | 22 | ReactDOM.render( 23 | 29 | , mountNode); 30 | ```` 31 | -------------------------------------------------------------------------------- /components/progress/demo/line-mini.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 小型进度条 5 | en-US: Mini size progress bar 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 适合放在较狭窄的区域内。 11 | 12 | ## en-US 13 | 14 | Appropriate for a narrow area. 15 | 16 | ````jsx 17 | import { Progress } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | 22 | 23 | 24 | 25 |
26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/style/core/motion/fade.less: -------------------------------------------------------------------------------- 1 | .fade-motion(@className, @keyframeName) { 2 | .make-motion(@className, @keyframeName); 3 | .@{className}-enter, 4 | .@{className}-appear { 5 | opacity: 0; 6 | animation-timing-function: linear; 7 | } 8 | .@{className}-leave { 9 | animation-timing-function: linear; 10 | } 11 | } 12 | 13 | .fade-motion(fade, antFade); 14 | 15 | @keyframes antFadeIn { 16 | 0% { 17 | opacity: 0; 18 | } 19 | 100% { 20 | opacity: 1; 21 | } 22 | } 23 | 24 | @keyframes antFadeOut { 25 | 0% { 26 | opacity: 1; 27 | } 28 | 100% { 29 | opacity: 0; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/pages/affix/demo/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /src/pages/rate/demo/Half.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /components/steps/demo/icon.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 带图标的步骤条 5 | en-US: With icon 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 通过设置 `Steps.Step` 的 `icon` 属性，可以启用自定义图标。 11 | 12 | ## en-US 13 | 14 | You can use your own custom icons by setting the property `icon` for `Steps.Step`. 15 | 16 | ````jsx 17 | import { Steps } from 'antd'; 18 | const Step = Steps.Step; 19 | 20 | ReactDOM.render( 21 | 22 | 23 | 24 | 25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /src/pages/rate/demo/Disabled.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /components/message/demo/loading.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 加载中 5 | en-US: Message of loading 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 进行全局 loading，异步自行移除。 11 | 12 | ## en-US 13 | 14 | Display a global loading indicator, which is dismissed by itself asynchronously. 15 | 16 | ````jsx 17 | import { message, Button } from 'antd'; 18 | 19 | const success = () => { 20 | const hide = message.loading('Action in progress..', 0); 21 | // Dismiss manually and asynchronously 22 | setTimeout(hide, 2500); 23 | }; 24 | 25 | ReactDOM.render( 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/tag/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 标签 4 | type: Views 5 | english: Tag 6 | --- 7 | 8 | 进行标记和分类的小标签。 9 | 10 | ## 何时使用 11 | 12 | - 用于标记事物的属性和维度。 13 | - 进行分类。 14 | 15 | ## API 16 | 17 | | 参数 | 说明 | 类型 | 默认值 | 18 | |----------------|-------------------------------|------|--------| 19 | | closable | 标签是否可以关闭 | boolean | false | 20 | | onClose | 关闭时的回调 | function(event) | - | 21 | | afterClose | 关闭动画完成后的回调 | function(event) | - | 22 | | color | 标签的色彩：`blue` `green` `yellow` `red` | string | - | 23 | -------------------------------------------------------------------------------- /src/pages/input/demo/Textarea.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /src/pages/message/demo/loading.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 加载中 5 | en-US: Message of loading 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 进行全局 loading，异步自行移除。 11 | 12 | ## en-US 13 | 14 | Display a global loading indicator, which is dismissed by itself asynchronously. 15 | 16 | ````jsx 17 | import { message, Button } from 'antd'; 18 | 19 | const success = () => { 20 | const hide = message.loading('Action in progress..', 0); 21 | // Dismiss manually and asynchronously 22 | setTimeout(hide, 2500); 23 | }; 24 | 25 | ReactDOM.render( 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/badge/demo/overflow.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: 封顶数字 5 | en-US: Customized overflow count 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 超过 `overflowCount` 的会显示为 `${overflowCount}+`。 11 | 12 | ## en-US 13 | 14 | `${overflowCount}+` is displayed when count is larger than `overflowCount`. 15 | 16 | ````jsx 17 | import { Badge } from 'antd'; 18 | 19 | ReactDOM.render(, mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/input-number/demo/digit.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 小数 5 | en-US: Decimals 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 和原生的数字输入框一样，value 的精度由 step 的小数位数决定。 11 | 12 | ## en-US 13 | 14 | A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop. 15 | 16 | ````jsx 17 | import { InputNumber } from 'antd'; 18 | 19 | function onChange(value) { 20 | console.log('changed', value); 21 | } 22 | 23 | ReactDOM.render( 24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/modal/demo/manual.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 7 3 | title: 4 | zh-CN: 手动移除 5 | en-US: Manual to destroy 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 手动关闭modal。 11 | 12 | ## en-US 13 | 14 | Manually destroying a modal. 15 | 16 | ````jsx 17 | import { Modal, Button } from 'antd'; 18 | 19 | function success() { 20 | const modal = Modal.success({ 21 | title: 'This is a notification message', 22 | content: 'This modal will be destroyed after 1 second', 23 | }); 24 | setTimeout(() => modal.destroy(), 1000); 25 | } 26 | 27 | 28 | ReactDOM.render(
29 | 30 |
, mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/steps/demo/vertical.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 竖直方向的步骤条 5 | en-US: Vertical 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 简单的竖直方向的步骤条。 11 | 12 | ## en-US 13 | 14 | A simple step bar in the vertical direction. 15 | 16 | ````jsx 17 | import { Steps } from 'antd'; 18 | const Step = Steps.Step; 19 | 20 | ReactDOM.render( 21 | 22 | 23 | 24 | 25 | 26 | 27 | , mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /src/pages/alert/demo/Basic.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /src/pages/checkbox/demo/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /src/pages/input-number/demo/digit.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 小数 5 | en-US: Decimals 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 和原生的数字输入框一样，value 的精度由 step 的小数位数决定。 11 | 12 | ## en-US 13 | 14 | A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the step prop. 15 | 16 | ````jsx 17 | import { InputNumber } from 'antd'; 18 | 19 | function onChange(value) { 20 | console.log('changed', value); 21 | } 22 | 23 | ReactDOM.render( 24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | parserOptions: { 5 | sourceType: 'module' 6 | }, 7 | // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | 'rules': { 15 | // allow paren-less arrow functions 16 | 'arrow-parens': 0, 17 | // allow async-await 18 | 'generator-star-spacing': 0, 19 | // allow debugger during development 20 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /components/badge/demo/dot.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 讨嫌的小红点 5 | en-US: Red badge 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 没有具体的数字。 11 | 12 | ## en-US 13 | 14 | This will simply display a red badge, without a specific count. 15 | 16 | ````jsx 17 | import { Badge, Icon } from 'antd'; 18 | 19 | ReactDOM.render(, mountNode); 27 | ```` 28 | 29 | 37 | -------------------------------------------------------------------------------- /components/layout/demo/flex-order.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: Flex 排序 5 | en-US: Flex Order 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 通过 Flex 布局的 Order 来改变元素的排序。 11 | 12 | ## en-US 13 | 14 | To change the element sort by Flex layout order. 15 | 16 | ````jsx 17 | import { Row, Col } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | 22 | 1 col-order-4 23 | 2 col-order-3 24 | 3 col-order-2 25 | 4 col-order-1 26 | 27 |
, 28 | mountNode 29 | ); 30 | ```` 31 | -------------------------------------------------------------------------------- /components/progress/demo/circle.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 进度圈 5 | en-US: Circular progress bar 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 圈形的进度。 11 | 12 | ## en-US 13 | 14 | A circular progress bar. 15 | 16 | ````jsx 17 | import { Progress } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | 22 | 23 | 24 |
25 | , mountNode); 26 | ```` 27 | 28 | 35 | -------------------------------------------------------------------------------- /components/timeline/src/TimelineItem.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /src/pages/notification/demo/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/Basic.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/More.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /src/pages/spin/demo/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 32 | -------------------------------------------------------------------------------- /components/tabs/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 默认选中第一项。 11 | 12 | ## en-US 13 | 14 | Default activate first tab. 15 | 16 | ````jsx 17 | import { Tabs } from 'antd'; 18 | const TabPane = Tabs.TabPane; 19 | 20 | function callback(key) { 21 | console.log(key); 22 | } 23 | 24 | ReactDOM.render( 25 | 26 | Conten of Tab Pane 1 27 | Conten of Tab Pane 2 28 | Conten of Tab Pane 2 29 | 30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/date-picker/demo/time.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 日期时间选择 5 | en-US: To choose time 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 增加选择时间功能，当 `showTime` 为一个对象时，其属性会传递给内建的 `TimePicker`。 11 | 12 | ## en-US 13 | 14 | This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to `TimePicker`, witch is a built-in function. 15 | 16 | ````jsx 17 | import { DatePicker } from 'antd'; 18 | 19 | function onChange(value) { 20 | console.log('选择了时间：', value); 21 | } 22 | 23 | ReactDOM.render( 24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/date-picker/locale/en_US.tsx: -------------------------------------------------------------------------------- 1 | import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/en_US'; 2 | import CalendarLocale from 'rc-calendar/lib/locale/en_US'; 3 | import TimePickerLocale from '../../time-picker/locale/en_US'; 4 | import assign from 'object-assign'; 5 | // 统一合并为完整的 Locale 6 | const locale = assign({}, GregorianCalendarLocale); 7 | locale.lang = assign({ 8 | placeholder: 'Select date', 9 | rangePlaceholder: ['Start date', 'End date'], 10 | }, CalendarLocale); 11 | 12 | locale.timePickerLocale = assign({}, TimePickerLocale); 13 | 14 | // All settings at: 15 | // https://github.com/ant-design/ant-design/issues/424 16 | 17 | export default locale; 18 | -------------------------------------------------------------------------------- /components/popover/demo/triggerType.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 三种触发方式 4 | --- 5 | 6 | 鼠标移入、聚集、点击。 7 | 8 | ````jsx 9 | import { Popover, Button } from 'antd'; 10 | 11 | const content = ( 12 |
13 |

内容

14 |

内容

15 |
16 | ); 17 | 18 | ReactDOM.render( 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/progress/demo/format.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: 自定义文字格式 5 | en-US: Custom text format 6 | --- 7 | 8 | ## zh-CN 9 | 10 | `format` 属性指定格式。 11 | 12 | ## en-US 13 | 14 | You can custom text format by setting `format`. 15 | 16 | ````jsx 17 | import { Progress } from 'antd'; 18 | 19 | ReactDOM.render( 20 |
21 | `${percent / 10.0}折`} /> 22 | '成功'} /> 23 |
24 | , mountNode); 25 | ```` 26 | 27 | 34 | -------------------------------------------------------------------------------- /components/steps/demo/error.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: 步骤运行错误 5 | en-US: Error status 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 使用 Steps 的 `status` 属性来指定当前步骤的状态。 11 | 12 | ## en-US 13 | 14 | By using `status` of `Steps`, you can specify the state for current step. 15 | 16 | ````jsx 17 | import { Steps } from 'antd'; 18 | const Step = Steps.Step; 19 | 20 | ReactDOM.render( 21 | 22 | 23 | 24 | 25 | 26 | 27 | , mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /src/pages/switch/demo/Size.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 27 | -------------------------------------------------------------------------------- /src/pages/alert/demo/CloseText.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 25 | -------------------------------------------------------------------------------- /src/pages/input/demo/Basic.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 28 | -------------------------------------------------------------------------------- /components/layout/demo/reponsive.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 7 3 | title: 4 | zh-CN: 响应式布局 5 | en-US: Responsive 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设四个响应尺寸：`xs` `sm` `md` `lg`。 11 | 12 | ## en-US 13 | 14 | Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset four dimensions: `xs`` sm` `md`` lg`. 15 | 16 | ````jsx 17 | import { Row, Col } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | 24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /components/steps/demo/vertical-small.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 竖直方向的小型步骤条 5 | en-US: Vertical mini version 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 简单的竖直方向的小型步骤条。 11 | 12 | ## en-US 13 | 14 | A simple mini version step bar in the vertical direction. 15 | 16 | ````jsx 17 | import { Steps } from 'antd'; 18 | const Step = Steps.Step; 19 | 20 | ReactDOM.render( 21 | 22 | 23 | 24 | 25 | 26 | 27 | , mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /components/breadcrumb/demo/withIcon.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 带有图标的 5 | en-US: With an Icon 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 图标放在文字前面。 11 | 12 | ## en-US 13 | 14 | The icon should be placed in front of the text. 15 | 16 | ````jsx 17 | import { Breadcrumb, Icon } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | 24 | 25 | 26 | Application List 27 | 28 | 29 | Application 30 | 31 | 32 | , mountNode); 33 | ```` 34 | -------------------------------------------------------------------------------- /components/tabs/demo/extra.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 附加内容 5 | en-US: Extra content 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 可以在页签右边添加附加操作。 11 | 12 | ## en-US 13 | 14 | You can add extra actions to the right of Tabs. 15 | 16 | 17 | ````jsx 18 | import { Tabs, Button } from 'antd'; 19 | const TabPane = Tabs.TabPane; 20 | 21 | const operations = ; 22 | 23 | ReactDOM.render( 24 | 25 | Content of tab 1 26 | Content of tab 2 27 | Content of tab 3 28 | 29 | , mountNode); 30 | ```` 31 | -------------------------------------------------------------------------------- /components/timeline/demo/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 自定义时间轴点 5 | en-US: Custom 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 可以设置为图标或其他自定义元素。 11 | 12 | ## en-US 13 | 14 | Set a node as an icon or other custom element. 15 | 16 | ````jsx 17 | import { Timeline, Icon } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | 创建服务现场 2015-09-01 22 | 初步排除网络异常 2015-09-01 23 | } color="red">技术测试异常 2015-09-01 24 | 网络异常正在修复 2015-09-01 25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /src/pages/back-top/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | ## BackTop 回到顶部 2 | 3 | 返回页面顶部的操作按钮。 4 | 5 | ## 何时使用 6 | 7 | - 当页面内容区域比较长时； 8 | - 当用户需要频繁返回顶部查看相关内容时。 9 | 10 | ## 代码演示 11 | 12 | 13 | 14 | 23 | 24 | ## API 25 | 26 | > 有默认样式，距离底部 `50px`，可覆盖。 27 | 28 | > 自定义样式宽高不大于 40px * 40px。 29 | 30 | | 参数 | 说明 | 类型 | 默认值 | 31 | |-------------|----------------|--------------------|--------------| 32 | | visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | Number | 400 | 33 | | onClick | 点击按钮的回调函数 | Function | - | 34 | -------------------------------------------------------------------------------- /src/pages/breadcrumb/demo/withIcon.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 带有图标的 5 | en-US: With an Icon 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 图标放在文字前面。 11 | 12 | ## en-US 13 | 14 | The icon should be placed in front of the text. 15 | 16 | ````jsx 17 | import { Breadcrumb, Icon } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | 22 | 23 | 24 | 25 | 26 | Application List 27 | 28 | 29 | Application 30 | 31 | 32 | , mountNode); 33 | ```` 34 | -------------------------------------------------------------------------------- /src/pages/spin/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | ## Spin 加载中 2 | 3 | 用于页面和区块的加载中状态。 4 | 5 | ## 何时使用 6 | 7 | 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。 8 | 9 | ## 代码演示 10 | 11 | 12 | 13 | 22 | 23 | ## API 24 | 25 | 26 | | 参数 | 类型 | 默认值 | 说明 | 27 | |------------|----------------|-------------|--------------| 28 | | size | enum | default | spin组件中点的大小，可选值为 small default large | 29 | | spinning | boolean | true | 用于内嵌其他组件的模式，可以关闭 loading 效果 | 30 | | tip | string | 无 | 自定义描述文案 | 31 | -------------------------------------------------------------------------------- /components/affix/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 固钉 4 | type: Other 5 | english: Affix 6 | --- 7 | 8 | 将页面元素钉在可视范围。 9 | 10 | ## 何时使用 11 | 12 | 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。 13 | 14 | 页面可视范围过小时，慎用此功能以免遮挡页面内容。 15 | 16 | ## API 17 | 18 | 19 | | 成员 | 说明 | 类型 | 默认值 | 20 | |-------------|----------------|--------------------|--------------| 21 | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | | 22 | | offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | | 23 | | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window | 24 | | onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | 25 | -------------------------------------------------------------------------------- /components/form/src/Form.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | -------------------------------------------------------------------------------- /src/pages/breadcrumb/demo/separator.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 分隔符 5 | en-US: Configuring the Separator 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 使用 `separator=">"` 可以自定义分隔符。 11 | 12 | ## en-US 13 | 14 | The separator can be customized by setting the separator property: separator=">" 15 | 16 | ````jsx 17 | import { Breadcrumb } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | Home 22 | Application Center 23 | Application List 24 | An Application 25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /components/breadcrumb/demo/separator.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 分隔符 5 | en-US: Configuring the Separator 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 使用 `separator=">"` 可以自定义分隔符。 11 | 12 | ## en-US 13 | 14 | The separator can be customized by setting the separator property: separator=">" 15 | 16 | ````jsx 17 | import { Breadcrumb } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 21 | Home 22 | Application Center 23 | Application List 24 | An Application 25 | 26 | , mountNode); 27 | ```` 28 | -------------------------------------------------------------------------------- /src/pages/card/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | ## Card 卡片 2 | 3 | 通用卡片容器。 4 | 5 | ## 何时使用 6 | 7 | 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。 8 | 9 | ## 代码演示 10 | 11 | 12 | 13 | 22 | 23 | ## API 24 | 25 | ```html 26 | 卡片内容 27 | ``` 28 | 29 | | 参数 | 说明 | 类型 | 默认值 | 30 | |----------|----------------|----------|--------------| 31 | | title | 卡片标题 | React.Element | - | 32 | | extra | 卡片右上角的操作区域 | React.Element | - | 33 | | bordered | 是否有边框 | Boolean | true | 34 | | bodyStyle | 内容区域自定义样式 | Object | - | 35 | -------------------------------------------------------------------------------- /components/date-picker/demo/disabled-date.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 6 3 | title: 4 | zh-CN: 指定不可选择日期 5 | en-US: Specify the date that cannot be selected 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 设置 `disabledDate` 方法，来确定不可选时段。 11 | 12 | 如上例：不可选择今天之后的日期。 13 | 14 | ## en-US 15 | 16 | Specify unselectable period by `disabledDate`. 17 | 18 | As in the example above: you can't select a date later than today. 19 | 20 | ````jsx 21 | import { DatePicker } from 'antd'; 22 | 23 | const disabledDate = function (current) { 24 | // can not select days after today 25 | return current && current.getTime() > Date.now(); 26 | }; 27 | 28 | ReactDOM.render( 29 | 30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/pagination/demo/controlled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 8 3 | title: 4 | zh-CN: 受控 5 | en-US: Controlled 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 受控制的页码。 11 | 12 | ## en-US 13 | 14 | Controlled page number. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | const Container = React.createClass({ 20 | getInitialState() { 21 | return { 22 | current: 3, 23 | }; 24 | }, 25 | onChange(page) { 26 | console.log(page); 27 | this.setState({ 28 | current: page, 29 | }); 30 | }, 31 | render() { 32 | return ; 33 | }, 34 | }); 35 | 36 | ReactDOM.render(, mountNode); 37 | ```` 38 | -------------------------------------------------------------------------------- /components/time-picker/demo/value.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 受控组件 5 | en-US: Under control 6 | --- 7 | 8 | ## zh-CN 9 | 10 | value 和 onChange 需要配合使用。 11 | 12 | ## en-US 13 | 14 | `Value` and `onChange` should be used together, 15 | 16 | ````jsx 17 | import { TimePicker } from 'antd'; 18 | 19 | const Test = React.createClass({ 20 | getInitialState() { 21 | return { 22 | value: null, 23 | }; 24 | }, 25 | onChange(time) { 26 | console.log(time); 27 | this.setState({ value: time }); 28 | }, 29 | render() { 30 | return ; 31 | }, 32 | }); 33 | 34 | ReactDOM.render(, mountNode); 35 | ```` 36 | -------------------------------------------------------------------------------- /src/pages/pagination/demo/controlled.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 8 3 | title: 4 | zh-CN: 受控 5 | en-US: Controlled 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 受控制的页码。 11 | 12 | ## en-US 13 | 14 | Controlled page number. 15 | 16 | ````jsx 17 | import { Pagination } from 'antd'; 18 | 19 | const Container = React.createClass({ 20 | getInitialState() { 21 | return { 22 | current: 3, 23 | }; 24 | }, 25 | onChange(page) { 26 | console.log(page); 27 | this.setState({ 28 | current: page, 29 | }); 30 | }, 31 | render() { 32 | return ; 33 | }, 34 | }); 35 | 36 | ReactDOM.render(, mountNode); 37 | ```` 38 | -------------------------------------------------------------------------------- /src/pages/switch/demo/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | 30 | 36 | -------------------------------------------------------------------------------- /src/pages/timeline/demo/index.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 29 | 30 | 35 | -------------------------------------------------------------------------------- /components/locale-provider/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 国际化 5 | en-US: Localization 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 用 `LocaleProvider` 包裹你的应用，并引用对应的语言包。 11 | 12 | ## en-US 13 | 14 | Wrap your app with `LocaleProvider`, and apply the corresponding language package. 15 | 16 | ````jsx 17 | import { Pagination, LocaleProvider } from 'antd'; 18 | import enUS from 'antd/lib/locale-provider/en_US'; 19 | 20 | function App() { 21 | return ( 22 |
23 | 24 |
25 | ); 26 | } 27 | 28 | ReactDOM.render( 29 | 30 | 31 | 32 | , mountNode); 33 | ```` 34 | -------------------------------------------------------------------------------- /components/tabs/demo/card.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 8 3 | title: 4 | zh-CN: 卡片式页签 5 | en-US: Card type tab 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 另一种样式的页签，不提供对应的垂直样式。 11 | 12 | ## en-US 13 | 14 | Another type Tabs, which doesn't support vertical mode. 15 | 16 | 17 | ````jsx 18 | import { Tabs } from 'antd'; 19 | const TabPane = Tabs.TabPane; 20 | 21 | function callback(key) { 22 | console.log(key); 23 | } 24 | 25 | ReactDOM.render( 26 | 27 | Conten of Tab Pane 1 28 | Conten of Tab Pane 2 29 | Conten of Tab Pane 2 30 | 31 | , mountNode); 32 | ```` 33 | -------------------------------------------------------------------------------- /components/tag/index.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Views 4 | english: Tag 5 | --- 6 | 7 | Tag for categorizing or markuping. 8 | 9 | ## When to use 10 | 11 | - It can be used to tag by dimension or property. 12 | 13 | - categorizing 14 | 15 | ## API 16 | 17 | | Property | Description | Type | Default | 18 | |--------------|-----------------------|----------|--------------| 19 | | closable | Tag can be closed. | boolean | false | 20 | | onClose | Callback when tag was closed | function(event)| - | 21 | | afterClose | Callback when closed animation is complete | function(event)| - | 22 | | color | Tag's color: `blue` `green` `yellow` `red` | string | - | -------------------------------------------------------------------------------- /src/pages/affix/demo/Basic.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /src/pages/tooltip/demo/Basic.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /components/tag/src/Tag.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 30 | -------------------------------------------------------------------------------- /components/timeline/demo/pending.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 最后一个 5 | en-US: Last node 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 在最后位置添加一个幽灵节点，表示时间轴未完成，还在记录过程中。可以指定 `pending={true}` 或者 `pending={一个 React 元素}`。 11 | 12 | ## en-US 13 | 14 | When the timeline is incomplete and ongoing, put a ghost node at last. set `pending={true}` or `pending={a React Element}`。 15 | 16 | ````jsx 17 | import { Timeline } from 'antd'; 18 | 19 | ReactDOM.render( 20 | 查看更多}> 21 | 创建服务现场 2015-09-01 22 | 初步排除网络异常 2015-09-01 23 | 技术测试异常 2015-09-01 24 | 25 | , mountNode); 26 | ```` 27 | -------------------------------------------------------------------------------- /src/pages/rate/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | ## Rate 评分 2 | 3 | 评分组件。 4 | 5 | ## 何时使用 6 | 7 | - 对评价进行展示。 8 | - 对事物进行快速的评级操作。 9 | 10 | ## 代码演示 11 | 12 | 13 | 14 | 23 | 24 | ## API 25 | 26 | | 属性 | 说明 | 类型 | 默认值 | 27 | |------------|----------------|-------------------|-------------| 28 | | count | star 总数 | Number | 5 | 29 | | value | 当前数，受控值 | Number | - | 30 | | defaultValue | 默认值 | Number | 0 | 31 | | onChange(value: Number) | 回调 | Function | - | 32 | | allowHalf | 是否允许半选 | Boolean | false | 33 | | disabled | 只读，无法进行交互 | Boolean | false | 34 | -------------------------------------------------------------------------------- /components/notification/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 最简单的用法，4.5 秒后自动关闭。 11 | 12 | ## en-US 13 | 14 | The simplest usage that close the notification box after 4.5s. 15 | 16 | ````jsx 17 | import { Button, notification } from 'antd'; 18 | 19 | const openNotification = function () { 20 | notification.open({ 21 | message: 'This is the title', 22 | description: 'This is the content of the notification.This is the content of the notification.This is the content of the notification.', 23 | }); 24 | }; 25 | 26 | ReactDOM.render( 27 | 28 | , mountNode); 29 | ```` 30 | -------------------------------------------------------------------------------- /components/rate/index.en-US.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | type: Form Controls 4 | title: Rate 5 | --- 6 | 7 | Rate component. 8 | 9 | ## When to use 10 | 11 | - Show evalutate. 12 | - A quick rating operation on something. 13 | 14 | ## API 15 | 16 | | Property | Description | type | Default | 17 | |------------|----------------|-------------------|-------------| 18 | | count | star count | Number | 5 | 19 | | value | current value | Number | - | 20 | | defaultValue | default value | Number | 0 | 21 | | onChange(value: Number) | callback | Function | - | 22 | | allowHalf | weather to allow semi selection | Boolean | false | 23 | | disabled | read only, unable to interact | Boolean | false | 24 | -------------------------------------------------------------------------------- /components/breadcrumb/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | 3 | @breadcrumb-prefix-cls: ant-breadcrumb; 4 | 5 | .@{breadcrumb-prefix-cls} { 6 | color: #999; 7 | font-size: @font-size-base; 8 | 9 | a { 10 | color: @text-color; 11 | transition: color .3s; 12 | &:hover { 13 | color: tint(@primary-color, 20%); 14 | } 15 | } 16 | 17 | & > span:last-child { 18 | font-weight: bold; 19 | color: @text-color; 20 | } 21 | 22 | & > span:last-child &-separator { 23 | display: none; 24 | } 25 | 26 | &-separator { 27 | margin: 0 8px; 28 | color: @border-color-base; 29 | } 30 | 31 | &-link { 32 | > .anticon + span { 33 | margin-left: 4px; 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /components/date-picker/locale/ru_RU.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Andrey Gayvoronsky on 13/04/16. 3 | */ 4 | 5 | import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/ru_RU'; 6 | import CalendarLocale from 'rc-calendar/lib/locale/ru_RU'; 7 | import TimePickerLocale from '../../time-picker/locale/ru_RU'; 8 | import assign from 'object-assign'; 9 | const locale = assign({}, GregorianCalendarLocale); 10 | locale.lang = assign({ 11 | placeholder: 'Выберите дату', 12 | rangePlaceholder: ['Начальная дата', 'Конечная дата'], 13 | }, CalendarLocale); 14 | 15 | locale.timePickerLocale = assign({}, TimePickerLocale); 16 | 17 | // All settings at: 18 | // https://github.com/ant-design/ant-design/issues/424 19 | 20 | export default locale; 21 | -------------------------------------------------------------------------------- /components/input/src/InputGroup.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 29 | 30 | -------------------------------------------------------------------------------- /src/pages/tag/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | ## Tag 标签 2 | 3 | 进行标记和分类的小标签。 4 | 5 | ## 何时使用 6 | 7 | - 用于标记事物的属性和维度。 8 | - 进行分类。 9 | 10 | ## 代码演示 11 | 12 | 13 | 14 | 23 | 24 | ## API 25 | 26 | | 参数 | 说明 | 类型 | 默认值 | 27 | |----------------|-------------------------------|------|--------| 28 | | closable | 标签是否可以关闭 | boolean | false | 29 | | onClose | 关闭时的回调 | function(event) | - | 30 | | afterClose | 关闭动画完成后的回调 | function(event) | - | 31 | | color | 标签的色彩：`blue` `green` `yellow` `red` | string | - | 32 | -------------------------------------------------------------------------------- /components/date-picker/locale/zh_CN.tsx: -------------------------------------------------------------------------------- 1 | import GregorianCalendarLocale from 'gregorian-calendar/lib/locale/zh_CN'; 2 | import CalendarLocale from 'rc-calendar/lib/locale/zh_CN'; 3 | import TimePickerLocale from '../../time-picker/locale/zh_CN'; 4 | import assign from 'object-assign'; 5 | // 统一合并为完整的 Locale 6 | const locale = assign({}, GregorianCalendarLocale); 7 | locale.lang = assign({ 8 | placeholder: '请选择日期', 9 | rangePlaceholder: ['开始日期', '结束日期'], 10 | }, CalendarLocale); 11 | 12 | locale.timePickerLocale = assign({}, TimePickerLocale); 13 | 14 | // should add whitespace between char in Button 15 | locale.lang.ok = '确 定'; 16 | 17 | // All settings at: 18 | // https://github.com/ant-design/ant-design/issues/424 19 | 20 | export default locale; 21 | -------------------------------------------------------------------------------- /src/pages/spin/demo/Size.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /components/modal/demo/confirm.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 确认对话框 5 | en-US: Confirmation modal dialog 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 使用 `confirm()` 可以快捷地弹出确认框。 11 | 12 | ## en-US 13 | 14 | To use `confirm()` to popup a confirmation modal dialog. 15 | 16 | ````jsx 17 | import { Modal, Button } from 'antd'; 18 | const confirm = Modal.confirm; 19 | 20 | function showConfirm() { 21 | confirm({ 22 | title: 'Are you sure you want to delete these items ?', 23 | content: 'some descriptions', 24 | onOk() { 25 | console.log('OK'); 26 | }, 27 | onCancel() {}, 28 | }); 29 | } 30 | 31 | ReactDOM.render( 32 | 35 | , mountNode); 36 | ```` 37 | -------------------------------------------------------------------------------- /src/sass/site/not-found.less: -------------------------------------------------------------------------------- 1 | #page-404 { 2 | background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg'); 3 | width: 100%; 4 | height: 100%; 5 | background-repeat: no-repeat; 6 | background-attachment: fixed; 7 | background-position: center; 8 | background-size: 100%; 9 | position: fixed; 10 | top: 0; 11 | left: 0; 12 | right: 0; 13 | bottom: 0; 14 | z-index: 100; 15 | 16 | section { 17 | position: absolute; 18 | top: 48%; 19 | left: 55%; 20 | margin: -103px 0 0 -120px; 21 | 22 | text-align: center; 23 | } 24 | 25 | h1 { 26 | color: #2DB7F5; 27 | font-size: 120px; 28 | font-weight: 500; 29 | } 30 | 31 | p { 32 | color: #666; 33 | font-size: 18px; 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | import uppercamelcase from 'uppercamelcase'; 2 | import './style'; 3 | 4 | const requireAll = requireContext => { 5 | return requireContext.keys().map(requireContext); 6 | }; 7 | 8 | const modules = requireAll(require.context( 9 | '../components', 10 | true, 11 | /(^\.\/((?!node_modules|_utils|style).)+\/[^/]*index\.js$)/)); 12 | 13 | const components = {}; 14 | 15 | modules.forEach(item => { 16 | const name = uppercamelcase(item.name.replace(/ant-/, '')); 17 | components[name] = item; 18 | }); 19 | 20 | module.exports = Object.assign({}, { 21 | install(Vue) { 22 | Object.keys(modules).forEach(key => { 23 | const item = modules[key]; 24 | Vue.component(item.name, item); 25 | }); 26 | } 27 | }, components); 28 | -------------------------------------------------------------------------------- /components/button/demo/size.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | title: 4 | zh-CN: 按钮尺寸 5 | en-US: Size 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 按钮有大、中、小三种尺寸。 11 | 12 | 通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。 13 | 14 | ## en-US 15 | 16 | Ant Design supports a default button size as well as a large and small size. 17 | 18 | If a large or small button is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a button with the default size. 19 | 20 | ````jsx 21 | import { Button } from 'antd'; 22 | 23 | ReactDOM.render(
24 | 25 | 26 | 27 |
, mountNode); 28 | ```` 29 | -------------------------------------------------------------------------------- /components/upload/demo/beforeUpload.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 7 3 | title: 限制用户上传的文件 4 | --- 5 | 6 | 可以通过 `beforeUpload` 在文件上传之前进行干预，如限制用户只能上传 JPG 文件。 7 | 8 | 也支持异步检查，`beforeUpload` 的返回值可以是一个 Promise：[示例](http://react-component.github.io/upload/examples/beforeUpload.html)。 9 | 10 | ````jsx 11 | import { Upload, Button, Icon, message } from 'antd'; 12 | 13 | const props = { 14 | action: '/upload.do', 15 | beforeUpload(file) { 16 | const isJPG = file.type === 'image/jpeg'; 17 | if (!isJPG) { 18 | message.error('只能上传 JPG 文件哦！'); 19 | } 20 | return isJPG; 21 | }, 22 | }; 23 | 24 | ReactDOM.render( 25 | 26 | 29 | 30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/back-top/style/index.less: -------------------------------------------------------------------------------- 1 | @import "../../style/themes/default"; 2 | 3 | @backtop-prefix-cls: ant-back-top; 4 | 5 | .@{backtop-prefix-cls} { 6 | z-index: @zindex-back-top; 7 | position: fixed; 8 | right: 100px; 9 | bottom: 50px; 10 | height: 40px; 11 | width: 40px; 12 | cursor: pointer; 13 | 14 | &-content { 15 | height: 40px; 16 | width: 40px; 17 | border-radius: 20px; 18 | background-color: rgba(64, 64, 64, 0.4); 19 | color: #fff; 20 | text-align: center; 21 | transition: all .3s @ease-in-out; 22 | 23 | &:hover { 24 | background-color: rgba(64, 64, 64, 0.6); 25 | transition: all .3s @ease-in-out; 26 | } 27 | } 28 | 29 | &-icon { 30 | font-size: 20px; 31 | margin-top: 10px; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/pages/affix/demo/Offset.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-ant-ui 2 | 仿照ant-design的vue版本 3 | 4 | ## 已完成组件 5 | - affix 6 | - checkbox 7 | - radio 8 | - tag 9 | - alert 10 | - col 11 | - rate 12 | - row 13 | - timeline 14 | - back-top 15 | - badge 16 | - modal 17 | - breadcrumb 18 | - spin 19 | - button 20 | - icon 21 | - pagination 22 | - steps 23 | - card 24 | - input (高度自动适应未完成) 25 | - switch 26 | - input-number 27 | - progress (line与circle下的strokeWidth默认值都为10) 28 | - table (只有基础功能,未完善) 29 | - message 30 | - notification (自定义按钮未实现) 31 | - tooltip 32 | - form (完成基本功能 表单验证未做) 33 | 34 | # 使用方法 35 | ``` 36 | import AntUI from 'vue-ant-ui' 37 | Vue.use(AntUI) 38 | ``` 39 | 暂不推荐使用到生产环境 40 | example中有部分小例子 41 | 后续持续更新 42 | 另外 看到[FE-Driver的Vue版ant-design实现](https://github.com/FE-Driver/vue-beauty)这个实现也蛮不错的 有几个组件写法比我好很多 后续可能会参考一部分进行组件优化 43 | -------------------------------------------------------------------------------- /components/select/demo/search.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 带搜索框 5 | en-US: Select with search field 6 | --- 7 | 8 | ## zh-CN 9 | 展开后可对选项进行搜索。 10 | 11 | ## en-US 12 | Search the options while expanded. 13 | 14 | ````jsx 15 | import { Select } from 'antd'; 16 | const Option = Select.Option; 17 | 18 | function handleChange(value) { 19 | console.log(`selected ${value}`); 20 | } 21 | 22 | ReactDOM.render( 23 | 34 | , mountNode); 35 | ```` 36 | -------------------------------------------------------------------------------- /src/pages/tabs/demo/Basic.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 30 | -------------------------------------------------------------------------------- /src/pages/affix/demo/Bottom.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 29 | -------------------------------------------------------------------------------- /src/pages/switch/demo/Basic.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | -------------------------------------------------------------------------------- /components/back-top/demo/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 自定义样式 5 | en-US: Custom style 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 可以自定义回到顶部按钮的样式，限制宽高：`40px * 40px`。 11 | 12 | ## en-US 13 | 14 | You can customize the style of the button, just note the size limit: no more than `40px * 40px`. 15 | 16 | 17 | ````jsx 18 | import { BackTop } from 'antd'; 19 | 20 | const style = { 21 | height: 40, 22 | width: 40, 23 | lineHeight: '40px', 24 | borderRadius: 4, 25 | backgroundColor: '#57c5f7', 26 | color: '#fff', 27 | textAlign: 'center', 28 | fontSize: 20, 29 | }; 30 | 31 | ReactDOM.render( 32 |
33 | 34 |
UP
35 | 36 | 向下滚动后，见右下角蓝色按钮 37 |
38 | , mountNode); 39 | ```` 40 | -------------------------------------------------------------------------------- /components/calendar/demo/custom-render.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | title: 4 | zh-CN: 自定义渲染 5 | en-US: Custom Render 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 用 `dateCellRender` 和 `monthCellRender` 函数来自定义需要渲染的数据。 11 | 12 | ## en-US 13 | 14 | This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need. 15 | 16 | ````jsx 17 | import { Calendar } from 'antd'; 18 | 19 | function dateCellRender(value) { 20 | return
自定义日数据 {value.getDayOfMonth()}
; 21 | } 22 | 23 | function monthCellRender(value) { 24 | return
自定义月数据 {value.getMonth()}
; 25 | } 26 | 27 | ReactDOM.render( 28 | 31 | , mountNode); 32 | ```` 33 | -------------------------------------------------------------------------------- /components/dropdown/demo/sub-menu.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | title: 4 | zh-CN: 多级菜单 5 | en-US: Cascading menu 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 传入的菜单里有多个层级。 11 | 12 | ## en-US 13 | 14 | The menu has multiple levels. 15 | 16 | ````jsx 17 | import { Menu, Dropdown, Icon } from 'antd'; 18 | const SubMenu = Menu.SubMenu; 19 | 20 | const menu = ( 21 | 22 | 第一个菜单项 23 | 第二个菜单项 24 | 25 | 第三个菜单项 26 | 第四个菜单项 27 | 28 | 29 | ); 30 | 31 | ReactDOM.render( 32 | 33 | 34 | 多级菜单 35 | 36 | 37 | , mountNode); 38 | ```` 39 | -------------------------------------------------------------------------------- /components/slider/demo/basic.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 基本 5 | en-US: Basic 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 基本滑动条。当 `range` 为 `true` 时，渲染为双滑块。当 `disabled` 为 `true` 时，滑块处于不可用状态。 11 | 12 | ## en-US 13 | 14 | Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable. 15 | 16 | ````jsx 17 | import { Slider } from 'antd'; 18 | 19 | ReactDOM.render(
20 | 21 | 22 | 23 |
24 | , mountNode); 25 | ```` 26 | 27 | 35 | -------------------------------------------------------------------------------- /components/switch/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | category: Components 3 | chinese: 开关 4 | type: Form Controls 5 | english: Switch 6 | --- 7 | 8 | 开关选择器。 9 | 10 | ## 何时使用 11 | 12 | - 需要表示开关状态/两种状态之间的切换时； 13 | - 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。 14 | 15 | ## API 16 | 17 | ### Switch 18 | 19 | | 参数 | 说明 | 类型 |默认值 | 20 | |-----------|------------------------------------------|------------|--------| 21 | | checked | 指定当前是否选中 | Boolean | false | 22 | | defaultChecked | 初始是否选中 | Boolean | false | 23 | | onChange | 变化时回调函数 | Function(checked:Boolean) | | 24 | | checkedChildren | 选中时的内容 | React Node | | 25 | | unCheckedChildren | 非选中时的内容 | React Node | | 26 | | size | 开关大小，可选值：`default` `small` | String | default | 27 | -------------------------------------------------------------------------------- /src/sass/site/page-nav.less: -------------------------------------------------------------------------------- 1 | .prev-next-nav { 2 | position: absolute; 3 | bottom: 0; 4 | left: 0; 5 | width: 100%; 6 | overflow: hidden; 7 | font-size: 16px; 8 | border-top: 1px solid #e9e9e9; 9 | } 10 | 11 | .prev-next-nav > .prev-page, 12 | .prev-next-nav > .next-page { 13 | padding: 0 24px; 14 | width: 50%; 15 | float: left; 16 | line-height: 72px; 17 | height: 72px; 18 | } 19 | 20 | .prev-next-nav > a.prev-page:before { 21 | font-family: 'anticon'; 22 | content: '\e601'; 23 | font-size: 12px; 24 | margin-right: 1em; 25 | } 26 | 27 | .prev-next-nav > .next-page { 28 | text-align: right; 29 | float: right; 30 | } 31 | 32 | .prev-next-nav > a.next-page:after { 33 | font-family: 'anticon'; 34 | content: '\e600'; 35 | font-size: 12px; 36 | margin-left: 1em; 37 | } -------------------------------------------------------------------------------- /components/slider/demo/event.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 事件 5 | en-US: Event 6 | --- 7 | 8 | ## zh-CN 9 | 10 | 当 Slider 的值发生改变时，会触发 `onChange` 事件，并把改变后的值作为参数传入。在 `onmouseup` 时，会触发 `onAfterChange` 事件，并把当前值作为参数传入。 11 | 12 | ## en-US 13 | 14 | The `onChange` callback function will fire when the user changes the slider's value. 15 | The `onAfterChange` callback function will fire when `onmouseup` fired. 16 | 17 | ````jsx 18 | import { Slider } from 'antd'; 19 | 20 | function log(value) { 21 | console.log(value); 22 | } 23 | 24 | ReactDOM.render( 25 |
26 | 27 | 28 | 29 |
30 | , mountNode); 31 | ```` 32 | -------------------------------------------------------------------------------- /components/style/core/motion/swing.less: -------------------------------------------------------------------------------- 1 | .swing-motion(@className, @keyframeName) { 2 | .@{className}-enter, 3 | .@{className}-appear { 4 | .motion-common(); 5 | animation-play-state: paused; 6 | } 7 | .@{className}-enter.@{className}-enter-active, 8 | .@{className}-appear.@{className}-appear-active { 9 | animation-name: ~"@{keyframeName}In"; 10 | animation-play-state: running; 11 | } 12 | } 13 | 14 | .swing-motion(swing, antSwing); 15 | 16 | @keyframes antSwingIn { 17 | 0%, 18 | 100% { 19 | transform: translateX(0px); 20 | } 21 | 20% { 22 | transform: translateX(-10px); 23 | } 24 | 40% { 25 | transform: translateX(10px); 26 | } 27 | 60% { 28 | transform: translateX(-5px); 29 | } 30 | 80% { 31 | transform: translateX(5px); 32 | } 33 | } 34 | --------------------------------------------------------------------------------