Добавление чипа materializecss со стайлингом - как получить стайлинг? - PullRequest
Новая
       6

Добавление чипа materializecss со стайлингом - как получить стайлинг?

0 голосов
/ 25 февраля 2019

У меня есть требование использовать теги на веб-странице.Нет проблем - Materializecss справится с этим.Однако мои теги могут быть любого из нескольких типов, поэтому каждый тег может иметь разный цвет для обозначения типа.Опять же, нет проблем.

К сожалению, для поддержки функций клавиатуры Materializecss мне нужно переработать его.Раньше я использовал хак, чтобы просто добавить div и дать им класс "фишка".Сейчас я использую функцию материализации addChip, которая проиллюстрирована только как «тег» и «данные».

Как добавить классы color и textcolor к этим чипам?Это кажется простой вещью.Javascript, который создает тег: 

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

Я хотел бы знать, есть ли что-то вроде: instance.addChip ({tag: 'tag text', color: 'teal', text-color:'white-text',});

Кто-нибудь знает?

1 Ответ

0 голосов
/ 26 февраля 2019

Итак, мой пример - я добавляю тег из формы - так что есть более простые способы сделать это.Тем не менее, это то, как добавить чип, настроить стиль и добавить пользовательские атрибуты, чтобы вы лучше контролировали отображение тега.Вы можете использовать этот шаблон для отслеживания изображений и пользовательских полей для первичных ключей базы данных и прочего. 

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