niduscss-material-chip

Chip component with material design styles for niduscss framework.

Installation

$ npm install niduscss-material-chip

Usage

Define the custom properties in a file if you like modify the default values:

Example: create a setting.css file:

:root {
  --Chip-font-size: 1rem;
  --Chip-selected: #ff6e40;
}

Import styles:

styles.css:

/* Import first de file with custom properties or declare before import the
   component.
   ========================================================================== */
   
@import "settings";

/* Material components
   ========================================================================== */
@import "niduscss-material-chip";

/* Other styles */

Use in html files

<!-- Single chip -->
<div class="Chip is-selected">Single Chip</div>

<!-- Group of chips -->
<div class="ChipsGroup">
  <div class="Chip is-selected">Chip 1</div>
  <div class="Chip">Chip 2</div>
  <div class="Chip">Chip 3</div>
</div>

Changelog