Search code examples
htmlmeteormaterialize

Can you easily change the Chip color in Materialize?

I'm wanting to set the Chip color dynamically in my view in Materialize, but didn't see anything specifically in the documentation to do it. is there a simple way? If not, is it planned?

Thanks,

Solution

  • Yes you can, you need to use the css color helper classes.

    Materialize-Color

    Note: Materialize has jquery as dependency therefore I am giving a jquery answer:

    Suppose you have html like this:

    <div id='testChip' class="chip">
    Tag<i class="close material-icons">close</i>
</div>

    The following JS will change the chip color (for that one chip):

    $('#testChip').addClass("teal");

    For all chips:

    $('.chip').addClass('teal');

    If the helper classes colors don't suit your needs create your own color helper and follow the same principle as above:

    .myBlackColor {
    background-color: #000;
}