프로그래밍 방식으로 코어 메뉴/코어 서브 메뉴 선택 변경

Question

코어 메뉴 내부의 코어 서브 메뉴 내부에 코어 패턴의 전형적인 패턴을 사용하는 어플리케이션이 있습니다. 이 메뉴는 서랍에 있습니다. 내 주요 콘텐츠 영역은 매우 긴 텍스트 콘텐츠 기반 페이지입니다. 핵심 항목 중 하나를 클릭하면 주 콘텐츠의 특정 앵커로 이동합니다.

제 질문은 어떻게 핵심 항목/핵심 - 하위 메뉴를 프로그래밍 방식으로 제어 할 수 있습니까? 사용자가 주요 내용 영역을 다른 섹션으로 스크롤하고 현재 텍스트 내용이 표시되는 것을 기반으로 한 코어 메뉴 선택이 변경되는 패턴을 구현하고 싶습니다. 메인 윈도우에서 스크롤 이벤트를 모니터 할 수는 있지만 코어 메뉴에서 어떤 항목이 선택되었는지 어떻게 바꿀 수 있습니까?

Answer 1

selected 속성을 사용해보십시오.

다음 예제는 을 확장합니다.즐겨 찾기 3을 선택하십시오.

<core-menu selected="1"> 
    <core-submenu icon="settings" label="Topics" selected="1"> 
     <core-item label="Topic 1"></core-item> 
     <core-item label="Topic 2"></core-item> 
    </core-submenu>  
    <core-submenu icon="settings" label="Favorites" selected="2"> 
     <core-item label="Favorite 1"></core-item> 
     <core-item label="Favorite 2"></core-item> 
     <core-item label="Favorite 3"></core-item> 
    </core-submenu> 
</core-menu> 

프로그래밍 방식으로 값을 업데이트하는 selected="{{selected}}" 또는 this.$.menu.selected = '0' 같은 데이터 바인딩을 사용 할 수 있습니다. 작은 데모로이 jsbin을보십시오.