Ant Design UI框架的使用

Ant Design UI框架的使用

1.下载ant design 蚂蚁金服UI框架:

npm install  antd  --save

2.使用:
在需要使用该UI框架的地方,需要手动引入样式。

 import 'antd/dist/antd.css';

需要使用哪些模块的UI直接引入即可:

import  {Button, Icon,Radio} from 'antd'

用逗号隔开每个模块。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<p><span xss=removed>Ant Design 是阿里开源的一套企业级的 UI 设计语言和 React 实现,使用 TypeScript 构建,提供完整的类型定义文件,自带提炼自企业级中后台产品的交互语言和视觉风格、开箱即用的高质量 React 组件与全链路开发和设计工具体系。</span></p><p> </p><p>特性:</p><p>提炼自企业级中后台产品的交互语言和视觉风格。</p><p>开箱即用的高质量 React 组件。</p><p>使用 TypeScript 开发,提供完整的类型定义文件。</p><p>全链路开发和设计工具体系。</p><p>数十个国际化语言支持。</p><p>深入每个细节的主题定制能力。</p><p> </p><p>兼容环境:</p><p>现代浏览器和 IE11(需要 polyfills)。</p><p>支持服务端渲染。</p><p>Electron</p><p> </p><p>Ant Design 更新日志:</p><p>v4.16.0</p><p>重构 Menu,支持键盘操作以及无障碍体验优化。</p><p>重新设计 Table 筛选和排序按钮的位置,使其归属列更明确。</p><p>Table</p><p>  Table.Summary 支持 sticky 模式。</p><p>  修复有固定列的 Table 内嵌 Table 的额外边距丢失的问题。</p><p>  Table 新增 expandable.fixed 属性用于设置扩展图标固定。</p><p>Upload</p><p>  Upload 组件 itemRender 添加 actions 调用参数。</p><p>  Upload 从拖动事件中删除 stopPropagation,并添加onDrop 回调。</p><p>Typography</p><p>  Typography 增加斜体字支持。</p><p>  修复 Typography 配置 ellipsis={{ suffix: 'xxx' }} 时换行闪动问题。</p><p>Collapse</p><p>  修复 Collapse 不指定 header 时箭头错位的问题。</p><p>  修复 Collapse 隐藏时设置 activeKey 时内容会消失的问题。</p><p>修复 Menu.SubMenu 的 icon 设置为第三方 icon 库时的样式问题。</p><p>修复 Descriptions 单独引入样式丢失的问题。</p><p>Radio.Group 支持 data-* 和 aria-* 属性。</p><p>Statistic.CountDown 组件增加 onChange 事件。</p><p>PageHeader 的 breadcrumb 中允许设置为组件。</p><p>ConfigProvider 支持动态设置 prefixCls。</p><p>修复 Anchor 指定 getCurrentAnchor 后无法触发 onChange 的问题。</p><p>修复 Notification useNotification 生成的通知框 className 作用范围不一致的问题。</p><p>修复 Tabs tabBarGutter 属性失效的问题。#30545</p><p>改写 Space 使用 flexGap 以代替 margin 样式以处理某些边界情况下的布局问题。</p><p>修复 Form 校验错误状态下 Input.Group 和 Cascader 边框颜色错误。</p><p>国际化</p><p>  补充罗马尼亚语国际化。</p><p>  补充荷兰语(荷兰 netherlands)及荷兰语(比利时 belgium)国际化。</p><p>TypeScript</p><p>  Space TypeScript 定义支持 HTMLAttribute 属性。</p>
### 回答1: 是什么?Element UIAnt Design是两个不同的前端设计框架。Element UI是饿了么团队开发的一个基于Vue.js的UI组件库,而Ant Design蚂蚁金服团队开发的一个基于React的前端设计框架。两者在设计风格、功能实现、社区支持等方面都有所不同,因此用户可以根据自己的需求来选择适合的框架。 ### 回答2: Element UIAnt Design是两个流行的前端UI组件库,它们都基于Vue.js框架开发,提供了丰富的UI组件和丰富的功能。 首先,Element UI是由饿了么前端团队开发的,注重于提供简洁、易用的UI组件。它设计风格扁平化,色彩简约,适用于快速搭建中后台系统。Element UI的组件丰富,包括表单、表格、弹窗、导航等常用组件,而且还提供了国际化支持和配套的设计规范文档。 Ant Design是由阿里巴巴前端团队开发的,注重于提供美观、可定制的UI组件。它的设计风格更加柔和,注重细节和交互体验,适用于构建复杂的应用程序。Ant Design的组件也很丰富,包括按钮、输入框、日期选择器、图标等等,而且还提供了灵活的主题定制和配套的设计规范文档。 对比两者,Element UI更加简洁易用,适合快速搭建中后台系统。Ant Design更加美观可定制,适合构建复杂的应用程序。两者都有优秀的社区支持和详细的文档,都能满足大多数前端开发需求。选择哪个UI组件库取决于个人偏好和项目需求。 ### 回答3: Element UIAnt Design都是用于构建Web界面的UI框架,但它们在设计理念、风格和功能上有一些区别。 首先,Element UI是一个基于Vue.js的UI框架,而Ant Design是基于React.js的UI框架。这意味着,如果你使用Vue.js作为前端开发框架,那么Element UI可能是更好的选择,而如果你使用React.js,那么Ant Design可能更适合你。 其次,Element UI注重的是简洁、直观和易用的设计理念。它使用了扁平化的设计风格,界面简洁清晰,组件丰富,并提供了丰富的样式和交互效果。Element UI的组件库非常完善,涵盖了常见的表单、表格、弹出框等组件,适用于构建各种Web应用。 Ant Design则更加注重于企业级应用场景。它提供了丰富的组件和模板,可以帮助开发人员更快速地构建复杂的企业级界面。Ant Design使用蚂蚁金服自己的设计风格,界面更具有科技感,注重于响应式布局,并提供了许多与企业级应用相关的组件和模板。 此外,Element UIAnt Design在社区支持和生态系统方面也有一些区别。Element UI在Vue.js社区中非常流行,拥有庞大的开发者社区和活跃的维护团队,提供了详细的文档和示例,以及丰富的第三方插件和工具。Ant Design同样也拥有庞大的社区支持,但它在React.js社区中可能更受欢迎。 总而言之,Element UIAnt Design都是优秀的UI框架,具有各自的特点和适用场景。你可以根据自己的需求、技术栈和个人喜好来选择适合的UI框架

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值