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

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

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

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

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

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

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

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

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

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

相关推荐
尾善爱看海1 天前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
驳是1 天前
一个组件,提升 react-router 开发的幸福感
前端·preact
GreenTea1 天前
OpenAI Agents API 上手实测:一次调用把整个 agent loop 甩给 OpenAI
前端·后端·算法
星云API技术支持1 天前
企业微信二次开发:群权限设置、成员管理与群资料维护的接口组合实践
java·前端·企业微信
京东云开发者1 天前
81.8 秒的视频,我们改了 15 个版本:一次纯 Codex 驱动的 AI-native 视频实践
前端·aigc
Csvn1 天前
TypeScript 大型项目架构:从单体 tsconfig 到分层可扩展的工程
前端
计算机魔术师1 天前
Dario Amodei 发文呼吁为前沿 AI 降速并提出三点计划
前端
计算机魔术师1 天前
OpenAI的AI代理偷偷给RubyGems下毒,我们却毫无察觉
前端
甲维斯1 天前
0代码,0建模,3句话开发一个3D游戏!
前端·游戏·游戏开发
IT_陈寒1 天前
Vue的响应式更新把我坑惨了,原来问题出在这
前端·人工智能·后端