How can I add styling to materializecss chip elements?

Question

How can I add styling to materializecss chip elements?

When working with tags on a web page, Materializecss makes it easy. However, I have a requirement where the tags need to be of different colors based on their types. Although this is feasible, another complication arises when supporting Materializecss keyboard functions.

Prior to this, I resorted to a hack by manually adding div elements with a class "chip" for tags. Now, I am using the materialize addChip function, which only accepts 'tag' and 'data' as parameters.

The challenge now is how to specify color and textcolor classes for these chips when creating them dynamically in JavaScript using:

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

I wish there was a simple solution like:

instance.addChip({ tag: 'tag text', color: 'teal', text-color: 'white-text', });

If anyone has any insights or suggestions, please let me know!

javascript css materialize

Answer 1

Answer №1

In the scenario I presented, a tag is being added from a form, showcasing one method of achieving this outcome. However, by following these steps, you can efficiently add chips, customize their appearance, and include unique attributes for better display control. This approach can be utilized to manage images, custom fields associated with database primary keys, and other related data.

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

// Add a new chip with relevant details such as tags and colors
chipInstance.addChip({
    tag: 'text',
    textColor: 'white-text',
    tagColor: 'red',
    tagId: id,
});

// Retrieve the chip data
var dataArray = chipInstance.chipsData;
// Access the recently added data
var myData = dataArray[dataArray.length - 1];

// Fetch all chip elements
var allChips = $(chipInstance.$chips);
// Select the most recent chip that was added
var myChip = allChips.last()[0];  // The data is located at position 0

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

// It is crucial to retain this information as it serves as the database key necessary for deletion operations.
$(myChip).attr('data-id', myData["tagId"]); 
$(myChip).attr('title', 'more title text'); // Adjust attributes as needed

Answer 2

In the scenario I presented, a tag is being added from a form, showcasing one method of achieving this outcome. However, by following these steps, you can efficiently add chips, customize their appearance, and include unique attributes for better display control. This approach can be utilized to manage images, custom fields associated with database primary keys, and other related data.

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

// Add a new chip with relevant details such as tags and colors
chipInstance.addChip({
    tag: 'text',
    textColor: 'white-text',
    tagColor: 'red',
    tagId: id,
});

// Retrieve the chip data
var dataArray = chipInstance.chipsData;
// Access the recently added data
var myData = dataArray[dataArray.length - 1];

// Fetch all chip elements
var allChips = $(chipInstance.$chips);
// Select the most recent chip that was added
var myChip = allChips.last()[0];  // The data is located at position 0

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

// It is crucial to retain this information as it serves as the database key necessary for deletion operations.
$(myChip).attr('data-id', myData["tagId"]); 
$(myChip).attr('title', 'more title text'); // Adjust attributes as needed

How can I add styling to materializecss chip elements?

Answer №1

Similar questions

Handling an Express server that receives a request with no data

Encountering an "Error: Invalid string length" while attempting to iterate over the JavaScript object

Exploring the crossroads of MongoDB, Mongoose, and Node.js: An in-depth look

When is the appropriate time to nest CSS class selectors within other class selector definitions?

What is the best way to integrate external JavaScript libraries into Meteor.js?

Sequelize.js keeps the previous value for linked tables

Tips for dynamically coloring table cells in Spotfire based on their values

Grab the table headings from an HTML table and store them in variables after accessing the DOM

Mastering the Art of Concise Writing: Tips to

"Trouble with Heroku: JavaScript script failing to load with 404

What is the best way to implement this design using CSS flexbox?

Change the background image when hovering over an element with vanilla JavaScript by utilizing data attributes

Attempting to send a filled array to res.render, but struggling to implement a suitable async callback mechanism

How can I activate a function or pass a selected value to a different scope variable using AngularUI Bootstrap Datepicker?

Breaking down arrays using the JADE Template Engine

Access data from JSON array in Angular 2

Implementing Icons in Custom Headers of AG Grid Using vue js

What steps should I take to address a problem involving a callback function?

"Exploring the power of Vue.js through dynamic and recursive components

Datatables.js columns mismatch issue