SusCarousel

幻灯片分页器 —— 箭头、分隔指示器，以及 Items + 索引 Model。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
Model	Prop<int>	0	v-model
ShowArrows	Prop<bool>	true	v-model
ShowDelimiters	Prop<bool>	true	v-model
Cycle	Prop<bool>	true	v-model
Disabled	Prop<bool>	false	v-model

插槽

没有插槽。

事件

名称	字段	载荷
Change	OnChange	int

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• sus-carousel
• sus-carousel__arrow
• sus-carousel__arrow--next
• sus-carousel__arrow--prev
• sus-carousel__art
• sus-carousel__art-scrim
• sus-carousel__art-text
• sus-carousel__dot
• sus-carousel__dot--active
• sus-carousel__dots
• sus-carousel__slide
• sus-carousel__slide--active
• sus-carousel__slide--art
• sus-carousel__slide--danger
• sus-carousel__slide--info
• sus-carousel__slide--primary
• sus-carousel__slide--secondary
• sus-carousel__slide--success
• sus-carousel__slide--warning
• sus-carousel__subtitle
• sus-carousel__title
• sus-carousel__viewport
• sus-carousel--disabled
• sus-carousel--show-arrows

用法

Items 在代码中设置（List<CarouselItem>）。每张幻灯片携带 Title，以及可选的 Subtitle / Color。

var carousel = new SusCarousel();
carousel.Items.Value = new List<SusCarousel.CarouselItem>
{
    new() { Title = "Knight", Subtitle = "Starter skin", Color = "primary" },
    new() { Title = "Mage", Subtitle = "Arcane set", Color = "info" },
    new() { Title = "Rogue", Subtitle = "Shadow set", Color = "success" },
};
carousel.Model.Value = 0;
carousel.ShowArrows.Value = true;
carousel.ShowDelimiters.Value = true;
carousel.Cycle.Value = true;
carousel.OnChange += index => { /* … */ };

<template>
  <sus:SusCarousel :Model="Slide.Value"
                   :ShowArrows="ShowArrows.Value"
                   :Cycle="Cycle.Value"
                   @change="OnSlide" />
</template>

<script>
public Prop<int> Slide = new(0);
public Prop<bool> ShowArrows = new(true);
public Prop<bool> Cycle = new(true);
void OnSlide(int index) { Slide.Value = index; }
// Populate Items in code.
</script>

Prop	Role
Items	List<CarouselItem> —— 幻灯片
Model	当前幻灯片索引
ShowArrows / ShowDelimiters	界面元素（箭头 / 分隔指示器）
Cycle	从最后一张循环回第一张