material design component - Chips

material design component - Chips

by jihoon kim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/5.1.0/material-components-web.min.js"></script>
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link href="https://unpkg.com/[email protected]/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 </head>
 <body>
<div class="mdc-chip-set mdc-chip-set--choice" role="grid">
  <div class="mdc-chip mdc-chip--selected mdc-ripple-upgraded" role="row">
    <div class="mdc-chip__ripple"></div>
<i class="material-icons mdc-chip__icon mdc-chip__icon--leading">home</i>    
    <span role="gridcell">
      <span role="button" tabindex="0" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">집</span>
      </span>
    </span>
  </div>
  <div class="mdc-chip" role="row">
    <div class="mdc-chip__ripple"></div>
<i class="material-icons mdc-chip__icon mdc-chip__icon--leading">business</i>    
    <span role="gridcell">
      <span role="button" tabindex="-1" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">회사</span>
      </span>
    </span>
  </div>
  <div class="mdc-chip" role="row">
    <div class="mdc-chip__ripple"></div>
<i class="material-icons mdc-chip__icon mdc-chip__icon--leading">near_me</i>    
    <span role="gridcell">
      <span role="button" tabindex="-1" class="mdc-chip__primary-action">
        <span class="mdc-chip__text">실행</span>
      </span>
    </span>
  </div>  

</div>
 </body>
  

</html>

CSS

.app-fab--absolute {
  position: fixed !important;;
  bottom: 1rem;
  right: 1rem;
}

@media(min-width: 1024px) {
   .app-fab--absolute {
    bottom: 1.5rem;
    right: 1.5rem;
  }
} 

/* .mdc-fab {
  position: fixed !important;
  bottom: 20px;
  right: 10px;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -ms-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
  transform: scale(0);
} */

JavaScript

/* const btnHide = new mdc.ripple.MDCRipple(document.querySelector('.mdc-chip-set')); */
const chipSet = new mdc.chips.MDCChipSet(document.querySelector('.mdc-chip-set'));
/* const chipSetAdapter = new mdc.chips.MDCChipSetAdapter(document.querySelector('.mdc-chip-set'));

 */
chipSet.chips[1].selected = true;
// var aa=  chipSet.getDefaultFoundation().adapter_;
// var aa=  this.adapter_;
// aa.focusChipPrimaryActionAtIndex(1)

chipSet.listen("click",function(e){
	var seq = e.srcElement.offsetParent.id.replace(/[^0-9]/g,"");
//var aa=  chipSet.getDefaultFoundation().adapter_;
   var adapter =  chipSet.getDefaultFoundation().adapter_;
   //aa.focusChipPrimaryActionAtIndex(1)
   var selectId = chipSet.selectedChipIds[0];
   var index  = adapter.getIndexOfChipById(selectId);
   if ( index == 0 ) alert(" 집");
	 else if ( index == 1 ) alert(" 회사");   
	 else if ( index == 2 ) alert(" 안전운전");     
   debugger;
});