收集用户意图
轮播与内容滑轨
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
INTERACTION NOTES
交互与可访问性
- 提供可聚焦的前后控制和当前位置。
- 自动播放必须能暂停,减少动态效果时停止自动切换。
和相似组件的区别
Carousel 改变当前展示项;虚拟列表主要减少渲染成本。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt · 来源核验