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

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

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

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

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

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

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

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

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

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

相关推荐
云水一下5 小时前
TypeScript 从零基础到精通(五):高级类型与泛型
前端·javascript·typescript
counterxing5 小时前
vibe coding 之后,我更不想打字了
前端·agent·ai编程
云水一下5 小时前
TypeScript 从零基础到精通(六):类型声明与模块化
javascript·typescript
copyer_xyf5 小时前
Python 模块与包的导入导出
前端·后端·python
研☆香5 小时前
es6新特性功能介绍(四)
前端·ecmascript·es6
微扬嘴角6 小时前
React篇1--JSX语法规则、组件、组件实例的3大特性
前端·react.js·前端框架
copyer_xyf6 小时前
Python venv 虚拟环境
前端·后端·python
无聊的老谢6 小时前
Vue 3 + TypeScript 构建大型电信运维平台的前端架构设计
前端·vue.js·typescript
xiaofeichaichai6 小时前
Map / Set / WeakMap / WeakSet
前端·javascript
李可以量化6 小时前
成交量的终极量化策略:价量共振指标完整实现(下篇)
前端·数据库·人工智能