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

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

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

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

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

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

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

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

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

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

相关推荐
qq_2518364579 分钟前
基于java Web 动漫视频网站毕业论文
java·开发语言·前端
an3174224 分钟前
6MB 组织树大文件性能优化全流程
前端·javascript·vue.js
GitLqr1 小时前
Vue 3.6 Vapor Mode vs React 19 Compiler:前端架构的两条分叉路
vue.js·react.js·vapor
武子康1 小时前
Inkling 975B 说明“开放权重“与“普通开发者本地运行“已经分离,内容重点应是部署容量和运行时边界
前端·人工智能·后端
TeamDev1 小时前
JxBrowser 9.3.1 版本发布啦!
java·前端·javascript·c#·混合应用·jxbrowser·浏览器控件
颜酱2 小时前
03 | 实现节点1 — 抽取关键词
前端·人工智能·后端
整點薯條2 小时前
Vue3+vite创建项目架构文件说明总结
前端·javascript·vue.js
掘金一周2 小时前
想问问掘友们:AI 时代,资深开发的核心价值到底在哪里?| 沸点周刊 7.23
前端·人工智能·后端
橘子星2 小时前
🚀 手把手带你写一个端侧 AI 应用的"加载进度条"与"聊天对话框"
前端·人工智能
37.2℃9953 小时前
专业的Claude Design解决方案
前端·算法