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

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

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

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

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

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

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

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

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

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

相关推荐
weiabc1 分钟前
整数最接近等因数分解函数(汇编优化版)
开发语言·前端·javascript
小满zs1 分钟前
Next.js身份验证(better-auth)
前端·seo·next.js
IMPYLH7 分钟前
Linux 的 truncate 命令
linux·运维·服务器·前端·bash
invicinble14 分钟前
前端框架使用vue-cli( 第一层:依赖与环境层)
前端·vue.js·前端框架
七七powerful23 分钟前
mac电脑安装cmca根证书
java·前端·macos
invicinble25 分钟前
前端框架使用vue-cli (第五层:构建打包层--vue.config.js文件介绍以及环境文件)
javascript·vue.js·前端框架
神探小白牙25 分钟前
echarts环形图自定义
android·前端·echarts
故事和你9127 分钟前
洛谷-数据结构2-1-二叉堆与树状数组2
开发语言·javascript·数据结构·算法·ecmascript·动态规划·图论
ZC跨境爬虫29 分钟前
跟着 MDN 学 HTML day_28:(使用选择器 API 在 DOM 树中进行选择与遍历)
前端·ui·html·音视频·webrtc
东北甜妹30 分钟前
K8s Ingress
java·运维·前端