MDL 아이콘 글꼴 hamburgeur 아이콘을 svg로 바꿉니다

부분적으로 아이콘 표시가 나타나기 전에 전체 글꼴 파일이로드 될 때까지 기다릴 필요가 없으며 svg를 사용하는 것에 대해 discussion (pro 및 con)을 조금 읽었 기 때문에 부분적으로 기다릴 필요가 없습니다. icon-fonts 대신 머티리얼 디자인 라이트 mdl-navigation 서랍 용 MDL 네이티브 아이콘 글꼴 대신 svg를 사용하여 실험하고 있습니다.MDL 아이콘 글꼴 hamburgeur 아이콘을 svg로 바꿉니다

호환되는 브라우저에서는 업그레이드를 위해 수정하지 않으려는 스크립트를 사용하여 아이콘을 추가합니다.

if (this.drawer_) { 
    var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN); 
    if (!drawerButton) { 
     drawerButton = document.createElement('div'); 
     drawerButton.setAttribute('aria-expanded', 'false'); 
     drawerButton.setAttribute('role', 'button'); 
     drawerButton.setAttribute('tabindex', '0'); 
     drawerButton.classList.add(this.CssClasses_.DRAWER_BTN); 
     var drawerButtonIcon = document.createElement('i'); 
     drawerButtonIcon.classList.add(this.CssClasses_.ICON); 
     drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON; 
     drawerButton.appendChild(drawerButtonIcon); 
    } # etc... 
}

나는이 함께했다 :

var mdl_drawer_button = document.querySelector('.mdl-layout__drawer-button'); 
mdl_drawer_button.innerHTML = '<svg viewBox="0 0 100 100" class="icon nav-icon"><use xlink:href="#nav-icon"></use></svg>';

그러나, '.mdl-layout__drawer-button'은 MDL 스크립트가 실행 될 때까지 존재하지 않기 때문에 this fiddle에서 볼로 500ms로 제한 시간을 추가하고있다.

내 접근 방식이 맞습니까? MDL 코드가 실행되면 내 함수를 실행하는 더 신뢰할 수있는 방법?

UPDATE :

지금 .mdl-layout__drawer-button에 대한 테스트와없는 널 (null)을 재귀 함수를 사용하여 약간 다른 방법을 시도 :

그것은 전체 사이트가 구현되는 방법을 아는없이 조언을 열심히

//Replace MDL icon with our sprite 
function mdl_drawer_btn() { 
    var mdl_drawer_button = document.querySelector('.mdl-layout__drawer-button'); 
    if (mdl_drawer_button != null) { 
     mdl_drawer_button.innerHTML = '<svg viewBox="0 0 100 100" class="icon nav-icon"><use xlink:href="#nav-icon"></use></svg>'; 
     } else { 
     setTimeout(mdl_drawer_btn, 100); 
     } 
    } 

setTimeout(mdl_drawer_btn, 100);

출처

2016-06-08 MikeiLL

또한 토론 : https://github.com/google/material-design-lite/issues/1014 심지어''태그'document.querySelector ('이전의 마지막 행으로이 코드 – MikeiLL

하지만, 스크립트를 페이지의 마지막 스크립트로 사용하는 것으로 충분하다고 생각했을 것입니다. 그런 다음 이전 스크립트가 완료되고 모든 DOM 변경 사항을 확인하기 위해 0ms 시간 초과로 감 쌉니다.

setTimeout(mdl_drawer_btn, 0);

출처

2016-06-09 01:24:46

.mdl-layout__drawer-button ')'가'null'입니다. – MikeiLL

MDL 아이콘 글꼴 hamburgeur 아이콘을 svg로 바꿉니다

답변

관련 문제