Chip
Chips are a very convenient way to show short snippets of information.
They are mostly used to display tags or contact information.
Use Chip to display tags
<?= \macgyer\yii2materializecss\widgets\Chip::widget([
'content' => 'Tag content'
]) ?>
<div id="w0" class="chip">Tag content</div>
Rendered result
Enable tag removal
If you specify an icon inside the chip markup, Materialize will automatically recognize this icon a delete
trigger for the chip element.
To show the default delete icon, simply set the property renderIcon
to
true
.
<?= \macgyer\yii2materializecss\widgets\Chip::widget([
'content' => 'Tag content with close icon',
'renderIcon' => true,
]) ?>
<div id="w1" class="chip">
Tag content
<i id="w2" class="material-icons">close</i>
</div>
Rendered result
Configuring the icon
Probably for most uses cases the default icon will do, there is always a time where you want to modify the
close icon.
To render the icon, yii2-materializecss uses its own
Icon class.
Please refer to the documentation for detailed information on how icons are rendered.
Use Chip to display contact information
<?= \macgyer\yii2materializecss\widgets\StaticChip::widget([
'content' => 'test@example.org',
'imageOptions' => [
'src' => '/img/sample-01-square-160.jpg'
],
]) ?>
<div id="w9" class="chip">
<img src="/img/sample-01-square-160.jpg" alt="">
test@example.org
</div>
Rendered result
Photo by Ernest Flowers @ Unsplash