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

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

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

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

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

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

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

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

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

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

相关推荐
专吃海绵宝宝菠萝屋的派大星19 小时前
使用Dify对接自己开发的mcp
java·服务器·前端
爱分享的阿Q19 小时前
Rust加WebAssembly前端性能革命实践指南
前端·rust·wasm
蓝黑202019 小时前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小李子呢021119 小时前
前端八股6---v-model双向绑定
前端·javascript·算法
He少年20 小时前
【基础知识、Skill、Rules和MCP案例介绍】
java·前端·python
史迪仔011220 小时前
[QML] QML IMage图像处理
开发语言·前端·javascript·c++·qt
AI_Claude_code20 小时前
ZLibrary访问困境方案四:利用Cloudflare Workers等边缘计算实现访问
javascript·人工智能·爬虫·python·网络爬虫·边缘计算·爬山算法
AwesomeCPA20 小时前
Miaoduo MCP 使用指南(VDI内网环境)
前端·ui·ai编程
前端大波20 小时前
前端面试通关包(2026版,完整版)
前端·面试·职场和发展
qq_4335021820 小时前
Codex cli 飞书文档创建进阶实用命令 + Skill 创建&使用 小白完整教程
java·前端·飞书