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

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

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

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

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

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

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

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

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

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

相关推荐
Surmon1 小时前
基于 Cloudflare 生态的 AI Agent 实现
前端·人工智能·架构
六月June June6 小时前
自定义调色盘组件
前端·javascript·调色盘
SY_FC6 小时前
实现一个父组件引入了子组件,跳转到其他页面,其他页面返回回来重新加载子组件函数
java·前端·javascript
糟糕好吃6 小时前
我让 AI 操作网页之后,开始不想点按钮了
前端·javascript·后端
陈天伟教授7 小时前
人工智能应用- 天文学家的助手:08. 星系定位与分类
前端·javascript·数据库·人工智能·机器学习
VaJoy7 小时前
给到夯!前端工具链新标杆 Vite Plus 初探
前端·vite
颜酱8 小时前
BFS 与并查集实战总结:从基础框架到刷题落地
javascript·后端·算法
小彭努力中8 小时前
191.Vue3 + OpenLayers 实战:可控化版权信息(Attribution)详解与完整示例
前端·javascript·vue.js·#地图开发·#cesium
奇舞精选8 小时前
用去年 github 最火的 n8n 快速实现自动化推送工具
前端·agent
奇舞精选8 小时前
实践:如何为智能体推理引入外部决策步骤
前端·agent