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

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

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

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

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

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

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

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

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

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

相关推荐
冲浪中台13 分钟前
【无标题】
前端·低代码
openKaka_18 分钟前
beginWork 的第一站:HostRoot 如何把 App 接入 Fiber 树
前端·javascript·react.js
我命由我1234534 分钟前
Dart - Dart SDK、Hello World 案例、变量声明、常量声明、常量 final、字符串类型
前端·flutter·前端框架·html·web·dart·web app
冴羽yayujs37 分钟前
GitHub 前端热榜项目 - 日榜(2026-05-11)
前端·github
~|Bernard|38 分钟前
四,go语言中GMP调度模型
java·前端·golang
YOU OU1 小时前
HTML+CSS+JavaScript
前端·javascript·css·html
Rkgua1 小时前
路径传参和查询传参和请求体传参区以及Vue和React的用法区分
前端·面试
JarvanMo1 小时前
Flutter + Supabase 集成 Apple Sign-In 完整指南
前端
小村儿1 小时前
连载
前端·后端·ai编程
dinl_vin2 小时前
LangChain 系列·(九):Agent——让 AI 自己做决策
前端·人工智能·langchain