Material components for the web, Chips

1262

Chips are very compact elements, We can use chips to show information like tags, we can use them to take inputs from user like filtering a list. Following is the sample code to create Chip

<div class="mdc-chip">
  <div class="mdc-chip__text">basic chip</div>
</div>

You can create more rich chips by prefixing/ postfixing icons in chips. Following examples shows you how to prefix/ postfix the icons to chips.

1. Prefixing Icons

<div class="mdc-chip">
  <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">accessible</i>
  <div class="mdc-chip__text">wheel chair available</div>
</div>

2. Postfixing Icons

<div class="mdc-chip">
  <div class="mdc-chip__text">Refresh</div>
  <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing">cached</i>
</div>

Demo

<iframe height='394' scrolling='no' title='Material Components for the web, Chips Demo' src='//codepen.io/fastfoodcoding/embed/PeRQew/?height=394&theme-id=light&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/fastfoodcoding/pen/PeRQew/'>Material Components for the web, Chips Demo</a> by fastfoodcoding (<a href='https://codepen.io/fastfoodcoding'>@fastfoodcoding</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe>

Code

<html>
  <head>
    <title>Material Components for the web, Chips Demo</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  </head>
  
  <body class="mdc-typography">
    <h3 class="mdc-typography--display2">Material Components for the web, Chips Examples</h3>
    
    Basic Chip: &nbsp;&nbsp;&nbsp;
    <div class="mdc-chip">
    <div class="mdc-chip__text">basic chip</div>
    </div>
    
    <br><br>
    
    Chip with a icon prefix: &nbsp;&nbsp;&nbsp;
    
    <div class="mdc-chip">
      <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">accessible</i>
      <div class="mdc-chip__text">wheel chair available</div>
    </div>
    
    <br><br><br>  
    
     Chip with a icon postfix: &nbsp;&nbsp;&nbsp;
    
    <div class="mdc-chip">
      <div class="mdc-chip__text">Refresh</div>
      <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing">cached</i>
    </div>
            
    <br><br><br><br>
    <hr>

    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
  </body>
  
</html>