Class yii\bootstrap5\Progress
| Inheritance | yii\ |
|---|---|
| Uses Traits | yii\ |
| Source Code | https://github.com/yiisoft/yii2-bootstrap5/blob/master/src/Progress.php |
Progress renders a bootstrap progress bar component.
For example,
// default with label
echo Progress::widget([
'percent' => 60,
'label' => 'test'
]);
// or
echo Progress::widget([
'bars' => [
['percent' => 60, 'label' => 'test']
]
]);
// styled
echo Progress::widget([
'percent' => 65,
'barOptions' => ['class' => 'bg-danger']
]);
// or
echo Progress::widget([
'bars' => [
['percent' => 65, 'options' => ['class' => 'bg-danger']]
]
]);
// striped
echo Progress::widget([
'percent' => 70,
'barOptions' => ['class' => ['bg-warning', 'progress-bar-striped']]
]);
// or
echo Progress::widget([
'bars' => [
['percent' => 70, 'options' => ['class' => ['bg-warning', 'progress-bar-striped']]]
]
]);
// striped animated
echo Progress::widget([
'percent' => 70,
'barOptions' => ['class' => ['bg-success', 'progress-bar-animated', 'progress-bar-striped']]
]);
// or
echo Progress::widget([
'bars' => [
['percent' => 70, 'options' => ['class' => ['bg-success', 'progress-bar-animated', 'progress-bar-striped']]]
]
]);
// stacked bars
echo Progress::widget([
'bars' => [
['percent' => 30, 'options' => ['class' => 'bg-danger']],
['percent' => 30, 'label' => 'test', 'options' => ['class' => 'bg-success']],
['percent' => 35, 'options' => ['class' => 'bg-warning']],
]
]);
See also https://getbootstrap.com/docs/5.1/components/progress/.
Public Properties
| Property | Type | Description | Defined By |
|---|---|---|---|
| $barOptions | array | The HTML attributes of the bar. | yii\ |
| $bars | array | A set of bars that are stacked together to form a single progress bar. | yii\ |
| $clientEvents | array | The event handlers for the underlying Bootstrap JS plugin. | yii\ |
| $clientOptions | array|false | The options for the underlying Bootstrap JS plugin/component. | yii\ |
| $label | string | The button label. | yii\ |
| $options | array | The HTML attributes for the widget container tag. | yii\ |
| $percent | integer | The amount of progress as a percentage. | yii\ |
Public Methods
| Method | Description | Defined By |
|---|---|---|
| init() | yii\ |
|
| run() | yii\ |
Protected Methods
| Method | Description | Defined By |
|---|---|---|
| registerClientEvents() | Registers JS event handlers that are listed in $clientEvents. | yii\ |
| registerPlugin() | Registers a specific Bootstrap plugin/component and the related events. | yii\ |
| renderBar() | Generates a progress bar. | yii\ |
| renderProgress() | Renders the progress. | yii\ |
Property Details
The HTML attributes of the bar. This property will only be considered if $bars is empty
See also \
A set of bars that are stacked together to form a single progress bar. Each bar is an array of the following structure:
[
// required, the amount of progress as a percentage.
'percent' => 30,
// optional, the label to be displayed on the bar
'label' => '30%',
// optional, array, additional HTML attributes for the bar tag
'options' => [],
]
The button label. This property will only be considered if $bars is empty
Method Details
| public void init ( ) |
public function init(): void
{
parent::init();
Html::addCssClass($this->options, [
'widget' => 'progress',
]);
}
Defined in:
yii\
Registers JS event handlers that are listed in $clientEvents.
| protected void registerClientEvents ( ?string $name = null ) | ||
| $name | ?string | |
protected function registerClientEvents(?string $name = null): void
{
if (!empty($this->clientEvents)) {
$id = $this->options['id'];
$js = [];
$appendix = ($name === 'dropdown') ? '.parentElement' : '';
foreach ($this->clientEvents as $event => $handler) {
$js[] = "document.getElementById('$id')$appendix.addEventListener('$event', $handler);";
}
$this->getView()->registerJs(implode("\n" , $js));
}
}
Defined in:
yii\
Registers a specific Bootstrap plugin/component and the related events.
| protected void registerPlugin ( string $name ) | ||
| $name | string |
The name of the Bootstrap plugin |
protected function registerPlugin(string $name): void
{
/**
* @see https://github.com/twbs/bootstrap/blob/v5.2.0/js/index.esm.js
*/
$jsPlugins = [
'alert',
'button',
'carousel',
'collapse',
'dropdown',
'modal',
'offcanvas',
'popover',
'scrollspy',
'tab',
'toast',
'tooltip',
];
if (in_array($name, $jsPlugins, true)) {
$view = $this->getView();
BootstrapPluginAsset::register($view);
// 'popover', 'toast' and 'tooltip' plugins not activates via data attributes
if ($this->clientOptions !== false || in_array($name, ['popover', 'toast', 'tooltip'], true)) {
$name = ucfirst($name);
$id = $this->options['id'];
$options = empty($this->clientOptions) ? '{}' : Json::htmlEncode($this->clientOptions);
$view->registerJs("(new bootstrap.$name('#$id', $options));");
}
$this->registerClientEvents($name);
}
}
Generates a progress bar.
| protected string renderBar ( integer $percent, string $label = '', array $options = [] ) | ||
| $percent | integer |
The percentage of the bar |
| $label | string |
Optional, the label to display at the bar |
| $options | array |
The HTML attributes of the bar |
| return | string |
The rendering result. |
|---|---|---|
protected function renderBar(int $percent, string $label = '', array $options = []): string
{
$options = array_merge($options, [
'role' => 'progressbar',
'aria' => [
'valuenow' => $percent,
'valuemin' => 0,
'valuemax' => 100,
],
]);
Html::addCssClass($options, [
'widget' => 'progress-bar',
]);
Html::addCssStyle($options, [
'width' => $percent . '%',
], true);
return Html::tag('div', $label, $options);
}
Renders the progress.
| protected string renderProgress ( ) | ||
| return | string |
The rendering result. |
|---|---|---|
| throws | \ |
if the "percent" option is not set in a stacked progress bar. |
| throws | Exception | |
protected function renderProgress(): string
{
$out = Html::beginTag('div', $this->options) . "\n" ;
if (empty($this->bars)) {
$this->bars = [
[
'label' => $this->label,
'percent' => $this->percent,
'options' => $this->barOptions,
],
];
}
$bars = [];
foreach ($this->bars as $bar) {
$label = ArrayHelper::getValue($bar, 'label', '');
if (!isset($bar['percent'])) {
throw new InvalidConfigException("The 'percent' option is required.");
}
$options = ArrayHelper::getValue($bar, 'options', []);
$bars[] = $this->renderBar($bar['percent'], $label, $options);
}
$out .= implode("\n" , $bars) . "\n" ;
$out .= Html::endTag('div');
return $out;
}