读读antd源码之通用组件

① ui组件库

如果说ui开发框架是高速的生产线,那么ui组件库就是一成套模具,大大提高了生产效率。

ui组件库无论对设计风格、基础功能、操作交互等都做了高度的统一,为项目开发提供了开箱即用的便捷。在React领域,中后台项目用的较多的ui组件库,非 Ant Design(antd)莫属了。

这里准备对 antd 组件库进行一系列的源码分享,看看我们习以为常的功能背后是做了怎样的逻辑处理。

阅读的过程,会遵循前面分享的《阅读前端源码的思路》,文章忽略具体细节,直接分享重点。

② 组件的逼格

一个没有设计理念的ui组件库,都不好意思说是ui组件库

看下官方文档,可以看到第一个栏目是“设计”,可想而之ui组件库的灵魂就是设计,它包含自身的价值观和模式,也遵循一系列的规范。

再展开一下“组件”栏目,可以看到左侧菜单是对组件进行了分类的,包括有:

  1. 通用组件
  2. 布局组件
  3. 导航组件
  4. 数据录入组件
  5. 数据展示组件
  6. 反馈组件
  7. 其他组件

这篇文章,先分享阅读的第1个,通用组件的源码。

 一个一个来

关注你想关注的

通用组件包含三个:Button,Icon,Typography。

这里先看下文档关于这几个组件,看下有什么值得思考的功能。

可以看到,一些类型,状态等展示的基本根据props来切换,没必要深究。

关于Button,这里感觉有些看点的是点击动作的反馈,外围波浪散开的动效。

关于Icon,可以关注下它内部是如何封装图标的引用。

关于Typography,可以关注下它内容一些文本处理或功能的封装。

④ 说干就干

说实话,antd的组件源码比较乱

拉源码打开components文件夹,可以找到button组件,只有三百行代码,可以完整看一下,先看看前面的引用

omit方法就是剔除对象中某个键值对;

Group就是为了挂载在Button的button-group,可以看完button再看&#x

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Antd的Tabs组件中,当标签页数量过多时,会自动出现滚动条,使用户可以通过滚动来查看所有标签页。下面我们就来分析一下Antd是如何实现这个滚动效果的。 ## 实现原理 Antd中Tabs的滚动效果是通过设置`overflow-x: auto`来实现的,当标签页数量超过一定数量时,Tabs容器的宽度会缩小,出现水平滚动条。 具体实现代码如下: ```css .ant-tabs-bar { position: relative; margin: 0; padding: 0; white-space: nowrap; overflow-x: auto; overflow-y: hidden; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-overflow-scrolling: touch; .ant-tabs-nav-container { height: 100%; display: inline-flex; align-items: stretch; } } ``` 从上面的代码中可以看出,Antd将Tabs容器的`overflow-x`属性设置为auto,这样当标签页数量过多时,会自动出现水平滚动条;同时还设置了一些其他属性,比如`white-space: nowrap`来防止标签页换行,`-webkit-overflow-scrolling: touch`来优化iOS设备的滚动体验等。 ## 注意事项 使用Antd的Tabs组件时,需要注意以下几点: 1. 需要设置Tabs容器的宽度,否则滚动条不会出现; 2. 如果标签页数量较少,Tabs容器的宽度会很大,导致页面布局不美观,需要进行调整; 3. 当标签页数量很多时,滚动体验可能会受到影响,需要根据实际情况进行优化。 ## 总结 Antd的Tabs组件通过设置`overflow-x: auto`来实现标签页滚动效果,同时还设置了一些其他属性来优化用户体验。在使用该组件时,需要注意设置Tabs容器的宽度,并根据实际情况进行优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值