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

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

本文摘录自：AntDesign官网

1. 通用组件

1.1 Button
    disabled - boolean
    ghost - boolean
    href - string
    htmlType - string
    icon -string
    loading - boolean
    shape - circle\round
    size - small large
    target - string
    type - primary dahsed danger link
    onClick - event
    block - 父宽度 boolean
     ConfigProvider 的 autoInsertSpaceInButton 为 false
1.2 Icon
    type - string
    style - CSSProps
    theme - filled | outlined | twoTone
    spin - boolean
    rotate - number
    component - componentType
    twoToneColor - string
1.3 Typography
    1.3.1 Text
        copyable - boolean
        delete - boolean
        disabled - boolean
        editable - boolean
        ellipsis - 自动溢出省略
        mark - boolean
        underline - boolean
        strong - boolean
        type - secondary, warning, danger
    1.3.2 title
        copyable - boolean
        delete - boolean
        disabled - boolean
        editable - boolean
        ellipsis - boolean
        level - 1-4
        mark - boolean
        udnerline - boolean
        onChange - function
        type - secondary, warning, danger
    1.3.3 paragraph
        copyable - boolean
        delete - boolean
        disabled - boolean
        editable - boolean
        ellipsis - boolean
        mark - boolean
        underline - boolean
        onChnage - function
        strong - boolean
        type - secondary, warning, danger

2. 布局类组件

2.1 栅格
    2.1.1 Row
        align - string top middle bottom
        gutter - 间隔 {xs:8, sm:16, md:24}
        justify - start/end/center/space-around/space-between
        type - string/flex
    2.1.2 Column
        offset - 左侧间隔格数
        order - 栅格顺序
        pull - 向左移动格数
        push - 向右移动格数
        span - 栅格占位格数 0-display:none
        xs <576
        sm >= 576
        md >= 768
        lg >= 992
        xl >= 1200
        xxl >= 1600
2.2 Layout 布局
    
        
header
        
            left sidebar
            main content
            right sidebar
        
        
footer
    
    2.2.1 布局容器
        className - string
        hasSlider - 不用于指定，服务端渲染时避免样式闪动
        style - 指定样式 {} object
    2.2.2 layout Sider 侧边栏
        breakpoint 触发响应时的断点 Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }
        className - string
        collapsed - boolean
        collapsedWidth - number
        collapsible - boolean
        defualtCollapsed
        reverseArrow
        style - object
        theme - light/dark
        trigger - null/ReactNode
        width - number/string
        onCollapse - 展开 (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 - 为组件内建文案提供统一的国际化支持