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

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

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

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

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

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

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

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

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

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

相关推荐
wuk9984 小时前
实现ROS系统的Websocket传输,向Web应用推送sensor_msgs::Image数据
前端·websocket·网络协议
合作小小程序员小小店6 小时前
web网页开发,在线%考试管理%系统,基于Idea,vscode,html,css,vue,java,maven,springboot,mysql
java·前端·系统架构·vue·intellij-idea·springboot
天天进步20157 小时前
CSS Grid与Flexbox:2025年响应式布局终极指南
前端·css
Boop_wu7 小时前
[Java EE] 计算机基础
java·服务器·前端
Novlan18 小时前
TDesign UniApp 组件库来了
前端
用户47949283569158 小时前
React DevTools 组件名乱码?揭秘从开发到生产的代码变形记
前端·react.js
顾安r8 小时前
11.8 脚本网页 打砖块max
服务器·前端·html·css3
倚栏听风雨8 小时前
typescript 方法前面加* 是什么意思
前端
狮子不白9 小时前
C#WEB 防重复提交控制
开发语言·前端·程序人生·c#