Adding materializecss chip with styling--how to get styling?

Question

I have a requirement to use tags on a web page. No problem--Materializecss handles that. However, my tags can be any of several types, so each tag can be of a different color to indicate the type. Again, no problem.

Unfortunately, to support Materializecss keyboard functions, I need to rework it. Before, I was using a hack to just add the divs myself and giving them a class "chip". Now I'm using the materialize addChip function, which is only illustrated to have 'tag' and 'data'.

How do I add the color and textcolor classes to those chips? It seems like a simple thing. The javascript that creates the tag is:

instance.addChip({ tag: 'tag text', });

I'd like to know if there's something like: instance.addChip({ tag: 'tag text', color: 'teal', text-color: 'white-text', });

Anyone know?

Answer 1

So, my example was that I'm adding a tag from a form--so there's easier ways to do this. However, this is how to add the chip, adjust the styling, and add custom attributes so that you have better control of the way the tag is displayed. You can use this pattern to keep track of pictures and custom fields for database primary keys and stuff.

//get the instance
var chipInstance = M.Chips.getInstance($('.chips'));

//add the chip.  id is generated elsewhere and is the primary key for database
chipInstance.addChip({
    tag: 'text',
    textColor: 'white-text',
    tagColor: 'red',
    tagId: id,
});

//get the data
var dataArray = chipInstance.chipsData;
//last added data
var myData = dataArray[dataArray.length - 1];

//last added chip div
var allChips = $(chipInstance.$chips);
//get the last chip (the one we just added)
var myChip = allChips.last()[0];  //the data is in the 0th position

$(myChip).addClass(myData["tagColor"]); //add the 'red' class
$(myChip).addClass(myData["textColor"]); //add the 'white-text' class

//need to preserve this because it will be the database key to handle any deletes.
$(myChip).attr('data-id', myData["tagId"]); 
$(myChip).attr('title', 'more title text'); //adjust attributes