javascript - 添加带有样式的materializecss芯片——如何获得样式？

Question

我需要在网页上使用标签。没问题——Materializecss 会处理这个问题。但是，我的标签可以是多种类型中的任何一种，因此每个标签可以使用不同的颜色来指示类型。同样，没问题。

不幸的是，为了支持 Materializecss 键盘功能，我需要对其进行返工。之前，我使用 hack 来自己添加 div 并给它们一个类“chip”。现在我正在使用 materialize addChip 函数，该函数仅显示为具有“标签”和“数据”。

如何将颜色和文本颜色类添加到这些芯片中？这似乎是一件简单的事情。创建标签的 javascript 是:

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

我想知道是否有类似的东西: instance.addChip({ tag: 'tag text', color: 'teal', text-color: 'white-text', });

有人知道吗？

Answer 1

因此，我的示例是从表单中添加标签——因此有更简单的方法来执行此操作。然而，这是如何添加筹码、调整样式和添加自定义属性，以便您更好地控制标签的显示方式。您可以使用此模式来跟踪数据库主键和其他内容的图片和自定义字段。

//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