sjaakp / yii2-collapse
Collapse and Accordion widgets for the Yii 2.0 framework
Installs: 10 964
Dependents: 0
Suggesters: 0
Security: 0
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Type:yii2-extension
Requires
- yiisoft/yii2: *
This package is auto-updated.
Last update: 2024-11-29 15:04:26 UTC
README
Yii2-collapse offers three widgets for the Yii 2.0 PHP Framework:
-
Collapse renders a Bootstrap Collapse element with a toggle link and a collapsible panel;
-
CollapseGroup two or more Collapses of which only one can be open;
-
Accordion renders a Bootstrap Accordion element with several panels of which only one can be open. An Accordion essentially is a kind of CollapseGroup. The difference is that the Collapse's are all direct children of the surrounding element.
All three widgets can be used with either Bootstrap 3.x or Bootstrap 4.x.
A demonstration of the widgets is here.
Installation
Install yii2-collapse in the usual way with Composer.
Add the following to the require section of your composer.json
file:
"sjaakp/yii2-collapse": "*"
or run:
composer require sjaakp/yii2-collapse
You can manually install yii2-collapse by downloading the source in ZIP-format.
Using the Collapse widget
Using the Collapse widget in an Yii2 view file can be as simple as:
<?php
use sjaakp\collapse\Collapse;
?>
...
<?php Collapse::begin('Details') ?>
<h4>Some more details</h4>
<p>The first detail... </p>
<?php Collapse::end() ?>
...
The HTML between begin()
and end()
can be as complicated as you like.
Instead of initializing Collapse with the label text, it can also be
initialized with an array
of several options, like:
<?php
use sjaakp\collapse\Collapse;
?>
...
<?php Collapse::begin([
'label' => 'Details',
'options' => [ 'class' => 'bg-info' ], // give the panel an extra class
'open' => true // initially open the panel
]) ?>
<h4>Some more details</h4>
<p>The first detail... </p>
<?php Collapse::end() ?>
...
Using the CollapseGroup widget
The CollapseGroup widget can be used like:
<?php
use sjaakp\collapse\CollapseGroup;
?>
...
<?php CollapseGroup::begin([/* options */]) ?>
...
<?php CollapseGroup::beginCollapse('Details) ?>
<h4>Some details</h4>
<p>The first detail... </p>
<?php CollapseGroup::endCollapse() ?>
...
<?php CollapseGroup::beginCollapse('More details) ?>
<h4>Some more details</h4>
<p>The first detail... </p>
<?php CollapseGroup::endCollapse() ?>
...
<?php CollapseGroup::end() ?>
...
beginCollapse()
can also be initiallized with an array of Collapse options.
Using the Accordion widget
Use the Accordion widget as follows:
<?php
use sjaakp\collapse\Accordion;
?>
...
<?php Accordion::begin('Details') ?>
<h4>Some details</h4>
<p>The first detail... </p>
<?php Accordion::next('More details') ?>
<h4>Some more details</h4>
<p>The tenth detail... </p>
<?php Accordion::next('Even more details') ?>
<h4>Even some more details</h4>
<p>The twentieth detail... </p>
<?php Accordion::end() ?>
...
As with Collapse, Accordion can also be
initialized with an array
of several options.
Common options
Collapse and Accordion (but not CollapseGroup) both have the following options:
- label
string
The text of the (first) label. - encode
bool
Whether to HTML-encode the label(s). Default:true
. - open
bool
Whether the (first) panel is initially open. Default:false
(Collapse),true
(Accordion). - toggleOptions
array
HTML options for the toggle link(s). Default:['class' => 'btn-collapse']
. This class styles the toggle link with a triangle.
Collapse option
- options
array
HTML options for the panel.'tag'
is a special option, defining the HTML-tag. If it is not set, the HTML-tag is'div'
CollapseGroup option
- options
array
HTML options for the surrounding element.'tag'
is a special option, defining the HTML-tag. If it is not set, the HTML-tag is'div'
Accordion options
-
options
array
HTML options for the surrounding element.'tag'
is a special option, defining the HTML-tag. If it is not set, the HTML-tag is'div'
-
panelOptions
array
HTML options for the panels.