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

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

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

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

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

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

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

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

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

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

相关推荐
小oo呆4 分钟前
【自然语言处理与大模型】LangChainV1.0入门指南:核心组件Agent
前端·javascript·easyui
BD_Marathon33 分钟前
关于JS和TS选择的问题
开发语言·javascript·ecmascript
Hao_Harrision38 分钟前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DrawingApp(画板组件)
前端·react.js·typescript·tailwindcss·vite7
dly_blog39 分钟前
Vite 原理与 Vue 项目实践
前端·javascript·vue.js
仅此,1 小时前
前端接收了id字段,发送给后端就变了
java·前端·javascript·spring·typescript
Lovely Ruby1 小时前
[前端] 封装一下 echart 6,发布到 npm
前端·npm·node.js
BD_Marathon1 小时前
NPM_常见命令
前端·npm·node.js
樱桃园园长1 小时前
【Three.js 实战】手势控制 3D 奢华圣诞树 —— 从粒子系统到交互实现
javascript·3d·交互
绿鸳1 小时前
12.17面试题
前端
二狗哈1 小时前
Cesium快速入门30:CMZL动画
javascript·3d·webgl·cesium·地图可视化