Ant Design 组件中文名称大全

已于 2024-04-21 17:25:10 修改
阅读量392 收藏 5
点赞数 10
分类专栏： React 文章标签： antd组件名 antd组件英文名称 react.js
于 2024-04-11 15:32:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sky6862/article/details/137640798
版权

在这里插入图片描述
整理Ant Design 中主要组件的中英文名称，加深对组件的印象,为后续使用时更容易想起和查找、与团队成员或其他开发者交流时,使用中文名称能够更加清晰地表达自己的意图,有助于沟通交流、可以更好地理解每个组件的功能和适用场景,有助于加深对 Ant Design 组件库的理解、在使用 Ant Design 时更快地找到需要的组件,提高开发效率。

  1. 基础组件:

    • Button - 按钮
    • Typography - 排版
    • Grid - 栅格
    • Layout - 布局
    • Divider - 分割线
    • Space - 间距

  2. 导航组件:

    • Menu - 导航菜单
    • Breadcrumb - 面包屑
    • Dropdown - 下拉菜单
    • Pagination - 分页
    • Steps - 步骤条

  3. 数据录入组件:

    • Input - 输入框
    • InputNumber - 数字输入框
    • Checkbox - 复选框
    • Radio - 单选框
    • Switch - 开关
    • Select - 选择器
    • TreeSelect - 树选择
    • Cascader - 级联选择
    • DatePicker - 日期选择器
    • TimePicker - 时间选择器
    • Upload - 上传

  4. 数据展示组件:

    • Avatar - 头像
    • Badge - 徽标数
    • Comment - 评论
    • Collapse - 折叠面板
    • Carousel - 轮播图
    • Card - 卡片
    • List - 列表
    • Statistic - 统计数值
    • Tooltip - 文字提示
    • Tree - 树形控件
    • Tabs - 标签页

  5. 反馈组件:

    • Alert - 警告提示
    • Modal - 对话框
    • Message - 全局提示
    • Notification - 通知提醒框
    • Progress - 进度条
    • Spin - 加载中
    • Skeleton - 骨架屏

  6. 其他组件:

    • Affix - 固钉
    • Anchor - 锚点
    • Drawer - 抽屉
    • Timeline - 时间轴
    • Transfer - 穿梭框
    • Tree - 树形控件
    • Popover - 气泡卡片
山川湖海
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AntDesign_Mob元件库
07-07
AntDesign_Mob元件库
前端学习-Antd 组件库基础
热门推荐
qq_48772498的博客
04-01 1万+
一.通用组件 1. Icon 图标，用于语义化的表示一些业务场景，比如：购物车、收藏夹、搜索、重置。 典型场景： 方向性图标 提示建议性图标 编辑类图标 数据类图标 品牌和标识 网站通用图标 2. Button 按钮用于开始一个即时操作。 典型场景： 跳转页面 唤起弹窗 触发行为：提交表单；删除；下载文件；搜索 二.布局组件 三.数据展示组件 四.反馈类组件 五.数据录入组件 ...
【Ant-Design-Vue】2、基础组件介绍
最新发布
weixin_52938153的博客
06-10 825
按钮是用户与应用程序交互的主要方式之一。Ant-Design-Vue 提供了多种按钮类型和样式，以适应不同的使用场景。
React之使用antd组件
学习笔记
09-04 2283
进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目前已经更新到4.22版本，原本是只支持react不过后来也支持vue了。antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。antd还可以更改主题颜色，按需引入组件的css，不过得小小操作一下，以后需要了再来补。进入组件选一个比较好看的组件，比如我觉得这个导航栏不错。然后选择js的代码，copy到App组件就行了。终于，ul设置一下就可以了。
React--》UI组件库ant-design的介绍与使用
ztK63LrD的博客
01-26 2910
Ant Design是阿里蚂蚁金服团队基于React开发的ui组件,主要用于中后台系统的使用。官方网址。以下可以看到antd的特性与介绍，可以看出antd的生态已经很完善了，可以说大部分的公司的项目都能找到使用antd的影子。在 5.0 版本的 Ant Design 中，提供了一套全新的定制主题方案。不同于 4.x 版本的 less 和 CSS 变量，有了 CSS-in-JS 的加持后，动态主题的能力也得到了加强。
Ant Design组件使用合集（不断更新）
weixin_51719919的博客
01-21 3242
一、Table组件的使用 Table组件中onCell的使用 需求1：描述内容过长时将超出部分隐藏并显示省略号，鼠标悬停查看全部信息 { title: '数据描述', dataIndex: 'desc', onCell: () => { return { //：注意用return style: {//注意：设置行内样式style maxWidth: 50, overflow: 'hidden',
AXURE Ant Design 4.40 - web组件库 ant design pro 后台模板 产品经理
02-13
在压缩包子文件的文件名称“ant design4.40-web组件库 ant design pro后台模板（精作）”中，我们可以推测该压缩包包含的是精心制作的Ant Design 4.40版本Web组件库，以及基于Ant Design Pro的后台管理模板。...
AntDesign组件库目录.docx
11-02
### AntDesign（Vue）组件库知识点详解 #### 一、通用组件 **1.1 Button 按钮** - **按钮类型**: 提供了多种类型的按钮，如主要按钮、次要按钮、虚线按钮等，满足不同场景下的需求。 - **图标按钮**: 可以将图标...
基于antdesign的vuejsloading组件
08-12
标题"基于antdesign的vuejs loading组件"指的是将Ant Design Vue的loading组件应用到Vue.js项目中。这涉及到的知识点主要包括以下几个方面： 1. **Vue.js基础知识**：理解Vue.js的核心概念，如Vue实例、组件、指令...
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
10-15
在本例中，我们将探讨如何在Vue中实现Table组件行内右键菜单的功能，该项目是基于vue + AntDesign组件库实现的。 ### 知识点一：Vue + AntDesign Vue是目前流行的前端JavaScript框架之一，以数据驱动和组件化的...
AntDesign的Axure模板
02-28
在文件名称列表中提到的“Ant”很可能是AntDesign的Axure部件库文件，这通常是.RP或.RAR格式的压缩文件，包含了一系列预定义的Axure部件。解压后导入到Axure中，你就可以立即使用这些精心设计的组件，它们会遵循Ant...
React中使用Antd组件，技术详细介绍
m0_60732644的博客
03-17 1217
资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。)][外链图片转存中…(img-5DOhRc0Z-1710690561854)]资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
【Ant Design5.0 元件库】基于最新版 UI组件库进行绘制axure 元件库
qq_33208396的博客
05-03 1722
基于Ant Design5.0 最新版 UI 设计库设计的 axure 元件库
Ant Design v4 Pro版中后台原型模板及Axure rplib元件库组件
天天打码-16年老码农
06-27 3735
如果你们是团队创作，并且共同使用本套模板，可以显着增加研发团队的确定性，保持系统一致性，让设计师专注于创意最需要的地方。素材中提供了单独的rplib格式源文件，你可以将其导入axure中，只需要简单地拖拽，就可以迅速搭建出antdesign风格的中后台，助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～Ant Design服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。
AntDesign技术指南：构建优雅的前端界面
DevCorner的Pro技术博客
09-06 946
AntDesign支持自定义主题，可以根据项目需求修改组件的颜色、字体等样式。在项目中创建一个theme.less文件。修改theme.less。在入口文件中引入theme.less。AntDesign是一款功能强大、易用的前端UI组件库，本篇博客介绍了它的基本使用方法和一些进阶技巧。通过学习AntDesign，我们可以构建出优雅、美观的前端界面。希望本篇博客对你有所帮助，欢迎在评论区留言讨论。
antd组件
hhnail7799的博客
10-09 602
一、可选择和操作表格 类式 -> 函数式组件 import {Component, useState} from "react"; import {Table, Button} from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, {
React中使用Antd组件，直接上干货
m0_57473261的博客
03-30 1688
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
Ant Design Pro(5)-1.入门
AG.『Feng』的博客
10-10 733
ant design pro5
antdesignpro 表单组件里装图片的组件
05-26
Ant Design Pro 表单组件中有一个上传组件可以用来上传图片，它是基于 Ant Design 的 Upload 组件进行封装的，具体使用方法如下： 1. 首先需要在页面中引入 Upload 组件： ```javascript import { Upload } from 'antd'; ``` 2. 在表单中使用 Upload 组件，例如： ```javascript <Form.Item label="图片上传"> <Upload name="avatar" listType="picture-card" className="avatar-uploader" showUploadList={false} action="/upload.do" beforeUpload={beforeUpload} onChange={this.handleChange} > {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton} </Upload> </Form.Item> ``` 其中，`name` 表示上传的文件参数名称，`listType` 表示展示的样式（这里用的是图片卡片），`className` 表示自定义样式类名，`showUploadList` 表示是否展示已上传文件列表，`action` 表示上传的接口地址，`beforeUpload` 表示上传前的验证方法，`onChange` 表示上传状态变化的回调函数。 3. 在上传前进行验证，例如： ```javascript beforeUpload(file) { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { message.error('只能上传JPG/PNG格式的图片!'); return false; } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { message.error('上传的图片必须小于2MB!'); return false; } return true; } ``` 在这个示例中，我们对上传的图片进行了格式和大小的验证，如果不符合要求就会提示错误信息。 4. 在上传状态变化时更新图片展示，例如： ```javascript handleChange = info => { if (info.file.status === 'uploading') { this.setState({ loading: true }); return; } if (info.file.status === 'done') { getBase64(info.file.originFileObj, imageUrl => { this.setState({ imageUrl, loading: false, }); }); } }; ``` 在这个示例中，我们根据上传的状态判断是否正在上传，如果是就显示加载中的状态，如果上传完成就将图片转换为 Base64 格式并展示出来。 上述是一个简单的上传图片组件的示例，你可以根据自己的需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值