生态产品多个设计器现已发布正式版

查看生态总览
曦寒视图组件文档
取本页 Markdown

Carousel 走马灯 ​

在同一块区域内轮播若干张内容，一次显示一屏。

HeadlessStylesVueReactWeb Components

用法 ​

张数由 slideCount 声明而不是从 DOM 计数，页数与指示点数量都由它计算

组件结构 ​

加粗的是必需部件。

data-scope="carousel"：root · viewport · list · item · prev-trigger · next-trigger · autoplay-trigger · indicator-group · indicator

示例 ​

受控 ​

传入 page 后由宿主决定，组件只发 page-change 不自行修改页码，宿主写回后才变化

当前第 2 张

一屏多张 ​

slidesPerPage 决定一屏显示几张，一次翻几张默认跟随它，因此仍是整屏翻页

自动播放与暂停 ​

autoplay 传毫秒即间隔；开启后必须渲染播放开关，自动翻页必须能够停止

纵向轨道 ​

orientation 换为 vertical 后轨道竖向位移，两端按钮落到上下两端，翻页识别上下方向键

指针拖拽 ​

allowPointerDrag 开启后按住轨道即可拖动，松手落回整页；关闭则只有触摸的原生滚动

第 1 / 4 页

指示点悬停切页 ​

指示点上补一个原生 mouseenter 即为悬停切页，组件自带的点击翻页照常

鼠标扫过圆点即可换页 · 当前第 1 / 4 页

一次移动一张 ​

slidesPerMove 与 slidesPerPage 分开提供：一屏显示三张、一次只移动一张，页数按剩余张数重新计算

第 1 / 4 页 · 眼下露的是第 1 到 3 张

淡入淡出换页 ​

effect="fade" 把各张叠放在同一格：翻页时新一张淡入、旧一张同时淡出，轨道不位移；按钮、键盘、指示点与循环照常，减弱动效下直接换

设计指引 ​

何时使用 ​

  • 首屏营销位、图片画廊等内容并列且用户不需要全部浏览的场景。

何时不用 ​

  • 每一张都需要被看到时，并排铺开或使用列表；轮播中第二张之后的点击率很低。
  • 内容是导航入口。

特性 ​

  • 张数由 slideCount 声明，不从 DOM 计数；开发期挂载后若渲染出来的条目比它多（常见是漏传），诊断通道报 carousel.slide-count-mismatch 并在控制台告警。按需渲染时 DOM 里的条目少于张数是正常的，不报。
  • slidesPerPage 与 slidesPerMove 分开：可以一屏三张、一次移动一张。
  • 支持纵向轨道、指针拖拽、循环与自动播放。
  • 拖拽松手后轨道带着松手速度落到目标页：轻甩一下也能翻页，往回甩则收回；不循环时首末页往外拖越拉越沉，松手弹回。
  • 分页点为 6px 圆点、点距 8px，当前页拉长为 20px 品牌胶囊；自动播放时胶囊按停留间隔显示进度。悬停、聚焦等临时暂停时进度回到起点，恢复后与计时器一起从头计满一整个间隔。
  • 分页点沿轨道的长度取 --xh-carousel-indicator-size（当前页 --xh-carousel-indicator-size-current），垂直于轨道的粗细取 --xh-carousel-indicator-thickness，缺省与长度同值、仍是圆点。粗细单独调小就成细横条；横条不是正方盒，圆角同时把 --xh-carousel-indicator-radius 换成 var(--xh-shape-pill)。点调细时细指针的命中区垂直于轨道多外扩一些，不低于 24px；粗指针下 44px 的命中区与伪元素画点的方式不变，点与进度条同样按粗细画。
  • loop 下从末页往后翻（或首页往前翻）轨道继续朝同一方向走一张，接到首页（或末页），不倒着刷过全部页。
  • effect="fade" 换成淡入淡出：各张叠放在同一格，新一张淡入、旧一张同时淡出，时长与平移同一档，减弱动效下直接换；一页只放一张。
  • 指示点可以配置为悬停即切页。
  • 应用设为 data-material="liquid" 时，翻页与播放钮换成液态面，分页点托在一条液态胶囊上：按下层换色调，压在任何媒体上都看得清；按住控制钮时液面随手指形变。

组合 ​

最佳实践 ​

  • 开启自动播放时渲染 autoplay-trigger：它是唯一能停止自动翻页且不会被其他交互重新启动的入口。
  • 自动播放在指针悬停或焦点进入时自动暂停，离开后重新计满一个间隔再翻页。
  • 减弱动效时自动播放不会自行启动，播放开关是用户唯一的启动入口。
  • 分页点应能看出总屏数与当前位置；自动播放时还应反馈本页剩余时间。翻页与播放按钮走 Action Control floating 档，随 size 取 sm / md / lg（24 / 24 / 28px、字形 12 / 16 / 20px，默认 md 24px；sm 不低于 24px 的最小目标，只把字形收小；紧凑档也不低于 24px，钮在细指针下不外扩命中区）圆形浮层面，按下换底。三颗钮浮在内容之上：翻页钮在两侧居中、播放钮贴右下角，视口不低于 3 × 钮径 + 24px（两倍控件内距）时互不相叠，即 sm / md 96px、lg 108px。

反模式 ​

  • 自动播放且不能暂停，阅读较慢的用户无法读完。
  • 把关键信息或唯一的行动入口放在第三张之后。

API 参考 ​

产物 ​

层值
自定义元素<xh-carousel>
Vue 组件XhCarouselAutoplayTrigger XhCarouselIndicator XhCarouselIndicatorGroup XhCarouselItem XhCarouselList XhCarouselNextTrigger XhCarouselPrevTrigger XhCarouselRoot XhCarouselViewport
组合式函数useCarousel
状态机carouselMachine
皮肤@xihan-ui/styles/carousel.css

Props ​

属性类型必填说明
pagenumber当前页，0 基。提供即受控：内部不再自行修改，只发 onPageChange。 页不等于张：一页可能同时显示多张（见 slidesPerPage）。
defaultPagenumber非受控初始页，默认 0。
slideCountnumber条目总数，由作者声明，不从 DOM 统计（服务端渲染与按需渲染都靠它）。 开发期挂载后若渲染出来的条目比它多，经诊断通道报 carousel.slide-count-mismatch。
slidesPerPagenumber一屏显示的张数，默认 1。
slidesPerMovenumber一次翻动的张数，默认跟随 slidesPerPage（整屏翻页）。
orientationOrientation轨道方向，默认 horizontal；方向键的轴随之变化。
dirDirection文字方向。水平轴上同时作用于排版与位移方向：rtl 下下一张在左侧， 轨道也向正方向位移。纵向轨道不受影响。
loopboolean到达末尾是否回绕，默认 false。
autoplayboolean | number自动播放。true 使用默认间隔，数值即毫秒间隔；未提供 / false / 非正数一律不自动播放。 指针悬停或轮播内任一节点获得焦点时暂停计时，离开后重新计满一个完整间隔再翻页。 减弱动效档下不自动起播：提供间隔也停在 idle，需要由用户按下播放开关。
allowPointerDragboolean允许指针拖拽切页，默认 false。鼠标、触摸、触控笔一并门控。 开启后沿轨道轴的原生滚动让位给拖拽，关闭则完全没有拖拽、触摸使用原生滚动。
spacingstring张与张之间的间距，任意 CSS 长度（如 '12px'）。落为条目自身的内边距，不影响位移计算。
effectCarouselEffect换页方式，默认 slide（轨道平移）。fade 时条目叠放、新一页淡入旧一页淡出，与平移同一段时长与曲线， 减弱动效下直接换；loop 回绕也只是一次淡变。拖拽仍按方向与速度决定翻不翻页，画面不跟手位移。 fade 一页只放一张：slidesPerPage 大于 1 时报错。
sizeSize尺寸：sm / md / lg，默认 md；翻页与播放三颗钮走 Action Control floating 档，视觉盒 24 / 24 / 28px、字形 12 / 16 / 20px。
translationsPartial<CarouselTranslations>
onPageChange(details: CarouselPageChangeDetails) => void页码变化意图回调；受控时是唯一出口，非受控时随内部写入一并通知。

事件 ​

自定义元素将载荷放在 detail；Vue 使用同名 emit。

事件载荷说明
page-changeCarouselPageChangeDetails页码变化；detail 为 { page: number }

插槽 ​

仅列出带载荷的插槽。

Vue 组件插槽载荷说明
XhCarouselAutoplayTriggerdefault{ stopped: boolean }
XhCarouselRootdefaultCarouselRootSlotProps

React 适配器 props ​

只列各组件自己声明的那些：继承自 ComponentPropsWithRef 的 DOM 属性不在其中，根组件上与上面 Props 表同名的也不重复列。Vue 的对应物是上面的插槽表。

React 组件属性类型必填说明
XhCarouselAutoplayTriggerchildrenSlotChildren<CarouselAutoplayTriggerSlotProps>
XhCarouselIndicatorindexnumber | string是指示点对应的页码，0 基；兼收字符串。
XhCarouselItemindexnumber | string是该张的下标，0 基；兼收字符串。
XhCarouselRootchildrenSlotChildren<CarouselRootSlotProps>

状态 ​

公开状态写入 data-state。

部件取值
autoplay-trigger'paused' | 'running'

以下名称仅用于内部状态机。

状态：idle · playing · playing.running · playing.paused

事件：PAGE.SET · PAGE.PREV · PAGE.NEXT · AUTOPLAY.START · AUTOPLAY.STOP · AUTOPLAY.PAUSE · AUTOPLAY.RESUME · after.autoplay · WRAP.SETTLE · DRAG.START · DRAG.MOVE · DRAG.END · PRESS.START · PRESS.END

判据：isLastPauseSource · canAdvance · hasAutoplay · canPress

connect API ​

getXxxProps() 返回对应部件的宿主属性。

成员类型说明
pagenumber当前页，0 基；恒在 [0, max(totalPages-1, 0)] 内，slideCount 减小后也能读到可用的值。
totalPagesnumber
slideCountnumber归一化后的条目总数（负数 / 小数 / 未提供都已收敛为非负整数）。
slidesPerPagenumber
slidesPerMovenumber
orientationOrientation
slideRange{ start: number, end: number }当前页显示的条目下标区间，0 基闭区间；没有条目时 end < start。
pageSnapPointsnumber[]每一页的首张下标序列，长度即总页数。
canScrollPrevboolean
canScrollNextboolean
autoplayingboolean自动播放的计时进行中。
pausedboolean自动播放已开启但被暂停（悬停 / 焦点 / 调用方 / 看不见）。
autoplayStoppedboolean自动播放当前是否由用户停止：计时未进行（idle），或由调用方暂停。 与 paused 的差别在于它不计入悬停与焦点两路：这两路一离开即自动恢复， 若用它驱动播放 / 暂停开关的名字与图形，鼠标一碰按钮就会在两态之间跳动。
draggingboolean
isInView(index: number) => boolean
setPage(page: number) => void页码会被收敛进合法区间（loop 时回绕），越界入参不会写出越界的页。
goToPrev() => void
goToNext() => void
play() => void开始自动播放；autoplay prop 未提供正的间隔时无操作。
pause() => void暂停计时（来源记为 api），与悬停 / 焦点叠加计数。
resume() => void
getRootProps() => T['element']
getViewportProps() => T['element']
getListProps() => T['element']
getItemProps(props: CarouselItemProps) => T['element']
getPrevTriggerProps() => T['button']
getNextTriggerProps() => T['button']
getAutoplayTriggerProps() => T['button']播放 / 暂停开关。未配置自动播放（间隔为 0）时为原生 disabled。
getIndicatorGroupProps() => T['element']
getIndicatorProps(props: CarouselIndicatorProps) => T['button']

无障碍 ​

键盘 ​

规格出处：W3C APG

按键生效条件行为
ArrowRightorientation=horizontal，焦点在轮播内翻到下一页；rtl 下反向（走上一页）
ArrowLeftorientation=horizontal，焦点在轮播内翻到上一页；rtl 下反向（走下一页）
ArrowDownorientation=vertical，焦点在轮播内翻到下一页；横轨下不接管，放行给页面滚动
ArrowUporientation=vertical，焦点在轮播内翻到上一页；横轨下不接管，放行给页面滚动
Home焦点在轮播内跳到第一页
End焦点在轮播内跳到最后一页
Enter / Space焦点在上一张 / 下一张按钮上翻一页；由原生按钮的激活行为负责
Enter / Space焦点在指示点上跳到该指示点对应的页；由原生按钮的激活行为负责
Enter / Spaceheld on prev-trigger / next-trigger / autoplay-trigger / indicator, 该按钮未禁用按住期间该按钮投影 data-pressed，与指针 :active 同一副按压面；抬起、失焦或按住途中转禁用（翻到边界、关掉 loop、去掉 autoplay）撤下。翻页与播放 / 暂停照旧由这一次按键的原生激活承担
Tab / Shift+Tab任意时刻在两端按钮与各指示点之间逐个停靠；到端点后禁用的按钮自动脱序
方向键焦点在幻灯片内的输入控件上不接管：交还给控件自己做光标移动

ARIA ​

以下属性由 connect 生成。

部件属性值
rootaria-labellabel.root
rootaria-roledescriptionlabel.rootRoleDescription
rootrole'region'
viewportaria-atomic'false'
viewportaria-live'off' | 'polite'
itemaria-labellabel.item(index + 1, slideCount)
itemaria-roledescriptionlabel.itemRoleDescription
itemrole'group'
prev-triggeraria-controlsviewport 部件的 id
prev-triggeraria-labellabel.prevTrigger
next-triggeraria-controlsviewport 部件的 id
next-triggeraria-labellabel.nextTrigger
autoplay-triggeraria-controlsviewport 部件的 id
autoplay-triggeraria-labellabel.autoplayTriggerPlay | label.autoplayTriggerPause
indicator-grouparia-labellabel.indicatorGroup
indicator-grouprole'group'
indicatoraria-current'true' | 'false'
indicatoraria-labellabel.indicator(index + 1)

样式参考 ​

皮肤 ​

@xihan-ui/styles/carousel.css 按 [data-scope="carousel"][data-part="root"] 部件选择器书写，发布产物以挂载类 .xh-scope-carousel 代替其中的 data-scope（特异性相同），位于 xihan.components 与 xihan.motion 层。覆盖样式使用 xihan.overrides，部件选择器照常可用。

forced-colors: active 下另有一套规则：颜色交给系统，边框与状态标记改用系统色关键字。

数据属性 ​

由 connect 生成；条件不成立时不输出无值属性。

部件属性值
rootdata-autoplay''（条件成立时才出现）
rootdata-dragging''（条件成立时才出现）
rootdata-orientationprops.orientation
rootdata-paused''（条件成立时才出现）
viewportdata-dragging''（条件成立时才出现）
viewportdata-orientationprops.orientation
listdata-animating''（条件成立时才出现）
listdata-dragging''（条件成立时才出现）
listdata-effectprops.effect
listdata-orientationprops.orientation
listdata-snapped''（条件成立时才出现）
itemdata-indexString(index)
itemdata-inview''（条件成立时才出现）
itemdata-orientationprops.orientation
prev-triggerdata-disabled''（条件成立时才出现）
prev-triggerdata-orientationprops.orientation
prev-triggerdata-pressed''（条件成立时才出现）
prev-triggerdata-xh-action-control''
prev-triggerdata-xh-action-display'always'
prev-triggerdata-xh-action-profile'floating'
prev-triggerdata-xh-action-sizeprops.size
prev-triggerdata-xh-liquid''
prev-triggerdata-xh-material'frosted'
next-triggerdata-disabled''（条件成立时才出现）
next-triggerdata-orientationprops.orientation
next-triggerdata-pressed''（条件成立时才出现）
next-triggerdata-xh-action-control''
next-triggerdata-xh-action-display'always'
next-triggerdata-xh-action-profile'floating'
next-triggerdata-xh-action-sizeprops.size
next-triggerdata-xh-liquid''
next-triggerdata-xh-material'frosted'
autoplay-triggerdata-disabled''（条件成立时才出现）
autoplay-triggerdata-pressed''（条件成立时才出现）
autoplay-triggerdata-state'paused' | 'running'
autoplay-triggerdata-xh-action-control''
autoplay-triggerdata-xh-action-display'always'
autoplay-triggerdata-xh-action-profile'floating'
autoplay-triggerdata-xh-action-sizeprops.size
autoplay-triggerdata-xh-liquid''
autoplay-triggerdata-xh-material'frosted'
indicator-groupdata-orientationprops.orientation
indicator-groupdata-xh-liquid''
indicatordata-current''（条件成立时才出现）
indicatordata-indexString(index)
indicatordata-pressed''（条件成立时才出现）

CSS 变量 ​

本组件公开覆盖槽由独立皮肤的实际消费位生成；默认来源、作用部件和状态均与 CSS 同源。

变量部件CSS 属性状态默认来源说明
--xh-carousel-control-insetautoplay-trigger
indicator-group
next-trigger
prev-trigger
root		inset-block-end
inset-block-start
inset-inline-end
inset-inline-start		default
orientation=vertical		--xh-space-3carousel 的 autoplay-trigger、indicator-group、next-trigger、prev-trigger、root 部件 inset-block-end、inset-block-start、inset-inline-end、inset-inline-start 覆盖槽。
--xh-carousel-durationitem
list		transition
transition-duration		default
effect=fade		--xh-motion-duration-slidecarousel 的 item、list 部件 transition、transition-duration 覆盖槽。
--xh-carousel-easeitem
list		transition
transition-timing-function		default
effect=fade		--xh-motion-ease-slidecarousel 的 item、list 部件 transition、transition-timing-function 覆盖槽。
--xh-carousel-icon-sizeautoplay-trigger
next-trigger
prev-trigger		--xh-icon-sizedefault--xh-_carousel-trigger-glyphcarousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 --xh-icon-size 覆盖槽。
--xh-carousel-indicator-bgindicatorbackground@media (pointer: coarse)
default		--xh-bg-subtle-hover-opaquecarousel 的 indicator 部件 background 覆盖槽。
--xh-carousel-indicator-bg-activeindicatorbackground@media (pointer: coarse)
current
is(:active, [data-pressed])
not([data-current])
pressed		--xh-fg-defaultcarousel 的 indicator 部件 background 覆盖槽。
--xh-carousel-indicator-bg-hoverindicatorbackgroundcurrent
hover
not([data-current])		--xh-fg-mutedcarousel 的 indicator 部件 background 覆盖槽。
--xh-carousel-indicator-bg-selectedindicator
root		background@media (pointer: coarse)
autoplay
current
not([data-autoplay], [data-paused])
paused		--xh-bg-brandcarousel 的 indicator、root 部件 background 覆盖槽。
--xh-carousel-indicator-bg-selected-activeindicatorbackground@media (pointer: coarse)
current
is(:active, [data-pressed])
pressed		--xh-bg-brand-activecarousel 的 indicator 部件 background 覆盖槽。
--xh-carousel-indicator-bg-trackindicator
root		background@media (pointer: coarse)
autoplay
current
paused		--xh-bg-brand-subtlecarousel 的 indicator、root 部件 background 覆盖槽。
--xh-carousel-indicator-fg-selectedindicator
root		colorautoplay
current
not([data-autoplay], [data-paused])
paused		--xh-fg-on-brandcarousel 的 indicator、root 部件 color 覆盖槽。
--xh-carousel-indicator-gapindicator-groupgapdefault--xh-space-2carousel 的 indicator-group 部件 gap 覆盖槽。
--xh-carousel-indicator-group-pindicator-grouppaddingmaterial=liquid
where([data-material='liquid'])
xh-liquid		--xh-space-2carousel 的 indicator-group 部件 padding 覆盖槽。
--xh-carousel-indicator-group-radiusindicator-groupborder-radiusmaterial=liquid
where([data-material='liquid'])
xh-liquid		--xh-shape-pillcarousel 的 indicator-group 部件 border-radius 覆盖槽。
--xh-carousel-indicator-insetindicator-groupinset-block-endorientation=horizontal--xh-space-3carousel 的 indicator-group 部件 inset-block-end 覆盖槽。
--xh-carousel-indicator-radiusindicatorborder-radius@media (pointer: coarse)
default		--xh-shape-circlecarousel 的 indicator 部件 border-radius 覆盖槽。
--xh-carousel-indicator-radius-currentindicator
root		border-radius
clip-path		@keyframes xh-carousel-indicator-progress
@media (pointer: coarse)
autoplay
current
paused		--xh-shape-pillcarousel 的 indicator、root 部件 border-radius、clip-path 覆盖槽。
--xh-carousel-indicator-sizeindicator
indicator-group
root		block-size
inline-size
inset-block
inset-inline		@media (pointer: coarse)
autoplay
current
default
orientation=vertical
paused		--xh-space-1_5carousel 的 indicator、indicator-group、root 部件 block-size、inline-size、inset-block、inset-inline 覆盖槽。
--xh-carousel-indicator-size-currentindicator
indicator-group
root		block-size
inline-size		@media (pointer: coarse)
autoplay
current
orientation=vertical
paused		--xh-space-5carousel 的 indicator、indicator-group、root 部件 block-size、inline-size 覆盖槽。
--xh-carousel-indicator-target-sizeindicator
root		min-block-size
min-inline-size		@media (pointer: coarse)
autoplay
current
hover
is(:active, [data-pressed])
not([data-autoplay], [data-paused])
not([data-current])
paused
pressed		44pxcarousel 的 indicator、root 部件 min-block-size、min-inline-size 覆盖槽。
--xh-carousel-indicator-thicknessindicator
indicator-group
root		block-size
inline-size
inset-block
inset-inline		@media (pointer: coarse)
autoplay
current
default
orientation=vertical
paused		--xh-carousel-indicator-sizecarousel 的 indicator、indicator-group、root 部件 block-size、inline-size、inset-block、inset-inline 覆盖槽。
--xh-carousel-trigger-bgautoplay-trigger
next-trigger
prev-trigger		--xh-ink-surface
background-color		default
disabled
focus-visible
xh-ink-surface		--xh-_material-bg
--xh-_material-bg-focus		carousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 --xh-ink-surface、background-color 覆盖槽。
--xh-carousel-trigger-bg-activeautoplay-trigger
next-trigger
prev-trigger		background-colordisabled
is(:active, [data-pressed])
loading
not([data-disabled])
not([data-loading])
pressed		--xh-_material-bg-pressed
--xh-bg-subtle-hover-opaque		carousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 background-color 覆盖槽。
--xh-carousel-trigger-bg-hoverautoplay-trigger
next-trigger
prev-trigger		background-colordisabled
hover
loading
not([data-disabled])
not([data-loading])		--xh-_material-bg-hover
--xh-bg-subtle-opaque		carousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 background-color 覆盖槽。
--xh-carousel-trigger-borderautoplay-trigger
next-trigger
prev-trigger		border
border-color		default
disabled
focus-visible
hover
is(:active, [data-pressed])
loading
not([data-disabled])
not([data-loading])
pressed		--xh-_material-bordercarousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 border、border-color 覆盖槽。
--xh-carousel-trigger-fgautoplay-trigger
next-trigger
prev-trigger		colordefault
disabled
focus-visible
hover
is(:active, [data-pressed])
loading
not([data-disabled])
not([data-loading])
pressed		--xh-_material-fgcarousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 color 覆盖槽。
--xh-carousel-trigger-radiusautoplay-trigger
next-trigger
prev-trigger		border-radiusdefault--xh-_action-profile-radiuscarousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 border-radius 覆盖槽。
--xh-carousel-trigger-shadowautoplay-trigger
next-trigger
prev-trigger		box-shadowdefault
disabled
focus-visible
is(:active, [data-pressed])
is(:hover, [data-loading])
loading
not([data-disabled])
not([data-loading])
pressed		--xh-_material-shadowcarousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 box-shadow 覆盖槽。
--xh-carousel-trigger-shadow-hoverautoplay-trigger
next-trigger
prev-trigger		box-shadowdisabled
hover
loading
not([data-disabled])
not([data-loading])		--xh-_material-shadowcarousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 box-shadow 覆盖槽。
--xh-carousel-trigger-sizeautoplay-trigger
next-trigger
prev-trigger		block-size
inline-size
min-inline-size		default
xh-action-profile=floating		--xh-_carousel-trigger-sizecarousel 的 autoplay-trigger、next-trigger、prev-trigger 部件 block-size、inline-size、min-inline-size 覆盖槽。
--xh-carousel-viewport-radiusviewportborder-radiusdefault--xh-shape-surfacecarousel 的 viewport 部件 border-radius 覆盖槽。

动效 ​

动效角色：按压 · 状态 · 指示与换位 · 导航（见动效规范）。

可覆盖的动效槽：--xh-carousel-duration · --xh-carousel-ease。

关键帧 xh-carousel-indicator-progress 随皮肤自带，不引用别处文件里的名字；background-color · block-size · border-color · box-shadow · inline-size · opacity · scale · translate · visibility 走 transition 过渡。时长与缓动读动效令牌，改令牌即改全局节奏。

皮肤之外还有一段：内核按组件所在的作用域判断减弱动效（最近的 data-motion、应用级覆盖、系统偏好），据此决定要不要动。

prefers-reduced-motion: reduce 下本组件另有降级规则；内核驱动的那段不经令牌层，由内核按元素判断后自行降级。

响应式 ​

皮肤另按输入能力分档：pointer: coarse：同一份皮肤在触屏与带指针的设备上不一样，与视口宽度无关。

RTL ​

皮肤用逻辑属性排布（inline-start 一族），dir="rtl" 下自动镜像；另有按 dir 分支的规则。

Released under The MIT License

Copyright ©2021-Present XiHanFun and contributors.