Utility Components

getProgress

Creates a progress/loader component.

Available Parameters

rating

Float | The progress value. Must be a number between 0 and 1

options

Customization options such as track_color and progress_color

Example

// Equal to 80% of completion; 1 Indicates 100%
$completion = 0.8;

// Indicates the empty part of the bar
$options['track_color'] = '#FAFAFA';
// Filled part of the bar
$options['progress_color'] = '7ED321';
// Progress bar height
$options['height'] = '5'

$this->getProgress($completion, $options))

getFullPageLoader

Creates a loader gif component. Can have a colored overlay and text.

Available Parameters

color

String | Default: #000000 | The gif color

text

String | Default: false | The loader text

Example

$this->getFullPageLoader('#FAFAFA', 'Loading...');

getRangeSlider

Creates a slider component. The essential options to pass are max_value, min_value and step. Those will control the basic behavior of the slider.

Often you will need to display the values of the slider without refreshing the page. Below you can see a basic example of how we can show the max, min and current value of the slider by binding a text field to the slider’s variable.

Available Parameters

content

Number | The current slider value

params

Array | Additional slider options such as max and min quantity and step

Example

// Create a basic slider
$this->getRangeslider(50, array(
    'min_value' => 0,
    'max_value' => 100,
    'step' => 1,
    'variable' => 'example_slider'
));

// Dynamically display slider value
$this->getRow(array(
    $this->getText('0', array('style' => 'slider-values')),
    $this->getText($defaultValue, array('variable' => 'example_slider', 'style' => 'slider-values-center')),
    $this->getText('100', array('style' => 'slider-values-right')),
), array('margin' => '0 30 10 30',));

getHairline

Creates a horizontal line separator component in a particular color.

Available Parameters

color

The line color

Example

$this->getHairline(#DADADA);