material design component - Tab

material design component - Tab

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-tab-bar" role="tablist">
  <div class="mdc-tab-scroller">
    <div class="mdc-tab-scroller__scroll-area">
      <div class="mdc-tab-scroller__scroll-content">
        <button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
          <span class="mdc-tab__content">
            <span class="mdc-tab__icon material-icons" aria-hidden="true">search</span>
            <span class="mdc-tab__text-label">검색</span>
          </span>
          <span class="mdc-tab-indicator mdc-tab-indicator--active">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
        <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
          <span class="mdc-tab__content">
            <span class="mdc-tab__icon material-icons" aria-hidden="true">start</span>
            <span class="mdc-tab__text-label">즐겨찾기</span>
          </span>
          <span class="mdc-tab-indicator">
            <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
          </span>
          <span class="mdc-tab__ripple"></span>
        </button>
        <button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
          <span class="mdc-tab__content">
            <span class="mdc-tab__icon material-icons" aria-hidden="true">place</span>
      ...

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 tabBar = new mdc.tabBar.MDCTabBar(document.querySelector('.mdc-tab-bar'));
tabBar.foundation_.adapter_.setActiveTab(0);


document.addEventListener("MDCTabBar:activated", (e) => {
	var idx = tabBar.foundation_.adapter_.getFocusedTabIndex();
  alert(idx);
});

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