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

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

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

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

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

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

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

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

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

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

相关推荐
布列瑟农的星空15 小时前
Playwright使用体验
前端·单元测试
卤代烃15 小时前
🦾 可为与不可为:CDP 视角下的 Browser 控制边界
前端·人工智能·浏览器
_XU15 小时前
AI工具如何重塑我的开发日常
前端·人工智能·深度学习
C_心欲无痕16 小时前
vue3 - defineExpose暴露给父组件属性和方法
前端·javascript·vue.js·vue3
鹿人戛16 小时前
HarmonyOS应用开发:相机预览花屏问题解决案例
android·前端·harmonyos
萌萌哒草头将军16 小时前
绿联云 NAS 安装 AudioDock 详细教程
前端·docker·容器
贺今宵16 小时前
安装better-sqlite3报错electron-vite
javascript·sql·sqlite·sqlite3
GIS之路17 小时前
GIS 数据转换:使用 GDAL 将 GeoJSON 转换为 Shp 数据
前端
2501_9444460017 小时前
Flutter&OpenHarmony文件夹管理功能实现
android·javascript·flutter
朴shu17 小时前
Luckysheet 远程搜索下拉 控件开发 : 揭秘二开全流程
前端