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

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

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

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

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

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

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

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

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

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

相关推荐
神奇的程序员16 小时前
开发了一个管理本地开发环境的软件
前端·flutter
天若有情67316 小时前
程序员原创|借鉴JS事件冒泡,根治电脑文件混乱的“冒泡整理法”
开发语言·javascript·windows·ecmascript·电脑·办公·日常
XiYang-DING17 小时前
HTML 核心标签
前端·html
Csvn17 小时前
技术选型方法论
前端
Csvn17 小时前
前端架构演进:从页面到平台的十年变革
前端
李伟_Li慢慢18 小时前
ShaderToy-山峦+蓝天+白云
前端·webgl
小码哥_常18 小时前
Android字体字重设置全攻略:XML黑科技+Kotlin动态实现,告别.ttf臃肿
前端
FYKJ_201018 小时前
springboot校园兼职平台--附源码02041
java·javascript·spring boot·python·eclipse·django·php
言萧凡_CookieBoty19 小时前
AI 编程省 Token 实战:从 Spec、上下文工程到模型分层的降本策略
前端·ai编程
DFT计算杂谈20 小时前
wannier90 参数详解大全
java·前端·css·html·css3