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

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

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

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

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

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

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

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

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

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

相关推荐
程序员祥云21 小时前
技能特⻓回答
前端·面试
m0_6161884921 小时前
JS文件批量下载并打包成ZIP的功能
开发语言·javascript·ecmascript
xiaoxue..21 小时前
React 新手村通关指南:状态、组件与魔法 UI
前端·javascript·react.js·ui
滿21 小时前
Vue3 ElementPlus el-select 焦点事件数据不回显问题
javascript·vue.js·elementui
晚霞的不甘21 小时前
Flutter + OpenHarmony 架构演进:从单体到模块化、微前端与动态能力的现代化应用体系
前端·flutter·架构
代码or搬砖21 小时前
Vue生命周期总结(四个阶段,八个钩子函数)
前端·javascript·vue.js
梵尔纳多21 小时前
第一个 Electron 程序
前端·javascript·electron
鹏北海-RemHusband21 小时前
记录一次微前端改造:把 10+ 个独立 Vue 项目整合到一起
前端·javascript·vue.js
程序员小寒21 小时前
前端高频面试题之Promise相关方法
前端·javascript·面试
IT_陈寒21 小时前
JavaScript 开发者必知的 7 个 ES2023 新特性,第5个能让代码量减少50%
前端·人工智能·后端