🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜

Last update: Aug 11, 2022

Ant Design Vue

An enterprise-class UI components based on Ant Design and Vue.

test codecov npm package NPM downloads backers sponsors extension-for-VSCode

English | 简体中文

Features

  • An enterprise-class UI design system for desktop applications.
  • A set of high-quality Vue components out of the box.
  • Shared Ant Design of React design resources.

Environment Support

  • Modern browsers and Internet Explorer 11+. v1.x support Internet Explorer 9+ (with polyfills)
  • Server-side Rendering
  • Support Vue 2 & Vue 3
  • Electron
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Opera
Opera
Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

Using npm or yarn

We recommend using npm or yarn to install,it not only makes development easier,but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling.

$ npm install ant-design-vue --save
$ yarn add ant-design-vue

If you are in a bad network environment,you can try other registries and tools like cnpm.

Links

Ecosystem

Project Description
vue-ref You can use the callback to get a reference like react
ant-design-vue-helper A vscode extension for ant-design-vue
vue-cli-plugin-ant-design Vue-cli 3 plugin to add ant-design-vue
vue-dash-event The library function, implemented in the DOM template, can use the custom event of the ant-design-vue component (camelCase)

Donation

ant-design-vue is an MIT-licensed open source project. In order to achieve better and sustainable development of the project, we expect to gain more backers. You can support us in any of the following ways:

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Patreon

Support us with a monthly donation and help us continue our activities. [Become a backer]

More Sponsor (From Patreon、alipay、wechat、paypal...)

Let's fund issues in this repository

GitHub

https://github.com/vueComponent/ant-design-vue
Comments
  • 1. 3.0 for Easier to use

    We plan to start the development of 3.0, the main purpose is to make the component library easier to use. The reconstruction is mainly from the following points:

    1. open sources doc
    2. Improve the ts type
    3. Remove the defaultXxxx api and support more v-model directives
    4. Use dayjs to reconstruct date-related components
    5. More components support virtual scrolling
    6. .....

    If you have other suggestions, please leave a message

    progress: https://github.com/vueComponent/ant-design-vue/discussions/4575

    try: https://next.antdv.com/components/overview/

    Reviewed by tangjinzhou at 2021-04-10 13:59
  • 2. 2.0 计划

    • [x] I have searched the issues of this repository and believe that this is not a duplicate.

    What problem does this feature solve?

    • [x] 1、~~按需加载icon~~  2.0.0-beta.1

    • [ ] 2、rtl

    • [x] 3、slot-scope 改成单参数 2.0.0-beta.2

    • [x] 4、暗黑模式

    • [ ] 5、antd 4.0 设计规范

    • [x] 6、兼容 vue 3.x #1913

    • [x] 7、文档示例统一使用 v-model,简化 defaultXXX 的存在,降低理解成本 2.0.0-beta.2

    • [x] 8、~~日期相关组件支持字符串形式的 value 属性~~ 1.5.4

    • [ ] 10、colorpicker 颜色选择器

    • [ ] 11、ConfigProvider 支持 componentSize 用来支持全局切换组件大小 #1121

    需要您的支持

    image

    Reviewed by tangjinzhou at 2020-03-20 06:36
  • 3. Support Vue 3 & Vite from 2.0.0-beta.5

    • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

    What problem does this feature solve?

    npm test -- ant-design-vue/components/button/__tests__/index.test.js --watch
    

    beta

     npm i --save [email protected]
    
    // use
    import { createApp } from 'vue';
    import antd from 'ant-design-vue';
    import 'ant-design-vue/components/style.js';
    import App from './App.vue';
    createApp(App).use(antd).mount('#app');
    
    • [x] Affix
    • [x] Anchor
    • [x] AutoComplete
    • [x] Alert
    • [x] Avatar
    • [x] BackTop
    • [x] Badge
    • [x] Breadcrumb
    • [x] Button
    • [x] Card
    • [x] Cascader
    • [x] Checkbox
    • [x] Col
    • [x] Divider
    • [x] Dropdown
    • [x] Icon
    • [x] Input
    • [x] InputNumber
    • [x] Layout
    • [x] ~~LocaleProvider~~ remove
    • [x] message
    • [x] Menu
    • [x] Mentions
    • [x] Modal
    • [x] notification
    • [x] Popconfirm
    • [x] Popover
    • [x] Progress
    • [x] Radio
    • [x] Rate
    • [x] Row
    • [x] Select
    • [x] Spin
    • [x] Statistic
    • [x] Steps
    • [x] Switch
    • [x] Tabs
    • [x] Tag
    • [x] Timeline
    • [x] Tooltip
    • [x] Upload
    • [x] Drawer
    • [x] Skeleton
    • [x] Comment
    • [x] ConfigProvider
    • [x] Empty
    • [x] Result
    • [x] Descriptions
    • [x] PageHeader
    • [x] Pagination
    • [x] Collapse
    • [x] Carousel
    • [x] Calendar
    • [x] DatePicker
    • [x] TimePicker
    • [x] Form、FormModel we will merge them
    • [x] Slider
    • [x] Table
    • [x] List
    • [x] Transfer
    • [x] Tree
    • [x] TreeSelect

    需要您的支持

    image

    Reviewed by tangjinzhou at 2020-03-20 06:50
  • 4. Warnings on console when using Menu component

    • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

    Version

    2.1.3

    Environment

    Windows 10, Chrome 89, Vue 3.0.11

    Reproduction link

    https://2x.antdv.com/components/menu

    Steps to reproduce

    Use the example code for Menu, with version ant-design-vue version 2.1.3

    What is expected?

    It is working properly but...

    What is actually happening?

    There is warnings in the console

    reactivity.esm-bundler.js:337 Set operation on key "" failed: target is readonly. {: 1, __vInternal: 1, default: ƒ}

    Reviewed by ais-one at 2021-04-27 00:35
  • 5. Form 性能优化意见征集

    What problem does this feature solve?

    Form组件过多时的性能问题 现在的 Form 组件里的任一 FormItem 变化都会导致 Form 所在的上下文触发更新,当上下文中组件过多时,会变得卡顿。 现在添加 :selfUpdate="true" 属性,将FormItem 变为独立更新,避免整个组件刷新。同样也带来了新的问题:如有其它依赖该表单项值的地方,则不可以使用。

    What does the proposed API look like?

    <template>
      <a-form :form="form">
        <a-form-item key="A" ref="formA">
            <a-input v-if="form.getFieldValue('B') === 'abc'" v-decorator="['A']" />
        </a-form-item>
        <a-form-item key="B" selfUpdate>
           <a-input v-decorator="['B']"  />
        </a-form-item>
      </form>
    </template>
    
    Reviewed by tangjinzhou at 2019-08-02 04:57
  • 6. Select and TreeSelect cannot be selected when use custom prefixCls

    • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

    Version

    3.0.0-alpha.15

    Environment

    3.0.0-alpha.15

    Reproduction link

    https://github.com/vueComponent/ant-design-vue

    Steps to reproduce

    使用Select和TreeSelect

    What is expected?

    无法选择

    What is actually happening?

    版本回退到3.0.0-alpha.14正常 14

    3.0.0-alpha.15选不了 15

    Reviewed by wishong at 2021-12-13 04:09
  • 7. 日期组件内部能否做到全部中文化?

    • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

    What problem does this feature solve?

    解决了对英文不懂的人对日期控件的使用

    What does the proposed API look like?

    locale语法自动化切换

    Reviewed by wwmin at 2020-07-07 01:07
  • 8. support typescript

    • [x] I have searched the issues of this repository and believe that this is not a duplicate.

    What problem does this feature solve?

    support typescript

    What does the proposed API look like?

    no

    Reviewed by tangjinzhou at 2018-11-07 04:28
  • 9. form表单不能进行v-model绑定,进而导致input框验证失败

    • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

    Version

    2.0.0-rc.1

    Environment

    win10 谷歌85版本 vue3.0.2 vite1.0.0-rc.8

    Reproduction link

    Edit on CodeSandbox

    Steps to reproduce

    form表单不能进行v-model绑定,进而导致input框验证失败

    What is expected?

    form进行v-model绑定

    What is actually happening?

    form表单不能进行v-model绑定 image image

    Reviewed by cxbb666 at 2020-11-23 07:32
  • 10. tree select 组件的参数 showCheckedStrategy 值不起作用,选择SHOW_ALL还是显示子节点

    • [x] I have searched the issues of this repository and believe that this is not a duplicate.

    Version

    1.4.11

    Environment

    mac chrome vue2.6.11

    Reproduction link

    Edit on CodeSandbox

    Steps to reproduce

    使用tree select 组件来选择地区,但是参数 showCheckedStrategy 值不起作用,选择SHOW_ALL还是只显示子节点

    What is expected?

    showCheckedStrategy 选择对应的值却无效果

    What is actually happening?

    showCheckedStrategy 选择对应的值却无效果

    Reviewed by glxe at 2020-04-18 02:59
  • 11. vue-cli3 Fully import Antd is not defined

    Reviewed by hqzh at 2018-08-14 12:31
  • 12. fix Pagination current change bug

    First of all, thank you for your contribution! 😄

    New feature please send pull request to feature branch, and rest to master branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!

    [中文版模板 / Chinese template]

    This is a ...

    • [ ] New feature
    • [x] Bug fix
    • [ ] Site / document update
    • [ ] Component style update
    • [ ] TypeScript definition update
    • [ ] Refactoring
    • [ ] Code style optimization
    • [ ] Branch merge
    • [ ] Other (about what?)

    What's the background?

    1. [Describe the source of requirement.
    2. Resolve what problem.
    3. Related issue link.](https://github.com/vueComponent/ant-design-vue/issues/5904)

    API Realization (Optional if not new feature)

    1. Basic thought of solution and other optional proposal.
    2. List final API realization and usage sample.
    3. GIF or snapshot should be provided if includes UI/interactive modification.

    What's the effect? (Optional if not new feature)

    1. Does this PR affect user? Which part will be affected?
    2. What will say in changelog?
    3. Does this PR contains potential break change or other risk?

    Changelog description (Optional if not new feature)

    1. English description
    2. Chinese description (optional)

    Self Check before Merge

    • [x] Doc is updated/provided or not needed
    • [x] Demo is updated/provided or not needed
    • [x] TypeScript definition is updated/provided or not needed
    • [x] Changelog is provided or not needed

    Additional Plan? (Optional if not new feature)

    If this PR related with other PR or following info. You can type here.

    Reviewed by yangyanggu at 2022-08-18 08:47
  • 13. when Pagination current is not 1,but total is change to 0, the Pagination state current where sub 1,but this change is not emit event

    • [x] I have searched the issues of this repository and believe that this is not a duplicate.

    Version

    3.2.11

    Environment

    vue 3.2.31

    Reproduction link

    Edit on CodeSandbox

    Steps to reproduce

    1、create Pagination 2、set current to 5(use v-model:current), set total to 50 3、change total to 40

    What is expected?

    current change to 4,and emit change event,I has add pr

    What is actually happening?

    nothing happened

    Reviewed by yangyanggu at 2022-08-18 08:40
  • 14. chore(deps): update dependency @octokit/rest to v19

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @octokit/rest | ^18.0.0 -> ^19.0.0 | age | adoption | passing | confidence |


    Release Notes

    octokit/rest.js

    v19.0.4

    Compare Source

    Bug Fixes

    v19.0.3

    Compare Source

    Bug Fixes

    v19.0.2

    Compare Source

    Bug Fixes

    v19.0.1

    Compare Source

    Bug Fixes

    v19.0.0

    Compare Source

    Continuous Integration
    BREAKING CHANGES
    • Drop support for NodeJS v10, v12

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    Reviewed by renovate[bot] at 2022-08-18 06:22
  • 15. 统一数据选中项的 color 属性的自定义能力

    • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

    What problem does this feature solve?

    主要的价值点在于操作提效上。

    这里主要有话 TimePicker 和 Cascader 组件,这两个个组件都属于时间选择组件(在众多选项中选择某一项)。比如 TimePicker 组件,点击展开选项,选中项的背景色会发生变化,比如默认是 灰色,并且官方支持自定义该背景色,但是文字颜色却不支持,其中 TimePicker 和 Cascader 组件都没有提供设置选中项文字颜色的主题变量,这两个组件选项中的文字,不论是选中还是未选中亦或者悬停状态下,都是黑色。

    如果支持自定义文字的颜色,这样就可以保持文字和背景色色调的一致,更能突出选项的属性,已选/悬停项区分的很明确,选择时也能更快聚焦到想看的信息上,选项越多,这种优势越明显。

    Menu 和 Select 组件就是一个符合预期的状态,为用户提供了对应的主题变量,给了用户自定义的机会。

    What does the proposed API look like?

    期望可以给 TimePicker 和 Cascader 组件,增加选中项文字颜色主题变量,给用户提供自定义的机会。

    对比效果图

    image

    如果同意,我这边可以提交 pr,望回复、讨论。

    Reviewed by liyongning at 2022-08-18 06:11
  • 16. fix(popover):fit width when message width is less than confirm btn

    First of all, thank you for your contribution! 😄

    New feature please send pull request to feature branch, and rest to master branch. Pull request will be merged after one of collaborators approve. Please makes sure that these form are filled before submitting your pull request, thank you!

    [中文版模板 / Chinese template]

    This is a ...

    • [ ] New feature
    • [x] Bug fix
    • [ ] Site / document update
    • [x] Component style update
    • [ ] TypeScript definition update
    • [ ] Refactoring
    • [ ] Code style optimization
    • [ ] Branch merge
    • [ ] Other (about what?)

    What's the background?

    image

    API Realization (Optional if not new feature)

    1. Basic thought of solution and other optional proposal.
    2. List final API realization and usage sample.
    3. GIF or snapshot should be provided if includes UI/interactive modification.

    What's the effect? (Optional if not new feature)

    1. Does this PR affect user? Which part will be affected?
    2. What will say in changelog?
    3. Does this PR contains potential break change or other risk?

    Changelog description (Optional if not new feature)

    1. English description
    2. Chinese description (optional)

    Self Check before Merge

    • [x] Doc is updated/provided or not needed
    • [x] Demo is updated/provided or not needed
    • [x] TypeScript definition is updated/provided or not needed
    • [x] Changelog is provided or not needed

    Additional Plan? (Optional if not new feature)

    If this PR related with other PR or following info. You can type here.

    Reviewed by menghany at 2022-08-18 03:43
  • 17. Transfer severity bug

    • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

    Version

    3.2.11

    Environment

    vue3 3.2.37 vite 3.0.7 TS

    Reproduction link

    https://github.com/CakeCheng/ant_err_demo.git

    Steps to reproduce

    官方的ConfigProvider 全局化配置 中的Transfer 穿梭框 也存在同样问题。无法选择 所有按钮均失效的状态。

    What is expected?

    期望能修复这个BUG。因为我有开始使用ConfigProvider这个东西

    What is actually happening?

    Transfer 在 ConfigProvider中无法正常使用

    Reviewed by CakeCheng at 2022-08-18 02:02
Ant design guide with storybook,
Ant design guide with storybook,

An enterprise-class UI components based on Ant Design and Vue.

Jan 20, 2022
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.
🧬Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

??Equal UI is a Vue 3 components library with 30+ components based on TypeScript and personal design system.

Aug 15, 2022
Enterprise UI for Vue.js.

Enterprise UI components for Vue.js. Based on BAIDU's Design Language System (DLS).

Aug 3, 2022
:diamonds: A modular and customizable UI library based on Material Design and Vue

BalmUI Next Generation Material UI for Vue.js Introduction BalmUI is a modular and customizable Material Design UI library for Vue.js. ?? NOW, balm-ui

Aug 9, 2022
Material Design styled components for Vue.js
Material Design styled components for Vue.js

Material Components Vue Material Design styled components for Vue.js Material-components-vue integrates the mdc-web (by google) vanilla components fol

Jul 25, 2022
Vue Components inspired by Microsoft's Fluent Design System
Vue Components inspired by Microsoft's Fluent Design System

Vue Components inspired by Microsoft's Fluent Design System

Jul 24, 2022
Bootstrap4 Material Design Components for Vue.js

Vue MDBootstrap Vue MDBootstrap is a collection of VueJs components and built according to the Google Material Design specs. They can be used to built

Aug 1, 2022
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.

Fundamental Vue Description The fundamental-vue library is a set of Vue.js components built using Fundamental Library Styles. Fundamental Library for

Jul 5, 2022
Vue Bootstrap with Material Design - Powerful and free UI KIT
Vue Bootstrap with Material Design - Powerful and free UI KIT

Vue Bootstrap with Material Design Based on the latest Bootstrap 4 and Vue. 400+ material UI elemens, 600+ material icons, 74 CSS animations, SASS fil

Aug 12, 2022
ICIJ's Design System for Bootstrap 4 and Vue.js

Murmur is ICIJ's Design System for Bootstrap 4 and Vue.js Status CI checks Code Climate NPM version NPM downloads Installation guide If you are using

Jun 8, 2022
Vue2 material design icons with easy access to icons names and types

vue-material-icons Vue2 material design icons with easy access to icons names and types (all available in IDE hints). Hints were tested on IntelliJ ID

May 11, 2022
Lightweight UI components for Vue.js based on Bulma
Lightweight UI components for Vue.js based on Bulma

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design. Features Keep your current Bulma theme / va

Aug 16, 2022
Material design for Vue.js
Material design for Vue.js

Material Design for Vue.js Vue Material is Simple, lightweight and built exactly according to the Google Material Design specs Build well-designed app

Aug 17, 2022
Vue implementation of the Carbon Design System
Vue implementation of the Carbon Design System

carbon-components-vue Vue implementation of the Carbon Design System A collection of Carbon Components implemented using Vue.js. Carbon Vue library -

Aug 17, 2022
A Vue.js design-system for Web.
A Vue.js design-system for Web.

A Vue.js Design System for Web. Responsive, user-friendly and lightweight library helping us build great products for our customers. This library for

Aug 11, 2022
Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT
 Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

Vue 3 & Bootstrap 5 & Material Design 2.0 UI KIT

Aug 12, 2022
Material Design UI library for Vuejs 2.0
Material Design UI library for Vuejs 2.0

Muse-UI Material Design UI library for Vuejs 2.0 Installation Muse-UI is available as an npm package npm install muse-ui -S yarn add muse-ui Usage imp

Aug 12, 2022
Maker Design System by Square

Square Maker A Vue.js 2.x component library. View the styleguide here. ?? Install # install maker npm i @square/maker # install peer dependencies npx

Aug 9, 2022