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

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

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

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

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

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

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

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

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

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

相关推荐
anOnion2 分钟前
构建无障碍组件之Landmarks Pattern
前端·html·交互设计
牧瀬クリスだ4 分钟前
前端三件套基础之JS!!!!
前端·javascript
乌夷6 分钟前
JavaScript 的事件循环
开发语言·javascript·ecmascript
风骏时光牛马7 分钟前
提示词工程:大模型交互的核心塑造技术
前端
单线程_0110 分钟前
从案例分析 Vue3 Tokenizer+Parser 源码四
前端·javascript·vue.js
12 分钟前
Python 图片处理:裁剪缩放至300×200,格式JPG/PNG/GIF,控制大小≤100KB
linux·前端·python
_阿南_7 小时前
项目中新增给AI制定的代码规范
前端·程序员
名字还没想好☜8 小时前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js
自动化监测Learner9 小时前
主流 Web 端地图引擎对比:选型指南与优劣分析
javascript
console.log('npc')9 小时前
Git 冲突与 AI 协助指南
前端·人工智能·git·大模型