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

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

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

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

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

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

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

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

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

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

相关推荐
q***T58317 小时前
GitHub星标20万+的React项目,学习价值分析
前端·学习·react.js
合作小小程序员小小店17 小时前
web开发,在线%药店管理%系统,基于Idea,html,css,jQuery,java,ssm,mysql。
java·前端·mysql·jdk·html·intellij-idea
ClassOps17 小时前
Chrome 插件记录
前端·chrome
笙年18 小时前
Vue 作用域插槽
前端·javascript·vue.js
鹏北海18 小时前
从“版本号打架”到 30 秒内提醒用户刷新:一个微前端团队的实践
前端·面试·架构
stormsha18 小时前
CSS 样式美学从基础语法到界面精筑的实战宝典
前端·css·postcss·设计语言
yqcoder18 小时前
css 中,backdrop-filter: blur(10px) 作用
前端·css
一点一木19 小时前
国内首款原生视觉编程模型实测:Doubao-Seed-Code 前端 Agent 从零完成像素画编辑器
前端·人工智能·agent
SoaringHeart19 小时前
Flutter组件封装:标签拖拽排序 NDragSortWrap
前端·flutter
zeijiershuai19 小时前
Vue 工程化、ElementPlus 快速入门、ElementPlus 常见组件-表格组件、ElementPlus常见组件-分页条组件
前端·javascript·vue.js