Question

我需要在网页上使用标签。没问题-Materializecss可以解决这个问题。但是，我的标签可以是几种类型中的任何一种，因此每个标签可以使用不同的颜色来指示类型。再次，没问题。

不幸的是，要支持Materializecss键盘功能，我需要对其进行重新处理。在此之前，我使用黑客程序只是自己添加了div，并给了他们一个“芯片”类。现在，我正在使用materialize addChip函数，该函数仅说明为具有“标签”和“数据”。

如何将color和textcolor类添加到这些芯片？看起来很简单。创建代码的javascript是：

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

我想知道是否有类似的东西： instance.addChip（{标签：“标签文字”，颜色：“蓝绿色”，文本颜色：“白色文字”，}）;

有人知道吗？

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

添加具有样式的materializecss芯片-如何获得样式？

1 个答案: