SEMI DESIGN 源码学习(六)轮播图

轮播图代码位于 packages/semi-ui/carousel/index.tsx,代码量不多。

核心同样是这个 foundation 属性,类型为 CarouselFoundation

CarouselFoundation 封装了轮播图的操作方法,通过传入的 adapter,管理轮播图组件的 state

adapter 目的是操作组件的 state 属性。

组件暴露的方法实际上调用的是 foundation 的方法。

renderChildren 方法渲染传给轮播图组件的子元素。

renderIndicator, renderArrow 分别渲染指示器和切换箭头。

最后 render 方法返回一个 div 容器,包裹整个组件。

本文完,下期详细解释这个 foundation 模式。

相关推荐
陈随易10 小时前
农村程序员聊五险一金
前端·后端·程序员
恋猫de小郭10 小时前
Swift 6.3 正式发布支持 Android ,它能在跨平台发挥什么优势?
android·前端·flutter
xujing_0610 小时前
跑马灯组件vue3+es6
前端·javascript·es6
小小善后师10 小时前
告别周报烦恼:我用 200 行代码打造了一个 AI 工时助手
前端
我只是来分享的10 小时前
Js也能写外挂?8 行代码改掉《植物大战僵尸》的阳光值!对于js来说超越调用大漠超越调用memory.js
javascript
Mahut10 小时前
我们是怎么用 TanStack 全家桶的
前端·javascript·架构
FreeBuf_10 小时前
Claude浏览器扩展漏洞允许通过任意网站实现零点击XSS提示注入
前端·网络·xss
AlunYegeer10 小时前
【JAVA】网关的管理原理和微服务的Interceptor区分
java·服务器·前端
sensen_kiss11 小时前
CAN302 电子商务技术 Pt.2 深入了解HTML和CSS
前端·css·学习·html
说实话起个名字真难啊11 小时前
前端JS审计:渗透测试的“破局之钥”
开发语言·前端·javascript·测试工具