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

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

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

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

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

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

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

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

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

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

相关推荐
弓.长.31 分钟前
基础入门 React Native 鸿蒙跨平台开发:Transform 变换
react native·react.js·harmonyos
Ama_tor38 分钟前
obsidian进阶の插件系列|Templater从小白到菜鸟
javascript·markdown·插件·obsidian
哈哈你是真的厉害42 分钟前
基础入门 React Native 鸿蒙跨平台开发:ActivityIndicator 实现多种加载指示器
react native·react.js·harmonyos
WordPress学习笔记43 分钟前
解决Bootstrap下拉菜单一级链接无法点击的问题
前端·bootstrap·html
Never_Satisfied1 小时前
C#插值字符串中大括号表示方法
前端·c#
wuhen_n1 小时前
初识TypeScript
javascript·typescript
w***76551 小时前
JS vs jQuery:核心差异解析
开发语言·javascript·jquery
踢球的打工仔1 小时前
typescript-类
前端·javascript·typescript
天天打码2 小时前
Svelte-无虚拟DOM、极致性能的现代高性能Web开发框架!
前端·node.js·vue·svelte
弓.长.2 小时前
基础入门 React Native 鸿蒙跨平台开发:Animated 动画
react native·react.js·harmonyos