- class Atk4\Ui\ProgressBar
ProgressBar
ProgressBar is actually a quite simple element, but it can be made quite interactive along with
JsSse
.
Demo: https://ui.atk4.org/demos/interactive/progress.php
Basic Usage
- Atk4\Ui\ProgressBar::jsValue($value)
After adding a console to your Render Tree, you just need to set a callback:
// add progressbar showing 0 (out of 100)
$bar = ProgressBar::addTo($app);
// add with some other value of 20% and label
$bar2 = ProgressBar::addTo($app, [20, '% Battery']);
The value of the progress bar can be changed either before rendering, inside PHP, or after rendering with JavaScript:
$bar->value = 5; // sets this value instead of 0
Button::addTo($app, ['charge up the battery'])
->on('click', $bar2->jsValue(100));
Updating Progress in RealTime
You can use real-time element such as JsSse or Console (which relies on JsSse) to execute jsValue() of your progress bar and adjust the display value.
Demo: https://ui.atk4.org/demos/interactive/sse.php
Console
also implements method Console::send
so you can use it to send progress
updates of your progress-bar.