Подтвердить что ты не робот

Создайте меню, например, на веб-сайте AngularJs Material

Я хочу создать меню, которое выглядит как на веб-сайте AngularJs Material (https://material.angularjs.org)

angularjs material menu

К сожалению, для этого нет документации или демонстрации.

Любые идеи?

Спасибо

4b9b3361

ОТВЕТЫ

Ответ 1

Вы можете создать свое собственное меню со своими директивами menuToggle и menuItem и их menu service, которые находятся в их исходных файлах. Я использовал это меню во многих проектах, поэтому я знаю, что он работает. Все, что вам нужно сделать, это реализовать его так же. Я написал сообщение в блоге, которое проходит через это:

Как создать боковое меню Angular

Ответ 3

Как сообщает @Splaktar, вы можете дождаться официального mdListiItem в вехе 0.9.0.

И вы также можете проверить весь angular -материал исходный код проекта и посмотреть здесь https://github.com/angular/material#building или README.md для создания документов.

Сначала установите или обновите локальные средства npm проекта:

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

Затем запустите задачи gulp:

# 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

Затем вы должны увидеть коды, которые вам нужны в "docs.js" , "css/docs.css" и "index.html" в выходной папке "dist/docs".

"docs.js" в "dist/docs" отличается от "docs.js" в папке "docs" источника. Многие коды генерируются и объединяются вместе при создании документов, включая те, которые вам нужны.

После того, как вы создадите документы, самый быстрый способ получить коды, которые вам нужны, - это поиск "menuToggle" или "menuLink" или "menu" factory в "dist/docs/docs.js".

Надеюсь, это поможет вам.

Ответ 4

Вам НЕ НРАВИТСЯ, если вам нужен идентичный UX и внешний вид, я думаю, нет причин не импортировать сервис и все. Но если все, что вам нужно, - это сворачиваемость, которую вы могли бы решить с помощью директивы 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;
}

Ответ 5

Вам нужно будет подождать mdListItem для поддержки элемента управления expand/collapse. Это предварительно запланировано на 0,9.

См. https://github.com/angular/material/issues/985

Ответ 7

вы можете использовать metisMenu. это отлично работает для меня