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

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

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

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

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

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

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

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

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

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

相关推荐
UXbot1 小时前
UI设计工具推荐合集
前端·人工智能·ui
码路星河1 小时前
基于 Vue + VueUse 的 WebSocket 优雅封装:打造高可用的全局连接管理方案
javascript·vue.js·websocket
摘星编程1 小时前
React Native + OpenHarmony:Accelerometer计步器代码
javascript·react native·react.js
敲敲了个代码1 小时前
如何优化批量图片上传?队列机制+分片处理+断点续传三连击!(附源码)
前端·javascript·学习·职场和发展·node.js
@AfeiyuO2 小时前
Vue 引入全局样式scss
前端·vue·scss
光影少年2 小时前
flex布局和grid布局区别,实现两边固定布局中间自适应
前端·css3·web·ai编程
全栈测试笔记2 小时前
异步函数与异步生成器
linux·服务器·前端·数据库·python
EndingCoder2 小时前
配置 tsconfig.json:高级选项
linux·前端·ubuntu·typescript·json
木风小助理2 小时前
JavaStreamAPI的性能审视,优雅语法背后的隐形成本与优化实践
java·前端·数据库
Ophelia(秃头版3 小时前
JS事件循环与NodeJS事件循环(libuv)
开发语言·javascript