К содержимому

SusPagination

SusPagination

Полоса страниц для длинных списков — текущая страница, видимое окно, опционально first/last.

Пакет

SusKit · Атомы (коммерческий)

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

SusKit · Atoms

Свойства

ИмяТипПо умолчанию
LengthProp<int>1v-model
ModelProp<int>1v-model
TotalVisibleProp<int>5v-model
ShowFirstLastProp<bool>falsev-model
DisabledProp<bool>falsev-model
CircleProp<bool>falsev-model
DensityProp<string>"default"v-model

Слоты

Слотов нет.

События

ИмяПолеPayload
PageChangedOnPageChangedint

Хуки стиля

Контракт USS-классов — внешний вид переопределяется без правки C#. Состояния переключаются этими классами:

  • keyboard-focus
  • sus-pagination
  • sus-pagination__btn
  • sus-pagination__page
  • sus-pagination__page--active
  • sus-pagination__pages
  • sus-pagination--circle
  • sus-pagination--density-comfortable
  • sus-pagination--density-compact
  • sus-pagination--disabled

Использование

xml
<template>
  <sus:SusPagination :Length="PageCount.Value"
                     :Model="Page.Value"
                     TotalVisible="5"
                     ShowFirstLast="true"
                     @page-changed="OnPage" />
</template>

<script>
public Prop<int> PageCount = new(12);
public Prop<int> Page = new(1);
void OnPage(int page) { Page.Value = page; }
</script>
csharp
var pages = new SusPagination();
pages.Length.Value = 20;
pages.Model.Value = 1;
pages.TotalVisible.Value = 5;
pages.Circle.Value = true;
pages.OnPageChanged += page => { /* … */ };

Заметки

  • Length — общее количество страниц; Model — активная страница (нумерация с 1).
  • Density: compact · default · comfortable.