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

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

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

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

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

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

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

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

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

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

相关推荐
u01110267534 分钟前
JPG、PNG、WebP 怎么选?按透明度、体积和使用场景做判断
前端·javascript·vue.js·图像处理·ai作画
jerrywus1 小时前
让 AI 写完代码后交一份报告:我改造了 answer-me-with-html
前端·claude·cursor
派小心.2 小时前
小程序分享链路中来源参数的传递校验
大数据·前端·数据库·人工智能·小程序·数据分析
hhb_6182 小时前
一键生成数据看板,ECharts实战演示
前端·javascript·echarts
Java后端的Ai之路2 小时前
08_React组件API
前端·react.js·前端框架
小马不起床2 小时前
零基础玩转 FastAPI_09:前端基础工程构建
前端·状态模式·fastapi
const_qiu3 小时前
第一章 1.1-1.2:基础模型调用与 TypeScript 入门 —— Java 开发者的视角
java·javascript·typescript
风骏时光牛马3 小时前
用户管理模块接口开发
前端
彭亚川Allen4 小时前
从零手搓 RAG 之检索全流程,给大模型接上自己的知识库
前端·后端·ai编程
IT_陈寒4 小时前
别让Java字符串拼接偷偷吃掉你的内存
前端·人工智能·后端