轮播
@astryxdesign/core v0.7.1 · Carousel
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
gap | 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 1 | 项与项之间的间距,按间距档取值。 |
hasButtons | boolean | true | 内容溢出时显示上一张和下一张按钮。 |
hasEdgeFade | boolean | true | 在仍被裁切的一侧加上渐隐。 |
hasLoop | boolean | false | 从最后一项回到第一项。内容溢出时两端按钮都保持可用。 |
hasSnap | boolean | false | 每个直接子节点吸附到起始边。 |
padding | SpacingStep | — | 滚动区域的行内内边距,并同步设置 scroll-padding。 |
label | string | Carousel | 区域的无障碍名称。默认文案随语言变化,中文为「轮播」。 |
暴露的方法
| 名称 | 签名 | 说明 |
|---|---|---|
scrollNext | () => void | 向前滚动大约一屏。打开 hasLoop 时,到末尾会回到开头。 |
scrollPrev | () => void | 向后滚动大约一屏。打开 hasLoop 时,到开头会回到末尾。 |
scrollTo | (index: number) => void | 把从 0 开始的那一项滚到起始边。超出范围会夹到有效下标。只滚动轮播本身。 |
canScrollNext | () => boolean | 是否还能向前滚。打开 hasLoop 时,只要内容溢出就为 true。 |
canScrollPrev | () => boolean | 是否还能向后滚。打开 hasLoop 时,只要内容溢出就为 true。 |
插槽
default:轮播项。每个顶层节点是一张幻灯片。Fragment 会展开,空白文本会跳过。
主题
根类名是 astryx-carousel。滚动区域是 .astryx-carousel__scroller。
--astryx-carousel-gap:项间距,由gap写入。--astryx-carousel-padding:行内内边距和 scroll-padding,由padding写入。