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

【问题标题】：Adding materializecss chip with styling--how to get styling?添加带有样式的materializecss芯片-如何获得样式？
【发布时间】：2019-02-25 13:39:07
【问题描述】：

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

很遗憾，为了支持 Materializecss 键盘功能，我需要对其进行返工。以前，我使用 hack 自己添加 div 并给它们一个类“芯片”。现在我正在使用materialize addChip 函数，该函数仅被说明为具有“标签”和“数据”。

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

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

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

有人知道吗？

【问题讨论】：

你能再解释一下这个场景吗？比如到底是怎么装筹码的？
所以之前（在我的 hack 中）我在做 $('tagDiv').html('
blah
');由于我现在正在执行 508 合规性并在测试中完全使用键盘进行导航，因此我需要它停止在标签上，以便您可以删除它们。上面的 hack 并没有这样做——它只支持鼠标编辑——但是如果你使用 addChip 方法，materialize 框架会这样做。这有帮助吗？

标签： javascript css materialize

【解决方案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

【讨论】：