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

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

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

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

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

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

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

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

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

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

相关推荐
拾光拾趣录17 分钟前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲24 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃34 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军35 分钟前
React 协调器 render 阶段
前端·react.js·前端框架
中微子38 分钟前
Blob 对象及 Base64 转换指南
前端
风铃喵游38 分钟前
让大模型调用MCP服务变得超级简单
前端·人工智能
中微子39 分钟前
智能前端实践之 shot-word demo
前端
归于尽40 分钟前
智能前端小魔术,让图片开口说单词
前端·react.js
用户98738245810140 分钟前
vite 插件
前端
无数山42 分钟前
autorelease pool
前端