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

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

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

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

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

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

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

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

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

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

相关推荐
数研小生9 分钟前
Full Analysis of Taobao Item Detail API taobao.item.get
java·服务器·前端
Shirley~~19 分钟前
Vue-skills的中文文档
前端·人工智能
毎天要喝八杯水28 分钟前
搭建vue前端后端环境
前端·javascript·vue.js
计算机程序设计小李同学1 小时前
幼儿园信息管理系统的设计与实现
前端·bootstrap·html·毕业设计
雨季6661 小时前
Flutter 三端应用实战:OpenHarmony “极简手势轨迹球”——指尖与屏幕的诗意对话
开发语言·javascript·flutter
摘星编程1 小时前
OpenHarmony + RN:Stack堆栈导航转场
react native·react.js·harmonyos
雨季6661 小时前
Flutter 三端应用实战:OpenHarmony “专注时光盒”——在碎片洪流中守护心流的数字容器
开发语言·前端·安全·flutter·交互
tao3556672 小时前
【用AI学前端】HTML-02-HTML 常用标签(基础)
前端·html
2601_949532842 小时前
Psello HTML Template: A Developer‘s Deep-Dive Review and Guide - Download Free
前端·windows·html·seo·wordpress·gpl
CappuccinoRose2 小时前
CSS前端布局总指南
前端·css·学习·布局·flex布局·grid布局·float布局