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

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

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

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

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

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

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

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

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

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

相关推荐
ttwuai1 分钟前
Go 后台富文本图片上传失败排查:前端限制、接口和存储目录要一起看
前端·golang·状态模式
小雪_Snow2 分钟前
JS 数组的遍历 —— 两种方式详解
前端·javascript
禅思院5 分钟前
AI对话前端从入门到崩溃:一个长对话引发的五层优化战争【五】
前端·架构·前端框架
kyle~17 分钟前
前端---Zustand组件库(轻量快速精细化的状态管理方案)
前端
IT_陈寒19 分钟前
为什么我的React状态更新总是不按套路出牌?
前端·人工智能·后端
小二·21 分钟前
WebGPU 浏览器端跑大模型:让AI在网页里跑起来(WebLLM/Transformers.js实战)
开发语言·javascript·人工智能
心中有国也有家32 分钟前
AtomGit Flutter 鸿蒙客户端:零外部资源的应用打包策略
android·javascript·flutter·华为·harmonyos
恋猫de小郭40 分钟前
Fluter 共享内存多线程正在落地,IsolateGroupBound 来了
android·前端·flutter
十铭忘1 小时前
Vue3实现Pixso中的钢笔工具3——梳理函数调用
前端·vue.js
逝水无殇1 小时前
HTML 元素详解
开发语言·前端·html