Materialize CSS Documentation

If you have questions or need to discuss contributions, use the following channels:

• Chat: Gitter
• Website: materializeweb.com
• Discussions: GitHub Discussions
• Support: For personal support, use the Stack Overflow materialize tag.

You can create static chips using HTML. Chips are used to represent small blocks of information like contacts or tags.

• Contact Chips: Include an <img> inside the .chip div.
• Tag Chips: Include an element with the class close (e.g., a Material Icon) inside the .chip div.
• Outlined Chips: Add the .outlined class to the .chip div.

<!-- Contact Chip -->
<div class="chip">
  <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
</div>

<!-- Tag Chip -->
<div class="chip">
  Tag
  <i class="close material-icons">close</i>
</div>

<!-- Outlined Chip -->
<div class="chip outlined">Information</div>

To run the test suite, you must first build the files. Once built, you can execute the tests using npm test.

For detailed debugging and visual feedback, run the Jasmine browser runner and navigate to the provided local URL in your browser:

1. Run npx jasmine-browser-runner.
2. Open http://localhost:8888 in your browser.

Use checkboxes for binary choices (yes/no answers). To ensure the custom Materialize CSS checkbox is correctly bound to the input, you must use the for attribute on the <label> element. The value of the for attribute must match the id of the <input> element.

<label>
  <input type="checkbox" />
  <span>Label Text</span>
</label>

The Navigation Bar consists of two main parts: a brand/logo area and a set of navigation links. You can control the alignment of the navigation links by applying specific classes to the <ul> element containing them.

<ul class="right">
  <!-- Navigation links go here -->
</ul>

To use interactive chips (where users can type tags, use autocomplete, or delete chips), initialize the M.Chips plugin on one or more elements with the .chips class.

Note on Data Format: In version 2.0.0+, the data option must follow the Chip data object structure (see Chip data object).

document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('.chips');
  const instances = M.Chips.init(elems, {
    // specify options here
    autocompleteOptions: {
      data: [
        {id: 12, text: "Apple"},
        {id: 13, text: "Microsoft"},
        {id: 42, text: "Google", image: 'http://placehold.it/250x250'}
      ]
    },
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag',
  });
});

To avoid running the entire test suite, you can use the --filter flag to run only specific specs that match a certain name. This is useful for focusing on a single component during development.

npm test -- --filter=tabs

Chips allow users to enter tag text and press enter to create a tag. Tags can be removed by clicking the close icon or using the delete button on the keyboard.

Note on Breaking Changes: If you are migrating from version 1.X.X to 2.0.0, the data option format has changed. Ensure you update the data property in your initialization options to match the new 2.0.0 schema.

<div class="chips"></div>

To left-align the navigation links within a navbar, ensure the <ul> element does not have the right class (the default behavior for standard navbar structures).

<nav>
  <div class="nav-wrapper">
    <a href="!" class="brand-logo">Brand</a>
    <ul>
      <li><a href="!">Link 1</a></li>
      <li><a href="!">Link 2</a></li>
    </ul>
  </div>
</nav>

For a rapid development workflow, install the live-server node package globally, then use the provided demo script:

npm run demo