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

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

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

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

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

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

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

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

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

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

相关推荐
MediaTea1 分钟前
Python:实例 __dict__ 详解
java·linux·前端·数据库·python
狗头大军之江苏分军9 分钟前
又是一个周末加班夜,前端的我只想哭…
前端
个案命题19 分钟前
鸿蒙ArkUI组件通信专家:@Param装饰器的奇幻漂流
java·服务器·前端
Data_agent19 分钟前
CNFANS模式淘宝1688代购系统搭建指南
大数据·开发语言·前端·javascript
美酒没故事°25 分钟前
vue3+element 滚动触底加载选择器
javascript·vue.js·ecmascript
澄江静如练_34 分钟前
表单输入绑定
服务器·前端·javascript
猩球中的木子36 分钟前
vue-plugin-hiprint打印高度不够,提示:没有足够空间,显示下方内容,问题处理方案及实操
前端·vue.js
狗头大军之江苏分军1 小时前
Node.js 原生功能越来越强,我们是不是被 npm 玩坏了?
前端·javascript·架构
独自破碎E1 小时前
TS7016: Could not find a declaration file for module ‘vue-router‘.解决办法
前端·javascript·vue.js
仰望星空@脚踏实地1 小时前
DataKit js-yaml和follow-redirects组件依赖影响分析
前端·datakit