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

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

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

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

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

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

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

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

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

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

相关推荐
刘发财1 分钟前
前端一行代码生成数千页PDF,dompdf.js新增分页功能
前端·typescript·开源
_请输入用户名5 分钟前
Vue 3 源码项目结构详解
前端·vue.js
少卿16 分钟前
Next.js 国际化实现方案详解
前端·next.js
掘金挖土18 分钟前
手摸手快速搭建 Vue3 + ElementPlus 后台管理系统模板,使用 JavaScript
前端·javascript
CoderHing19 分钟前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
前端·javascript·react.js
一念之间lq21 分钟前
Elpis 第三阶段· 领域模型架构建设
前端·后端
哆啦A梦158828 分钟前
商城后台管理系统 01 Vue-i18n国际化
前端·javascript·vue.js
期待のcode32 分钟前
Vue的安装创建与运行
前端·javascript·vue.js
百锦再35 分钟前
国产数据库的平替亮点——关系型数据库架构适配
android·java·前端·数据库·sql·算法·数据库架构
旺仔Sec35 分钟前
2025年海南省职业院校技能大赛“应用软件系统开发“赛项竞赛样题
前端·应用软件系统开发