Ребята!Сделать Azure Navigation Portal
Я чувствую себя действительно потерянным, потому что хотел бы воспроизвести навигацию Microsoft Azure, и я не знаю, как начать с нее, или если бы я мог сделать это с помощью плагинов.
Если вы еще не видели, это своего рода раздвижная или лезвие. Каждый раз, когда вы нажимаете опцию, отображает информацию сбоку.
Вот несколько скриншотов:
Я действительно ценю любое предложение, которое Вы могли бы предоставить мне :)
После повторной реализации макета аналогично Azure, вы можете посмотреть, как Start Screen demo реализован в Metro UI CSS Framework.
Некоторые из фоновых идей от this blog и видео внизу также дают некоторое представление о том, как появилась концепция дизайна Azure.
В конечном счете, я сделал мой похожий на то, как работает Azure, у меня есть набор навигационных «лезвий», которые остаются на левой стороне и расширяются на основе опций и имеют систему управления государством в Angular, которая в значительной степени обрабатывает остальные из лезвий, которые визуализируются горизонтально как li-элементы внутри ul. Внутри каждого клинка находится набор вертикально визуализированных групп, которые обрабатываются менеджером позиций для определения размещения сверху вниз внутри ячейки.
Похоже на Azure, я написал мой в TypeScript и AngularJS и использует LESS для всех стилей. Самая сложная часть, вероятно, была «обобщающей» настолько, что вы не продолжаете переписывать колесо, но скорее можете иметь конкретные «типы» содержимого лезвия, которое вы хотите показать, а затем каждый динамически отображать и извлекать контент как они ориентированы.
У меня есть несколько элементов div, которые эффективно поддерживают высоту на 100%, а затем устанавливают навигационную панель вверху. Моя левая панель навигации является скорее исключением, поскольку она обычно сводится к минимуму и просто обеспечивает маршрутизацию между ключевыми «порталами» сайта. У меня есть ul, которая имеет абсолютную позицию в верхнем левом углу, опять же с высотой 100%, и каждый ли внутри нее имеет размер, основанный на нескольких шаблонных размерах (так же, как у Azure есть некоторые очень узкие лезвия для настроек и более крупные, когда выбор данных из таблицы). Сам лезвие относительно расположен, установлен в верхнем левом углу и имеет также высоту 100%.
К сожалению, моя не существует на общедоступном объекте, поэтому я не смогу поделиться ею для вдохновения.
Thanks Mate, именно в этот момент я борюсь с эффектом лезвия. Кажется, очень сложно получить эффект Blade и сохранить новую информацию рядом с ним. Я буду продолжать искать что-то более конкретное. – rodboc
Поскольку вы используете Angular, я бы рекомендовал разработать директивы, чтобы немного упростить его. Имейте одну директиву, которая содержит «лезвие», другое, которое содержит заголовок внутри него, другое для групп плитки, другое для каждой из групп и т. Д. Вниз по списку компонентов (или просто начинайте с вершины и стройте, как вы прибиваете биты высокого уровня). – Xaniff
Спасибо, у меня есть понимание, чтобы сделать это, но я ищу больше для плагина или базы для начала. – rodboc