Counters

Extension updated to ES6.

Connection

Connecting at PHP page

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

Base template

Template connection:

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

Main parameters

'value' option

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

// or

myCounter.setValue(50)

Method to update 'value'.

myCounter.update();

Maximum value: maxValue {number}

By default: 99. The value exceeding the specified maxValue shows the max value with '+. Set as false to disable the limit.

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

// or

myCounter.setMaxValue(99)

Animation {boolean}

Default value: false.

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

Method show()

myCounter.show();

Methi hide()

myCounter.hide();

Dimensions

Configuring dimensions: size {string}

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

// or

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

LARGE

Modifier: .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

Modifier: .ui-counter-md. Default dimension.

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

Modifier: .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>

Colours

Configuring colours.

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

// or

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

PRIMARY

Modifier: .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

Modifier: .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

Modifier: .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

Modifier: .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

Modifier: .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

Modifier: .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

Modifier: .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>