Bootstrap 4 Angular 7 Отзывчивый Макет Святого Грааля - PullRequest
Новая
       34

Bootstrap 4 Angular 7 Отзывчивый Макет Святого Грааля

0 голосов
/ 28 января 2019

Я пытаюсь реализовать макет Holy-Grail из начальной загрузки и jquery в Angular с той же функциональностью.Я получил исходный код начальной загрузки и jquery от этого вопроса .

Вот рабочий jdFiddle

Вот код jquery, который я пытаюсьперевести на Typecript (и успешно достигли той же реализации) 

$(function() {
    $(".menu-toggle").on("click", function(e) {
        if($(this).hasClass("nav")) {
            $("nav").addClass("open");
        }
        else {
            $("aside").addClass("open");
        }
        e.stopPropagation();
    });

    $("body:not(nav)").on("click", function(e) {
        $("nav, aside").removeClass("open");
    });
});

При попытке реализовать функциональность я получаю несоответствия.

Вот моя текущая реализация на stackblitz

Я пытаюсь повторить функциональность, видимую здесь точно так же, как в Angular.У меня возникают следующие проблемы:

  1. Полоса прокрутки в моей реализации прокручивает всю страницу в отличие от прокрутки только основного среднего содержимого, таким образом, не имея липкого заголовка и липкого левого бокового меню, как висходная реализация.

По сути, я спрашиваю, как я могу this выглядеть точно так же, как this с небольшим акцентом на прокрутку илипкие элементы?

------- ОБНОВЛЕНИЕ ------

Теперь все, чего я пытаюсь достичь, это:

  1. Липкий заголовок
  2. Липкая левая боковая панель с собственной полосой прокрутки.

1 Ответ

0 голосов
/ 30 января 2019

У меня наконец есть отзывчивый макет Святого Грааля, выполненный в угловом формате с угловым материалом и CSS.

Вот рабочий код в stackblitz

Особенности:

  1. Адаптивный макет с отзывчивым сиденав.
  2. Липкий колонтитул и липкий нижний колонтитул
  3. Липкий левый navbar

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

...