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

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

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

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

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

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

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

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

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

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

相关推荐
用户693717500138412 小时前
实测!Gemma 4 成功跑在安卓手机上:离线 AI 助手终于来了
android·前端·人工智能
大阿明12 小时前
使用vite打包并部署vue项目到nginx
前端·vue.js·nginx
小江的记录本12 小时前
【Swagger】Swagger系统性知识体系全方位结构化总结
java·前端·后端·python·mysql·spring·docker
csdn_aspnet12 小时前
如何在 .NET Core WebAPI 和 Javascript 应用程序中安全地发送/接收密钥参数
javascript·.netcore·cryptojs
用户81135818812012 小时前
【AJAX-Day2】Promise与回调地狱
前端·ajax
Moshow郑锴12 小时前
npm国内镜像加速之使用 nrm 工具(灵活切换,适合多环境)
前端·npm·node.js
flytam13 小时前
Claude Agent SDK 深度入门指南 审核中
前端·人工智能·aigc
还是大剑师兰特13 小时前
pnpm format 什么作用
开发语言·javascript·ecmascript
你猜猜吧13 小时前
里程三:DSL总结
前端