SusCarousel

Слайдер страниц — стрелки, delimiters и Items + индекс Model.

Пакет

SusKit · Молекулы (коммерческий)

Открыть в песочнице

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

Слоты

Слотов нет.

События

Имя	Поле	Payload
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	Элементы обвязки (chrome)
Cycle	Переход от последнего к первому по кругу