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

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

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

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

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

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

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

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

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

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

相关推荐
用户60007181910几秒前
【翻译】在 React Router 中理清对话框
react.js
前端那点事1 分钟前
告别低级冗余!10个前端原生高阶技巧,让代码更优雅、性能更出众
前端·vue.js
hexu_blog2 分钟前
前端vue后端java如何实现证件照功能
前端·javascript·vue.js
豹哥学前端2 分钟前
前端 LocalStorage 实战:从入门到熟练,一篇就够了
前端·javascript·面试
用户40189933422842 分钟前
第 11 章 MCP 协议与集成
前端
Southern Wind11 分钟前
谷记账——一个 Vue 3 批次记账 App
前端·javascript·vue.js
A923A38 分钟前
【javaScript 原型精讲】
javascript·原型·原型链
卷帘依旧1 小时前
手写throttle
javascript
lzhdim1 小时前
SQL 入门 14:SQL 触发器与事件:自动化数据处理
linux·前端·数据库·sql·自动化
其实防守也摸鱼1 小时前
Sqlmap:选取sqli-labs中less-8进行sqlmap注入测试
前端·css·网络·安全·web安全·less·sqli-labs