Документация для разработчиков
Темная тема

Счётчики

Расширение обновлено до ES6.

Подключение

Подключение на PHP-странице

\Bitrix\Main\UI\Extension::load("ui.cnt");
// or
\Bitrix\Main\UI\Extension::load("ui.counter");

Базовый шаблон

Подключение шаблона:

<!-- .ui-counter > .ui-counter-inner -->
<div class="ui-counter">
    <div class="ui-counter-inner">50+</div>
</div>

Основные параметры

Опция value

let myCounter = new BX.UI.Counter({
    value: 50
});

// or

myCounter.setValue(50)

Метод для обновления значения value.

myCounter.update();

Максимальное значение maxValue {number}

По умолчанию 99. При превышении значением value заданного значения maxValue будет отображено значение второго со знаком +. Установите в качестве значения false что бы отключить лимит.

let myCounter = new BX.UI.Counter({
    maxValue: 99
});

// or

myCounter.setMaxValue(99)

Анимация animation {boolean}

По умолчанию false.

let myCounter = new BX.UI.Counter({
    animation: true
});

Метод show()

myCounter.show();

Метод hide()

myCounter.hide();

Размеры

Установление размеров size {string}

let myCounter = new BX.UI.Counter({
    size: BX.UI.Counter.Size.LARGE
});

// or

myCounter.setSize(BX.UI.Counter.Size.LARGE)

LARGE

Модификатор .ui-counter-lg.

BX.UI.Counter.Size.LARGE 
<!-- .ui-counter.ui-counter-lg > .ui-counter-inner -->
<div class="ui-counter ui-counter-lg">
      <div class="ui-counter-inner">50+</div>
</div>

MEDIUM

Модификатор .ui-counter-md. Размер по умолчанию.

BX.UI.Counter.Size.MEDIUM 
<!-- .ui-counter.ui-counter-md > .ui-counter-inner -->
<div class="ui-counter ui-counter-md">
      <div class="ui-counter-inner">50+</div>
</div>

SMALL

Модификатор .ui-counter-sm.

BX.UI.Counter.Size.SMALL 
<!-- .ui-counter.ui-counter-sm > .ui-counter-inner -->
<div class="ui-counter ui-counter-sm">
      <div class="ui-counter-inner">50+</div>
</div>

Цвета

Установка цвета.

let myCounter = new BX.UI.Counter({
    color: BX.UI.Counter.Color.DANGER
});

// or

myCounter.setColor(BX.UI.Counter.Color.DANGER)

PRIMARY

Модификатор .ui-counter-primary.

BX.UI.Counter.Color.PRIMARY
<!-- .ui-counter.ui-counter-primary > .ui-counter-inner -->
<div class="ui-counter ui-counter-primary">
    <div class="ui-counter-inner">50+</div>
</div>

SUCCESS

Модификатор .ui-counter-success.

BX.UI.Counter.Color.SUCCESS
<!-- .ui-counter.ui-counter-success > .ui-counter-inner -->
<div class="ui-counter ui-counter-success">
    <div class="ui-counter-inner">50+</div>
</div>

DANGER

Модификатор .ui-counter-danger.

BX.UI.Counter.Color.DANGER
<!-- .ui-counter.ui-counter-danger > .ui-counter-inner -->
<div class="ui-counter ui-counter-danger">
    <div class="ui-counter-inner">50+</div>
</div>

GRAY

Модификатор .ui-counter-gray.

BX.UI.Counter.Color.GRAY
<!-- .ui-counter.ui-counter-gray > .ui-counter-inner -->
<div class="ui-counter ui-counter-gray">
    <div class="ui-counter-inner">50+</div>
</div>

LIGHT

Модификатор .ui-counter-light.

BX.UI.Counter.Color.LIGHT
<!-- .ui-counter.ui-counter-light > .ui-counter-inner -->
<div class="ui-counter ui-counter-light">
    <div class="ui-counter-inner">50+</div>
</div>

WHITE

Модификатор .ui-counter-white.

BX.UI.Counter.Color.WHITE
<!-- .ui-counter.ui-counter-white > .ui-counter-inner -->
<div class="ui-counter ui-counter-white">
    <div class="ui-counter-inner">50+</div>
</div>

DARK

Модификатор .ui-counter-dark.

BX.UI.Counter.Color.DARK
<!-- .ui-counter.ui-counter-dark > .ui-counter-inner -->
<div class="ui-counter ui-counter-dark">
    <div class="ui-counter-inner">50+</div>
</div>


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2022, «1С-Битрикс», 2022
Наверх