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

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

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

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

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

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

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

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

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

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

相关推荐
ly768910 小时前
CSS 从入门到进阶:系统掌握现代网页样式与布局
前端·css
SWAGGY..10 小时前
【C++初阶】:(15)模板进阶--从非类型参数到模板特化与分离编译
java·服务器·前端
YHHLAI10 小时前
从「跑分」到「干活」:Benchmark 与 GPT 5.6 的两种叙事
大数据·前端·人工智能·react.js·前端框架
BigTopOne10 小时前
ArLiveLite 用到的 C++/JNI 技术点
前端
BigTopOne10 小时前
ArLiveLite 技术架构-Lite
前端
BigTopOne10 小时前
ArLiveLite-具体功能
前端
BigTopOne10 小时前
ArLiveLite -具体功能
前端
Sherotree10 小时前
理解 JWT:三段分别是什么
前端·ai·开源
BigTopOne10 小时前
ArLiveLite 用到的 FFmpeg API
前端
小弥儿10 小时前
GPT Image 2 提示词库,把散落的生图提示词变成工程资产
开发语言·javascript·gpt·学习