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

Tag content
Tag #2
Another tag

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

Tag content with close icon close
Tag #2 close
Another tag close

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

test@example.org

Photo by Ernest Flowers @ Unsplash