AngularJs Material 웹 사이트와 같은 메뉴 만들기

AngularJs Material 웹 사이트와 같은 메뉴 만들기

AngularJs Material 웹사이트(https://material.angularjs.org)와 같은 메뉴를 만들고 싶습니다.

유감스럽게도 이를 위한 문서나 데모는 없습니다.

좋은 생각 있어요?

감사해요.

지시사항을 사용하여 자신만의 사이드 메뉴를 만들 수 있습니다.menuToggle그리고.menuItem, 및 그menu service소스 파일에 있습니다.저는 이 메뉴를 여러 프로젝트에서 사용해 왔기 때문에 효과가 있다는 것을 알고 있습니다.같은 방법으로 구현하기만 하면 됩니다.블로그 투고에서는, 이하에 기재되어 있습니다.

각도 재료 측면 메뉴 작성 방법

적어도 몇 가지 사전 지시가 있습니다.몇 가지 예를 들어보겠습니다.

• 각질 재료 시데나브
• 각질 재료 시데메누

@Splaktar가 말했듯이 마일스톤 0.9.0에서 공식 mdListiItem을 기다릴 수 있습니다.

또한 전체 각질 재료 프로젝트 소스 코드를 확인하고 https://github.com/angular/material#building 또는 README.md에서 문서를 작성할 수도 있습니다.

먼저 로컬 프로젝트의 npm 도구를 설치하거나 업데이트합니다.

# First install all the NPM tools:
npm install
# Or update
npm update

그런 다음 GUP 태스크를 실행합니다.

# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build
# To build the Angular Material Docs and Demos in `/dist/docs` directory
gulp docs

그런 다음 출력 폴더 'dist/docs'에 필요한 코드가 'docs.js', 'css/docs.css' 및 'index.html'에 표시됩니다.

'dist/docs'의 'docs.js'는 원래 'docs' 폴더의 'docs.js'와 다릅니다.문서를 작성할 때 필요한 코드를 포함하여 많은 코드가 생성 및 결합됩니다.

문서를 작성한 후 필요한 코드를 얻는 가장 빠른 방법은 'dist/docs/docs.js'에서 'menuToggle' 또는 'menuLink' 지시문 또는 'menu' 팩토리를 검색하는 것입니다.

이게 도움이 되길 바라.

답변은 이쪽에서 확인하시기 바랍니다.https://stackoverflow.com/a/38258961/1904479,

http://demo.sodhanalibrary.com/angular/material-ui/accordion/accordion.html 에서는, 아코디언 또는 확장 가능한 리스트 뷰가 적절히 실장되어 있습니다.

이 중 어느 것도 필요없고, 동일한 UX와 외관을 원한다면 서비스를 수입하지 않을 이유가 없다고 생각합니다.단, 접을 수 있는 기능만 있으면 Import를 많이 하지 않고ng-class 디렉티브로 해결할 수 있습니다.스코프 설정에 따라 접을 수 있는 존마다 다음과 같은 다른 변수가 필요할 수 있습니다.

<div data-ng-click="collapsableA = !collapsableA;">Toggle Click zone</div>
<div data-ng-class="{collapsed: 'collapsableA}" class="collapsable">
    Stuff that gets hidden
    <div>More stuff to hide</div>
</div>

컨트롤러 $scope 선언에서

$scope.collapsedA = true //if you want it to start collapsed

그리고 네 css에서 뭐랄까

.collapsable{
    transition: all .2s ease-in-out;
    min-height: 20px;
    overflow: hidden;
}
.collapsable.collapsed{
    height: 0;
    min-height: 0;
}

, 기다리다, 기다리다, 기다리다, 기다리다, 기다리다, 기다리다, , 기다리다, 기다리다, 기다리다, 기다리다, 기다리다, 기다리다, 기다리다, 기다리다.mdListItem확장/축소 컨트롤을 지원합니다.0.9. 되어 있습니다.

https://github.com/angular/material/issues/985 를 참조해 주세요.

앵귤이에서 아코디언을 볼 수 있어요.http://angular-ui.github.io/bootstrap/

언급URL : https://stackoverflow.com/questions/28389671/create-a-menu-like-in-angularjs-material-website