uiUI 组件系统
对比

轮播与内容滑轨

Carousel

让一组相关内容在有限空间中逐项浏览。

交互预览实时预览
横向滚动,或聚焦后按方向键
使用代码安装指南 ↗
app.mjs
import { mount } from '@sofish/ui/browser';

const view = mount(
  document.querySelector('#example'),
  'carousel'
);

view.element.addEventListener('ui:change', event => {
  console.log(event.detail.value);
});

// view.update({ ...nextProps });
// view.destroy();

什么时候用

图片、预览或有明确顺序的一组内容。

什么时候不用

关键内容不要只放在用户很难发现的后续项。

COMPONENT API

属性与事件

传入业务数据,通过事件连接你的应用。

属性默认值
label"可横向滚动的组件示例"
items[{"label":"输入","content":"收集用户意图"},{"label":"导航","content":"建立当前位置"},{"label":"反馈","content":"解释发生了什么"}]

事件

ui:change

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 提供可聚焦的前后控制和当前位置。
  • 自动播放必须能暂停,减少动态效果时停止自动切换。

和相似组件的区别

Carousel 改变当前展示项;虚拟列表主要减少渲染成本。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Element PlusCarousel
官方提供

内容切换与自动播放等配置。

关键状态

当前项前后切换首尾边界暂停

Vue / Nuxt · 来源核验

一起了解

标签页 ↗内容卡片 ↗虚拟列表 ↗