Material components for the web, Chips

Views: 277   

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

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/[email protected]/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>
    <p class="mdc-typography--body1">More examples available @  <a target="_blank" href="https://fastfoodcoding.com/courses/material-components-for-the-web-tutorial">https://fastfoodcoding.com/courses/material-components-for-the-web-tutorial</a></p>

    <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
    <script>mdc.autoInit()</script>
  </body>

</html>
On By