蚂蚁金服 Ant-design 常用组件和属性整理

本文摘录自：AntDesign官网

1. 通用组件

1.1 Buttondisabled - booleanghost - booleanhref - stringhtmlType - stringicon -stringloading - booleanshape - circle\roundsize - small largetarget - stringtype - primary dahsed danger linkonClick - eventblock - 父宽度 booleanConfigProvider 的 autoInsertSpaceInButton 为 false
1.2 Icontype - stringstyle - CSSPropstheme - filled | outlined | twoTonespin - booleanrotate - numbercomponent - componentTypetwoToneColor - string
1.3 Typography1.3.1 Textcopyable - booleandelete - booleandisabled - booleaneditable - booleanellipsis - 自动溢出省略mark - booleanunderline - booleanstrong - booleantype - secondary, warning, danger1.3.2 titlecopyable - booleandelete - booleandisabled - booleaneditable - booleanellipsis - booleanlevel - 1-4mark - booleanudnerline - booleanonChange - functiontype - secondary, warning, danger1.3.3 paragraphcopyable - booleandelete - booleandisabled - booleaneditable - booleanellipsis - booleanmark - booleanunderline - booleanonChnage - functionstrong - booleantype - secondary, warning, danger

2. 布局类组件

2.1 栅格2.1.1 Rowalign - string top middle bottomgutter - 间隔 {xs:8, sm:16, md:24}justify - start/end/center/space-around/space-betweentype - string/flex2.1.2 Columnoffset - 左侧间隔格数order - 栅格顺序pull - 向左移动格数push - 向右移动格数span - 栅格占位格数 0-display:nonexs <576sm >= 576md >= 768lg >= 992xl >= 1200xxl >= 1600
2.2 Layout 布局<Layout><Header>header</Header><Layout><Sider>left sidebar</Sider><Content>main content</Content><Sider>right sidebar</Sider></Layout><Footer>footer</Footer></Layout>2.2.1 布局容器className - stringhasSlider - 不用于指定，服务端渲染时避免样式闪动style - 指定样式 {} object2.2.2 layout Sider 侧边栏breakpoint 触发响应时的断点 Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }className - stringcollapsed - booleancollapsedWidth - numbercollapsible - booleandefualtCollapsedreverseArrowstyle - objecttheme - light/darktrigger - null/ReactNodewidth - number/stringonCollapse - 展开 (collapsed, type) => {}onBreakpoint - (broken) => {}

3. 导航类组件

3.1 Affix - 页面元素定在可视范围
3.2 Breadcrumb - 显示当前页面在系统层级结构中的位置，并能向上返回。
3.3 Dropdown - 向下弹出的列表。
3.4 Menu - 为页面和功能提供导航的菜单列表。
3.5 Pagination - 采用分页的形式分隔长列表，每次只加载一个页面。
3.6 PageHeader - 页头可用于声明页面主题、展示用户所关注的页面重要信息
，以及承载与当前页相关的操作项（包含页面级操作，页面间导航等）
3.7 Steps - 引导用户按照流程完成任务的导航条。

4. 数据录入

4.1 AutoComplete - 输入框自动完成功能
4.2 Checkbox - 多选框
4.3 Cascader - 级联选择框
4.4 DatePicker - 输入或选择日期的控件
4.5 Form - 具有数据收集、
校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素
4.6 InputNumber - 通过鼠标或键盘，输入范围内的数值
4.7 Input - 通过鼠标或键盘输入内容，是最基础的表单域的包装
4.8 Mentions - 提及组件(废弃)
4.9 Rate - 评分组件
4.10 Radio - 单选框
4.11 Switch - 开关选择器
4.12 Slider - 滑动型输入器，展示当前值和可选范围
4.13 Select - 下拉选择器
4.14 TreeSelect - 树型选择控件
4.15 Transfer - 双栏穿梭选择框
4.16 TimePicker - 当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择
4.17 Upload - 文件选择上传和拖拽上传控件

5. 数据展示

5.1 Avatar - 用来代表用户或事物，支持图片、图标或字符展示
5.2 Badge - 图标右上角的圆形徽标数字
5.3 Comment - 对网站内容的反馈、评价和讨论
5.4 Carousel - 旋转木马，一组轮播的区域
5.5 Card - 通用卡片容器
5.6 Calendar - 按照日历形式展示数据的容器
5.7 Descriptions - 成组展示多个只读字段
5.8 Empty - 空状态时的展示占位图
5.9 List - 通用列表
5.10 Popover - 点击/鼠标移入元素，弹出气泡式的卡片浮层
5.11 Statistic - 展示统计数值
5.12 Tree
5.15 Tolltip - 简单的文字提示气泡框
5.16 Timeline - 垂直展示的时间流信息
5.17 Tag - 进行标记和分类的小标签
5.18 Tabs - 选项卡切换组件
5.19 Table - 展示行列数据
5.20 Collapse - 可以折叠/展开的内容区域

6. 反馈

6.1 Alert - 警告提示，展现需要关注的信息
6.2 Drawer - 屏幕边缘滑出的浮层面板
6.3 Modal - 模态对话框
6.4 Message - 全局展示操作反馈信息
6.5 Notification - 全局展示通知提醒信息
6.6 Progress - 展示操作的当前进度
6.7 Popconfirm - 点击元素，弹出气泡式的确认框
6.8 Result - 用于反馈一系列操作任务的处理结果
6.9 Spin - 用于页面和区块的加载中状态
6.10 Skeleton - 在需要等待加载内容的位置提供一个占位图形组合

7. 其它

7.1 Anchor - 用于跳转到页面指定位置
7.2 BackTop - 返回页面顶部的操作按钮
7.3 ConfigProvider - 为组件提供统一的全局化配置
7.4 Divider - 区隔内容的分割线
7.5 LocaleProvider - 为组件内建文案提供统一的国际化支持

蚂蚁金服 Ant-design 常用组件和属性整理相关推荐

Artiely Vue Admin - 基于蚂蚁金服Ant Design构建的高颜值开源管理后台UI框架
继承 Ant Design 专业美观的优点,支持PC/手机/平板的响应式布局的优秀后台管理系统 UI 框架. 关于 Artiely Vue Admin Ant Design 是阿里巴巴蚂蚁金服团队出品 ...
蚂蚁金服 ant design 中下载axure 菜单组件库
下载地址为:https://library.ant.design/
蚂蚁金服分布式链路跟踪组件 SOFATracer 数据上报机制和源码分析 | 剖析
2019新春支付宝红包技术大揭秘在线峰会将于03-07日开始,点击这里报名届时即可参与大牛互动. SOFA Scalable Open Financial Architecture 是蚂蚁金服自主研发 ...
蚂蚁金服前端第一次电面(校招)笔记整理
这是我对自己蚂蚁金服前端一面的记录文章,整理出来的技术方面的知识点.如果有什么不对的地方,欢迎大家指出. 原文章地址 1. 快速排序它的基本思想是通过一趟排序将要排序的数据分割成独立的两部分,其中 ...
AntDesign蚂蚁金服web3.9原型组件｜Axure原型组件
Ant Design是一套提炼和应用于企业级后台产品的交互语言和视觉体系.Ant Design源自蚂蚁金服体验技术部的后台产品开发,经过大量的项目实践和总结,希望能抽象出一套企业级的交互视觉规范,统一 ...
蚂蚁金服分布式链路跟踪组件 SOFATracer 总览 | 剖析 1
2019新春支付宝红包技术大揭秘在线峰会将于03-07日开始,点击这里报名届时即可参与大牛互动. SOFA Scalable Open Financial Architecture 是蚂蚁金服自主研发 ...
2022最新蚂蚁金服Java岗面试题库（整理版）
前言由于作者面试过程中高度紧张,本文中只列出了自己还记得的部分题目.笔者面的是阿里的Java研发工程师岗,面试流程是4轮技术面+1轮hr. 蚂蚁金服关于spring部分面试问题: 1.Spring ...
蚂蚁金服组件 ReferenceError: primordials is not defined
ReferenceError: primordials is not defined 错误经过使用蚂蚁金服的某个第三方组件时,本地需要测试编译,执行 npm start 出现这个错误 Referen ...
阿里专家讲中台：技术中台-分布式架构在蚂蚁金服的实践
来源| 阿里云峰会文| 技术领导力社区本文整理自,阿里高级技术专家-许文奇在2019阿里云峰会上的分享<技术中台-分布式架构在蚂蚁金服的实践>,结合技术领导力社区架构专家的点评和解读, ...

蚂蚁金服 Ant-design 常用组件和属性整理

蚂蚁金服 Ant-design 常用组件和属性整理

本文摘录自：AntDesign官网

1. 通用组件

2. 布局类组件

3. 导航类组件

4. 数据录入

5. 数据展示

6. 反馈

7. 其它

蚂蚁金服 Ant-design 常用组件和属性整理相关推荐

最新文章

热门文章