Skip to content

轮播

@astryxdesign/core v0.7.1 · Carousel

属性 ​

属性类型默认值说明
gap0 | 0.5 | 1 | 1.5 | 2 | 3 | 41项与项之间的间距,按间距档取值。
hasButtonsbooleantrue内容溢出时显示上一张和下一张按钮。
hasEdgeFadebooleantrue在仍被裁切的一侧加上渐隐。
hasLoopbooleanfalse从最后一项回到第一项。内容溢出时两端按钮都保持可用。
hasSnapbooleanfalse每个直接子节点吸附到起始边。
paddingSpacingStep—滚动区域的行内内边距,并同步设置 scroll-padding。
labelstringCarousel区域的无障碍名称。默认文案随语言变化,中文为「轮播」。

暴露的方法 ​

名称签名说明
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 写入。