在ant-design-vue@1.2.0中,我们引入了 svg 图标(为何使用 svg 图标?)。使用了字符串命名的图标 API 无法做到按需加载,因而全量引入了 svg 图标文件,这大大增加了打包产物的尺寸。在 2.0 中,我们调整了图标的使用 API 从而支持 tree shaking,减少默认包体积约 150 KB(Gzipped)。
showIcon 是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式 boolean false switcherIcon 自定义树节点的展开/折叠图标 slot - showLine 是否展示连接线 boolean false title 标题 slot 2.0.0 事件 事件名称说明回调参数 check 点击复选框触发 function(checkedKeys, e:{...
libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' // 如果你想加载 less 文件,配置为 'less' } ] ] }; 1.2 全局引入 如果不考虑打包体积问题,可以直接在项目中全局引入 Ant-Design-Vue: import { createApp } from 'vue'; import App from './App.vue'; import Antd from '...
Ant Design Vue 设计规范和技术上支持灵活的样式定制,以满足业务和品牌上多样化的视觉需求,包括但不限于全局样式(主色、圆角、边框)和指定组件的视觉定制。 在4.0 版本的 Ant Design Vue 中,我们提供了一套全新的定制主题方案。不同于 3.x 版本的 less 和 CSS 变量,有了 CSS-in-JS 的加持后,动态主题的能力...
Ant Design 依次提供了三级选项卡,分别用于不同的场景。 卡片式的页签,提供可关闭的样式,常用于容器顶部。 标准线条式页签,用于容器内部的主功能切换,这是最常用的 Tabs。 RadioButton可作为更次级的页签来使用。 代码演示 Tab 1 Tab 2 Tab 3 Content of Tab Pane 1 ...
import { Form } from 'ant-design-vue'; const useForm = Form.useForm; useForm(modelRef, ruleRef, [options]); 参数说明: /* `modelRef`, `ruleRef` 必须是响应式数据 */ interface Props { [key: string]: any; } function useForm( modelRef: Props | Ref<Props>, rulesRef?: Props |...
如果需要组件重置样式,又不想引入ant-design-vue/dist/reset.css从而导致污染全局样式的话,可以尝试在应用最外层使用App 组件,解决原生元素没有 ant-design-vue 规范样式的问题。 移除css variables 以及在此之上构筑的动态主题方案。 LocaleProvider 在 3.x 中已经废弃(使用<ConfigProvider locale />替代),我们在 ...
An enterprise-class UI design language and React UI library. Changelog·Report Bug·Request Feature· English ·中文 ✨ Features 🌈 Enterprise-class UI designed for web applications. 📦 A set of high-quality React components out of the box. ...
而 Ant Design 就是诞生在这样的背景之下,也是外需和内需共同作用的结果。 大中台,小前台。15 年初,随着前线业务的开疆拓土,中后台产品需求与日俱增。原来没人管的地方,逐步成了增长的瓶颈,也在内部引发矛盾。其中,肯德基接入支付宝是一个典型缩影,当 BD 满怀欣喜的谈下这一大商户,却困在如何对接肯德基这么多...
{ libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true } ] ] } 接着在 main.js 按需引入组件 // main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 新增代码:引入特定组件 // 此时会自动引入对应的...