Ant Design组件初识

魔镜魔镜_谁是世界上最漂亮的小仙女
413 阅读13分钟

基础组件

按钮的实现，通常按钮会因为行为的不一致。

Button常用的属性

  1. icon 在button中嵌入icon是一个常见的形式，图标通常会出现在前中后三个位置。 icon可以通过icon的props或者作为button的children进行设计。
  2. loading，按钮的loading状态也比较常见。通常是点击按钮触发某一个事件，待事件处理完毕再返回。

悬浮按钮

悬浮按钮通常是在页面上特定位置上始终存在的按钮

ICON

icon通常使用矢量图形来表示。图标尽量不要通过IMg再去引入，理想的状态是可以为图标设置各种属性。

Typography

文本的基本格式 用于展示一连串的段落或者 包括标题，可交互内容，超长文本省略等内容

Divider

分割线，通常用于段落分割，或者表格行分割

应当具备的属性：

  • 样式
  • 分割线上支持嵌入文字，默认应该在正中间，一般children站位处是文字展示的地方
  • 分割线可以竖向，type="vertical"

布局组件

布局Flex

Flex布局，通常用在页面横向以及竖向布局中，应当具备的属性包括：

  • 方向：vertical

  • 主轴和纵轴

    • 主轴支持的属性包括的属性

      • flex-start
      • center
      • flex-end
      • space-between
      • space-around
      • space-evenly

    • 纵轴

      • flex-start
      • flex-end
      • center

  • 可以跳转子元素之间的间距，gap

  • 可以支持换行操作，可以支持换行操作

在设计这些属性支持的时候，可以将style中支持的属性作为props暴露出。 总之，设计这些组件时，需要考虑将变化频率较高的元素抽象为组件的props。

Grid栅格

布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来

row和col必须同时出现，其中col是row的子元素。一行共被划分为24列，row下的col会平分24个格子.如果总和超过格子总数，则多页的col会另起一行进行展示。

应当支持的属性包括：

  • span,每个col占据的格子数
  • gutter:[12,14],各个col水平和垂直方向的间距。
  • offset，向右侧偏移一定的span
  • push,pull来完成栅格排序，push是向后退，pull是向前拉
  • 子元素的排版，可以通过flex类似的排列来实现
  • flex属性可以支持填充，即按照比例将一行等分处理

Layout布局

一般讲布局，其实主要是将页面的内容视觉划分出来的多个区域。

Space

用于行内元素，多个子元素之间等距对齐。会在行内元素的外层添加一层包裹 可以在子标签上添加横向或者垂直的间隔

导航组件

Breadcrumb

用户需要知道当前在哪里，目前支持的写法为：

import React from 'react';
import { Breadcrumb } from 'antd';
const App: React.FC = () => ( 
<Breadcrumb items={[ { title: 'Home', }, { title: <a href="">Application Center</a>, }, { title: <a href="">Application List</a>, }, { title: 'An Application', }, ]} /> ); export default App;
  • 其中items用来表示所有的面包屑层级，其中title可以是JSX
  • separator，可以定义使用什么分隔符来分割元素
  • items内部可以指定type=separator,来独立地定义分隔符
  • routes可以使用

DropDown

当页面上的操作很多时，可以通过下拉菜单的方式可以收纳更多操作元素。注意📢：与selector区分，selector主要用于多种选择，而dropdown则是一组命令集合

  • 通过menu指定所有的下拉命令集合，是menu={{item}},其中item是数组对象,对象中支持的属性是key和label，其中label可以是JSX对象
  • 弹出位置，通过placement，位置属性来指定
  • arrow用来处理是否展示抽屉上对应的箭头，并且可以通过pointAtCenter来指定箭头指向目标元素正中间
  • 下拉菜单中，通过在menu中设置disable来说明是否可以编辑
  • 触发方式，通常支持悬浮触发和点击触发，trigger
  • 点击操作项后，可以触发对应的操作<Dropdown menu={{ items, onClick }}>
  • 通过icon设置图标元素
  • dropdownRender用来自定义渲染内容，相当于留一个插槽来自定义输出
  • 多级菜单，则可以通过在item中添加children来实现
  • 可以设置鼠标右键点击来实现，trigger={['contextMenu']}
  • 下拉菜单中的元素也可以被选中，在menu中添加selectable: true

Menu

基本用法不再赘述，同DropDown

  • mode指定是横向还是竖向

Pagination

分页组件，一般用在PC端的列表页面。

Step

引导用户按照流程完成任务的导航条。

思考如何设计：

  • 当前的步骤
  • 各步骤对应的主标题和副标题，JSX元素
  • 步骤条切换，onChange去实现
  • 步骤条能支持复杂版和简单版两种
  • 在使用过程中，尽量预留出图标位置

AutoComplete

该组件通常用于输入提示，和输入框配合使用。是一个带提示的文本输入框。

思考如何设计

  • 组件内部，通过判断autoComple，基于用户输入的value，创造出一些选项。通常是满足一定的模式 能够支持内嵌的子组件，将子组件转化为自动完成的模式 在考虑组件设计时，需要明白哪些应该是基础类型，哪些应该是复合类型

Cascader

级联选择组件，通常用来展示需要分级展开的数据，比如常见的一级城市下，再展开二级城市；或者某个组件下的一级部门，再是二级部门，最后是具体的人员。 能够在同一个浮层中，展示更多数据。

常用的属性

  1. allowClear，是否支持清除，支持boolean类型和对象类型，可自定义清除icon
  2. autoClearSearchValue
  3. autoFocus，是否开启自动获取焦点
  4. bordered，是否开启边框
  5. className，自定义类名
  6. defaultValue默认的选中项
  7. displayRender，展示渲染的函数，即选择完毕后，最终在input框中展示的内容
  8. notFoundContent，当无内容时，支持的选项，通常依赖于接口返回数据
  9. changeOnSelect，表示选择即选中，支持选择到一级选项
  10. size，设置组件的大小
  11. loadData,动态加载选项
  12. fieldNames，可以自定义文件名，然后通过键的映射关系，来完成处理。
  13. dropdownRender，对整个的下拉面板进行自定义渲染

暴露出来的api应当符合编码人员的是否习惯

如何设计？

  1. 如果涉及到层级关系，需要children来作为下层的入口
  2. 组件内部如何处理这种链接关系

Checkbox

多选框，经常用于接收用户输入的多个选项。 受控的通常是value等内容由hooks进行维护，如uesState来存储表单的数据。

日期选择框

日期选择框，通常提供的内容为可以选择具体日期、选择周、选择月份、选择季度以及选择年份。

  1. picker，指定以哪种方式选择数据
  2. format，可以定义日期选中后如何回显
  3. disable，可以支持单个日期或者日期范围的禁用
  4. disabledDate，禁用某些时间节点不可选
  5. disabledTime，禁用某些时间，需要和showTime配合使用
  6. renderExtraFooter用于处理自定义页面，可以是JSX
  7. size改变组件的大小
  8. status可以处理组件的状态，用于校验时的异常提示处理
  9. bordered，来表示是否开启边框
  10. placement，表示弹出的位置

Form表单

表单组件,需要包含布局、初始化、验证提交等功能。

  • Form.useForm,用来获取表单数据域。并对表单数据进行处理，比如赋值或者获取值等
  • 表单布局，layout
  • disabled，设置整个表单不可点击状态
  • requiredMark，样式选择
  • size设置组件大小
  • labelWrap，当表单标签太长时，可以进行替换
  • rule校验规则，设置warningOnly，仅做警告处理，不做提交校验拦截
  • useWatch，可以监听表单项的变化，从而可以实现数据联动展示
  • validateFields的validateOnly，可以动态调整提交按钮的 disabled 状态。
  • 动态增减表单项，会利用Form.List来实现，其中Form.Item中包裹一整行的表单内容
  • 动态增减嵌套字段，嵌套表单字段需要对 field 进行拓展，将 field.name 应用于控制字段。如果一个表单项下有多个子表单，那么使用name={[name, 'first']}来控制子表单项，最终取得的数据会嵌套first
  • [复杂的动态增减表单项],多个表单项的处理。多个表单采用form.list进行包裹，其中的子项是
  • 嵌套结构与检验信息
  • 自定义表单控件，如果我们要构造出一个复杂的表单项目，那么可在组件内部通过state来驱动受控组件。然后在外层只需要使用Form.Item指定name，就可以和内容的value绑定上。
  • 表单数据存储于上层组件，即通过监听表单的变化，同步更新到state
  • 内联登录栏，常用在顶部导航栏中。
  • 高级检索表单项，通常采用grid布局，每行都有固定的元素。
  • 弹窗form，弹窗form表单通常是将form嵌入到Modal的子元素。
  • 时间类的组件，其数据类型为dayjs，在提交服务器时需要进行数据预处理。
  • 表单联动，dependencies，当依赖的表单项值发生变化时，这个表单项会进行重新校验

学完form，还有几个疑问点是：

  1. 在Form.Item时通过指定name，就可以与子组件的value关联上。这个是为什么呢？ Ant Design 的 Form.Item 组件通过指定 name 属性，可以与表单控件（如 input、select 等）的 value 属性关联起来，这是因为 Ant Design 的表单是基于 React 的受控组件模式构建的。

  2. 表单控件中的value属性是从哪里获取的？

    1. 初始状态 - 当受控组件 Input 没有接收到 value 属性或者 value 为 undefined 时，组件将显示为空或者使用默认值。
    2. onChange事件 - 用户在输入字段中进行输入时，会触发 onChange 事件。
    3. 事件处理函数 - 在 onChange 事件的处理函数中，你可以获取到事件对象 e，它包含了用户输入的最新值 e.target.value。
    4. 状态更新 - 通过调用 setState 或其他状态更新方法，你可以更新组件的内部状态或通知父组件更新其状态。
    5. 传递新值 - 更新状态后，新的值会作为 value 属性传递给 Input 组件，从而更新显示内容。

  3. 多表单嵌套时，是可以通过Form.List来实现的，这样表单的数据，就是一个List，然后子表单中的项目又是一个object.

Input输入框

  • variant，指定input的变体，其实就是表单样式
  • prefix，suffix可以指定input框的前置和后置的内容
  • allowClear，添加允许删除的清除框。
  • count，input框可以支持计数功能。count可以支持最大数的限制
  • 输入时格式化展示，ToolTip来包裹Input进行处理

InputNumber

inputnumber只可以输入数字

  • keyboard，支持键盘交互，通过箭头的上下键来改变数字

Radio单选框

  • 用于在多个备选项中选中单个状态。
  • 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

Rate

评分组件

  • 对评价进行展示。

  • 对事物进行快速的评级操作。

  • allowHalf，支持选中半颗星

Selector选择器

何时使用

  • 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
  • 当选项少时（少于 5 项），建议直接将选项平铺，使用 Radio 是更好的选择。
  • 如果你在寻找一个可输可选的输入框，那你可能需要 AutoComplete。

Switch开关

何时使用

  • 需要表示开关状态/两种状态之间的切换时；
  • 和 checkbox 的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。

TimePicker时间选择框

使用场景：当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。

  • defaultOpenValue,选择框展开的默认选择的时间
  • size,指定控件的大小
  • format,浮层的列会随着format变化，12 小时制的时间选择器，默认的 format 为 h:mm:ss a。
  • hourStep minuteStep secondStep 按步长展示可选的时分秒。即对应的时分秒会按照步长递增
  • use12Hours，用来开启12小时制
  • renderExtraFooter，在底部展示自定义内容
  • TimePicker.RangePicker，来选择时间范围选择
  • status，用来指定组件的状态

Transfer穿梭框

使用场景：

  • 需要在多个可选项中进行多选时。比如商品选择器以及门店选择器的设计等
  • 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。

数据：穿梭框的左右两边分别维护的是两份数据

  • dataSource、targetKeys、每行的渲染函数 render 以及回调函数 onChange onSelectChange onScroll 的用法。
  • oneWay，将穿梭框改造成单向样式，即只有一个样式 image.png
  • showSearch，展示搜索框
  • footer，可以通过renderFooter来指定自定义的渲染底部区域
  • render={renderItem}，用来渲染穿梭框中的每一个Item项目
  • pagination，数据量大的情况下可以使用分页来完成
  • leftColumns、rightColumns使用表格来渲染content内容区域
  • 也可以使用tree组件作为自定义内容区域，总体来说就是直接使用children进行组件渲染的

TreeSelect树选择

使用场景：类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。

属性组件的数据结构是需要体现层级关系的，通常使用children来完成

Upload上传

upload上传通常是将本地电脑存储的文件暂存起来，然后发送给服务端。可以上传一个或者一些文件。也可以通过拖拽的方式将文件放到选择区域。

  • accept，可以上传的文件类型，在打开本地文件选择弹窗的时候就会起作用
  • action，上传的路径
  • beforeUpload，在上传前执行的钩子函数
  • customRequest

组件设计中，应该把一些通用的样式通过props向外暴露，而不单单是提供style或者className进行处理。

props真正的作用是对组件内部的某些状态或者开关进行控制。

强大的组件设计是尽可能考虑到组件的应用场景，通过props去支持一系列的特性

avatar
文章
阅读
粉丝