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

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

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

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

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

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

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

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

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

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

相关推荐
谢尔登20 小时前
React架构演变
前端·react.js·架构
木辰風20 小时前
vue在IE浏览器下父页面向子页面传输对象时数据丢失
前端·javascript·html
小雨青年20 小时前
Cursor 项目实战:AI播客策划助手(四)—— 产品发布与交付收尾
前端·人工智能
@呵呵20 小时前
上传图片裁剪
开发语言·javascript·vue.js
晚霞的不甘21 小时前
Flutter for OpenHarmony《淘淘购物》主页点击跳转功能详解:从 UI 响应到页面导航的完整实现
前端·flutter·ui·搜索引擎·前端框架·交互
cooldream200921 小时前
前端技术架构详解:Vue 3 + TypeScript + Vite 在具身 AI 系统中的实践
前端·架构·typescript
迟_21 小时前
CSS-实现图片靠右
前端·css
weixin_3954489121 小时前
下位机&yolov11输出
java·服务器·前端
秋秋秋秋秋雨21 小时前
基于若依的vue3+springboot3基础架构项目,前端优化
前端
Dragon Wu21 小时前
Web前端 认证token的安全存储策略
前端·javascript·安全·react.js·前端框架