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

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

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

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

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

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

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

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

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

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

相关推荐
太极OS4 分钟前
给 AI Skill 做 CI/CD:GitHub + ClawHub + Xiaping 同步发布实战
前端
你_好4 分钟前
Chrome 内置了 AI 工具协议?WebMCP 抢先体验 + 开源 DevTools 全解析
前端·mcp
GISer_Jing5 分钟前
LangChain.js + LangGraph.js 前端AI开发实战指南
前端·javascript·langchain
正在发育ing__9 分钟前
从源码看vue的key和状态错乱的patch
前端
木心术110 分钟前
TypeScript实战进阶:从基础类型到高级类型编程
javascript·ubuntu·typescript
Hello--_--World29 分钟前
浏览器同源策略与跨域问题
javascript
黄林晴33 分钟前
第一次听到 Tauri 这个词,去学习一下
前端
零瓶水Herwt33 分钟前
JavaScript对象继承常用详解
javascript
可可爱爱的你吖40 分钟前
蜂鸟云地图简单实现
前端
布局呆星42 分钟前
Vue3 :生命周期、DOM 操作与自定义组合式函数
前端·javascript·vue.js