material design component - List

material design component - List

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>
<ul id="my-list" class="mdc-list" role="listbox">
  <li class="mdc-list-item" role="option" tabindex="0" style="display:none">
    <span class="mdc-list-item__graphic material-icons" aria-hidden="true">folder</span>  
    <span class="mdc-list-item__text">Single-line item</span>
  </li>
</ul>
 </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 list = new mdc.list.MDCList(document.querySelector('.mdc-list'));
list.singleSelection = true;
/* const chipSetAdapter = new mdc.chips.MDCChipSetAdapter(document.querySelector('.mdc-chip-set'));
 */
 
 var listItemRipples = list.listElements.map((listItemEl) => new mdc.ripple.MDCRipple(listItemEl));
 for( var i=0;i<10;i++) {
  var a = listItemRipples[0].root_.cloneNode(true); 
  a.style.display = "block";
	a.children[1].innerHTML = i + " : " + "data";  
	document.querySelector('.mdc-list').appendChild(a);
 }

 listItemRipples = list.listElements.map((listItemEl) => new mdc.ripple.MDCRipple(listItemEl));

 list.listen("click",function(e){
alert(list.selectedIndex + " : " + list.listElements[list.selectedIndex].innerText);
/* debugger */;
});

/*  list.listen("selectionchanged",function(e){
 debugger;
 });
 debugger;
 */

/*   var listfoundation = new mdc.list.MDCListFoundation(document.querySelector('.mdc-list'));
  
  listfoundation.handleClick(function(e){
  debugger;
  }); */
/* debugger; */

/* 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;
});
 */