预 览开始使用 1 2 3 4 Feature What canProdo for you 优雅美观 基于Ant Design 体系精心设计 常见设计模式 提炼自中后台应用的典型页面和场景 最新技术栈 使用Vue/vuex/antd 等前端前沿技术开发 响应式 针对不同屏幕大小设计 主题 可配置的主题满足多样化的品牌诉求 ...
在浏览器中使用script和link标签直接引入文件,并使用全局变量antd。 我们在 npm 发布包内的ant-design-vue/dist目录下提供了antd.js、antd.min.js和reset.css。你也可以通过 或UNPKG进行下载。 强烈不推荐使用已构建文件,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。 注意:引入antd.js前你需要...
import{createApp}from'vue';importAntdfrom'ant-design-vue';importAppfrom'./App';import'ant-design-vue/dist/reset.css';constapp=createApp(App);app.use(Antd).mount('#app'); 以上代码便完成了 Antd 的全局注册。需要注意的是,样式文件需要单独引入。
插件会帮你转换成ant-design-vue/lib/xxx的写法。另外此插件配合style属性可以做到模块样式的按需自动加载。 注意,babel-plugin-import 的style属性除了引入对应组件的样式,也会引入一些必要的全局样式。如果你不需要它们,建议不要使用此属性。你可以import 'ant-design-vue/dist/antd.css手动引入,并覆盖全局样式。
ant-design-vue为 Web 应用提供了丰富的基础 UI 组件,我们还将持续探索企业级应用的最佳 UI 实践。 通用 3 Button 按钮 Icon 图标 Typography 排版 布局 4 Divider 分割线 Grid 栅格 Layout 布局 Space 间距 导航 7 Affix 固钉 Breadcrumb 面包屑 Dropdown 下拉菜单 ...
这三组 Token 并不是简单的分组,而是一个三层的派生关系,由 Seed Token 派生 Map Token,再由 Map Token 派生 Alias Token。在大部分情况下,使用 Seed Token 就可以满足定制主题的需要。但如果您需要更高程度的主题定制,您需要了解 antd 中 Design Token 的生命周期。
引入ant-design-vue# 1. 新建项目# 如果你需要新建一个项目,可以使用Vite、Rsbuild或Vue CLI。 请使用命令行来初始化项目: Vite: $npmcreate vite@latest Rsbuild: $npmcreate rsbuild@latest Vue CLI: $npminstall-g@vue/cli# OR$yarnglobaladd@vue/cli $ vue create antd-demo ...
在浏览器中使用script和link标签直接引入文件,并使用全局变量antd。 我们在 npm 发布包内的ant-design-vue/dist目录下提供了antd.jsantd.css以及antd.min.jsantd.min.css。你也可以通过或UNPKG进行下载。 强烈不推荐使用已构建文件,这样无法按需加载,而且难以获得底层依赖模块的 bug 快速修复支持。
import'ant-design-vue/dist/antd.css';// or 'ant-design-vue/dist/antd.less' 按需加载# 下面两种方式都可以只加载用到的组件。 使用babel-plugin-import(推荐)。 // .babelrc or babel-loader option{"plugins":[["import",{"libraryName":"ant-design-vue","libraryDirectory":"es","style":"css"...
Mentions 提及 Rate 评分 Select 选择器 Slider 滑动输入条 TimePicker 时间选择框 数据展示 22 Badge 徽标数 Collapse 折叠面板 Descriptions 描述列表 Image 图片 Popover 气泡卡片 Segmented 分段控制器 Tag 标签 Timeline 时间轴 Tree 树形控件