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

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

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

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

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

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

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

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

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

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

相关推荐
SuperEugene16 分钟前
数组查找与判断:find / some / every / includes 的正确用法
前端·javascript
孙笑川_17 分钟前
Vue3 源码解析系列 1:从 Debugger 视角读 Vue
前端·vue.js·源码阅读
~央千澈~19 分钟前
抖音弹幕游戏开发之第11集:礼物触发功能·优雅草云桧·卓伊凡
java·前端·python
top_designer27 分钟前
Magnific:老旧 UI 糊成马?720p 截图重铸 4K 界面
前端·游戏·ui·prompt·aigc·设计师·游戏策划
Cache技术分享31 分钟前
326. Java Stream API - 实现自定义的 toList() 与 toSet() 收集器
前端·后端
PythonFun40 分钟前
WPS动态序号填充,告别手动调整烦恼
java·前端·python
Cache技术分享42 分钟前
325. Java Stream API - 理解 Collector 的三大特性:助力流处理优化
前端·后端
Wcowin1 小时前
【2】 Zensical配置详解
前端·github
REDcker1 小时前
Web 音视频流媒体 API 全景
前端·音视频
phltxy1 小时前
Vue进阶实战:自定义指令与插槽的核心用法及实战案例
前端·javascript·vue.js