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

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

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

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

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

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

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

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

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

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

相关推荐
Cache技术分享15 小时前
331. Java Stream API - Java Stream 实战案例:找出合作最多的作者对
前端·后端
We་ct16 小时前
LeetCode 129. 求根节点到叶节点数字之和:两种解法详解(栈+递归)
前端·算法·leetcode·typescript
Joker Zxc16 小时前
【前端基础(Javascript部分)】1、JavaScript的基础知识(组成、应用、编写方式、注释)
开发语言·前端·javascript
HelloReader16 小时前
Tauri 项目结构前端壳 + Rust 内核,怎么协作、怎么构建、怎么扩展
前端
Lee川16 小时前
深入浅出:从JavaScript内存模型理解“深拷贝”的必要性与实现
javascript
HelloReader16 小时前
Tauri 前端配置把任何前端框架“正确地”接进 Tauri(含 Vite/Next/Nuxt/Qwik/SvelteKit/Leptos/Trunk)
前端
用户57573033462416 小时前
🔥 面试官:手写 Promise 封装 AJAX?这 5 个考点 90% 的人跪了!
javascript
上单带刀不带妹16 小时前
【Axios 实战】网络图片地址转 File 对象,附跨域解决方案
开发语言·前端·javascript·vue
岱宗夫up16 小时前
【前端基础】HTML + CSS + JavaScript 基础(一)
前端·css·html
SuperEugene16 小时前
前端模块化与 import/export入门:从「乱成一团」到「清晰可维护」
前端·javascript·面试·vue