Угловой материал сиденав мини вариант с подменю - PullRequest
Новая
       24

Угловой материал сиденав мини вариант с подменю

0 голосов
/ 07 мая 2018

Я использую Angular 5 и Material design. У меня есть угловой материал мини-вариант навигационного ящика в качестве бокового навигационного меню для моего приложения ( см. Изображение ) С помощью стрелки вверху мы скрываем элементы, оставляя только значки.

Я хочу добавить подменю для некоторых пунктов меню.

Когда меню свернуто, у нас появится всплывающее окно со ссылками на подменю: всплывающее меню

При расширении меню у нас будет стрелка, чтобы развернуть подменю под меню: расширенное меню с детьми

Я нашел несколько решений, но ни одно из них не делает именно этого. Вот несколько ссылок: Дерево угловых материалов

Динамическое вложенное меню с использованием углового материала

Bootstrap popover , но я бы предпочел найти что-то подобное в Angular Material.

И этот похожий вопрос

Кто-нибудь имеет представление о том, как этого добиться?

Заранее спасибо за помощь,

Бегония

1 Ответ

0 голосов
/ 17 мая 2018

Возможно, этот ответ может быть комментарием, но из-за ограничения размера текста и видимости, я пишу его здесь.

Плохая новость заключается в том, что сейчас нет официального способа сделать это изначально предоставленным Material.

Но хорошая новость в том, что я нашел хороший обходной путь . Я объясняю вам, как мне это удается ниже :

  1. Реализация стандартного меню этого материала (см. Последний пример внизу страницы на стекаблице) в вашем приложении **, например этот живой пример управлять значением isExpanded с его относительным значком / исключением текста

  2. Затем используйте директиву ngClass , чтобы условно добавить пользовательский класс к значению isExpanded, которое установит width в N px !important, где "N" - это пользовательское значение.

    !important необходимо для переопределения значений по умолчанию.

  3. Теперь самая сложная часть - это всплывающее окно. Вы можете использовать эту библиотеку всплывающих окон или, может быть, эту библиотеку . Настройка Css для переопределения позиционирования и цветовых значений является обязательной.

    Для редактирования и переопределения тегов библиотеки и свойств класса используйте префикс ::ng-deep (E.G :: ::ng-deep ngb-popover-window { /* customization here */ }).

    Единственный способ просмотреть материал sidenav - это переопределение css, но это довольно минное поле, и существует риск испортить текущий макет приложения.

    Хорошей альтернативой всплывающему окну (а также более простому в реализации) может быть изменение ширины меню при наведении курсора мыши на отображение второго столбца, который будет содержать ссылки на подразделы ...

    Я видел нечто подобное здесь , но это просто для того, чтобы получить идеи.

  4. Для содержимого меню, попробуйте продублировать код с разными поведения в зависимости от isExpanded значения, так что вы можете "легко" управлять видом дерева и всплывающим подменю.

ИСТОЧНИК: Я делаю это прямо сейчас

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

...