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

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

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

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

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

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

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

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

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

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

相关推荐
小二·19 小时前
Python Web 开发进阶实战:AI 原生硬件接口 —— 在 Flask + MicroPython 中构建边缘智能设备控制平台
前端·人工智能·python
ElasticPDF-新国产PDF编辑器19 小时前
基于 PDF.js 的 PDF 文字编辑解决方案,纯前端 SDK,跨平台、框架无关、Web 原生
前端·javascript·pdf
带带弟弟学爬虫__19 小时前
速通新Baidu Frida检测
前端·javascript·vue.js·python·网络爬虫
好学且牛逼的马19 小时前
ES6 核心语法精讲
前端·ecmascript·es6
GISer_Jing19 小时前
一次编码,七端运行:Taro多端统一架构深度解析与电商实战
前端·aigc·taro
子春一19 小时前
Flutter for OpenHarmony:用 Flutter 构建一个数字猜谜游戏:从零开始的交互式应用开发
javascript·flutter·游戏
michael_ouyang19 小时前
IM 消息收发流程方案选型
前端·websocket·网络协议·typescript·electron
Y淑滢潇潇20 小时前
WEB 作业 三个练习题
前端·javascript·css3
静小谢20 小时前
前端mock假数据工具JSON Server使用笔记
前端·笔记·json
敲上瘾20 小时前
用Coze打造你的专属AI应用:从智能体到Web部署指南
前端·人工智能·python·阿里云·aigc