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

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

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

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

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

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

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

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

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

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

相关推荐
柒和远方1 分钟前
V063: TS 面试必考:interface 与 type 的四大差异,与 LLM Harness 的自动化择优
前端·javascript
半个落月4 分钟前
React useRef 详解:DOM 引用、持久化值与 Worker 实例
前端·react.js
阿黎梨梨8 分钟前
TypeScript 类型编程:从新手到 Harness 工程实践
前端
黄金决明子9 分钟前
Vue3 + Vite 打包后打开空白?
前端
张龙68710 分钟前
终端效率翻倍实战:fzf + zoxide + ripgrep + bat 组合拳,告别重复敲命令
前端
宿67418 分钟前
vue3-env环境
前端·vue.js
蔬菜_20 分钟前
前端转全栈-day5(数组、list、set)
java·前端·数据结构·list
汉堡大王952731 分钟前
Vue 3 + TS + Element Plus 实战:如何从零搭建企业级违章记录管理 SaaS 前端
前端·javascript·vue.js
minimoon_jojo33 分钟前
Ant Design 树形表格渲染原理
前端
海天鹰34 分钟前
屏幕颜色检测
javascript·html5