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

Плохо построенная панель навигации или навигационная панель сильно влияет на общее впечатление, которое человек получает от использования веб-сайта, тогда как КРАСИВАЯ НАВБАРЬ делает использование веб-сайта приятным и приятным.

Цель этой статьи — шаг за шагом описать, как создать функциональную и красивую панель навигации с помощью начальной загрузки 5 и нового классного набора пользовательского интерфейса под названием Contrast.

ВПЕРВЫЕ:

Позвольте мне освежить наши мысли о том, что такое бутстрап. Bootstrap — один из, если не самый популярный набор инструментов CSS Framework/front-end с открытым исходным кодом для разработки адаптивных и ориентированных на мобильные устройства веб-сайтов.

Он включает в себя переменные Sass, миксины, адаптивную сетку, обширные готовые компоненты и мощные плагины JavaScript. Последняя версия Bootstrap — Bootstrap 5.

Вы можете сказать, что Bootstrap помогает быстро создавать адаптивные веб-сайты. Теперь я уверен, что в этот момент вы можете спросить себя: «Что такое контраст?» Не волнуйтесь, ожидание окончено.

КОНТРАСТ

Contrast или Contrast Design Bootstrap — это элегантный набор пользовательского интерфейса для начальной загрузки, включающий более 2000 основных компонентов. Contrast можно интегрировать с любым проектом для создания мобильных, адаптивных и элегантных веб-сайтов и веб-приложений.

С установленным Contrast установка Bootstrap больше не становится необходимостью, потому что Bootstrap глубоко интегрирован в его ядро. Кроме того, Contrast предлагает более 2000 пользовательских компонентов, что делает разработку гладкой и элегантной. Contrast, созданный Devwares, доступен для следующих технологий;

Devwares также разработала Pro-версию Contrast, чтобы предоставить вам доступ к большему количеству функций и улучшений.

Нажмите сюда, чтобы проверить это.

В этом уроке мы будем использовать угловую версию контраста для создания панели навигации. Учебники для других версий также можно найти в документации здесь

Теперь, когда все сделано, давайте узнаем, как создать красивую панель навигации с помощью bootstrap 5 и контрастности (Angular).

ШАГ 1 Установите Contrast с помощью NPM:

npm install — save ng-cdbangular

Использование пряжи:

yarn add ng-cdbangular

ШАГ 2 Добавьте bootstrap-css-only в angular.json

“styles”: [ “node_modules/bootstrap-css-only/css/bootstrap.min.css”]

ШАГ 3 Импорт модуля панели навигации в app.module.ts

import { NavbarModule } from 'ng-cdbangular';
@NgModule({  imports: [ NavbarModule ]})

NB, для нашего примера нам понадобятся некоторые другие компоненты, поэтому наш окончательный файл app.module.ts будет выглядеть так:

import {
NavbarModule,
CollapseModule,
ButtonModule,
DropdownModule } from 'ng-cdbangular';
@NgModule({
imports: [ NavbarModule, CollapseModule,  ButtonModule,  DropdownModule ]
})

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

import { CDBFreeModule } from 'ng-cdbangular';
@NgModule({  imports: [CDBFreeModule]})

Легко, верно? Теперь давайте погрузимся прямо в представление.

ВИД HTML

Базовая навигационная панель Contrast выглядит следующим образом:

<CDBNavbar style="background: black; color: #f4f4f4">
<a href="">link</a>
</CDBNavbar>

Это выглядит… хорошо, но я знаю, что мы можем добиться большего. Давайте добавим компонент CDBNavBrand для логотипов брендов и тому подобного.

<CDBNavbar style="background: black; color: #f4f4f4">
<CDBNavBrand href="/">
<img src="" alt="Brand" class="img-fluid" width="30">
</CDBNavBrand>
</CDBNavbar>

Обратите внимание, что содержимое CDBNavBrand может быть любым, например:

<h4>Brand<h4>

Теперь давайте сделаем навабр отзывчивым.

<CDBNavbar style="background: black; color: #f4f4f4" [dark]=true expand="lg">
<CDBNavBrand href="/">
<img src=""   alt="Brand" class="img-fluid" width="30">
</CDBNavBrand>
<CDBNavToggle (click)="myNav.toggleCollapse()">
</CDBNavToggle>
<CDBCollapse #myNav class="w-100" [navbar]=true expand="lg">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut, minus?
</CDBCollapse>
</CDBNavbar>

В этом примере представлено больше пользовательских компонентов. Давайте пройдемся по ним шаг за шагом.

  1. Свойство расширения было добавлено в компонент CDBNavbar. expand=”lg” указывает панели навигации сворачиваться, когда ширина области просмотра составляет ‹ 992px.

Допустимые точки останова включают:

  • sm = свернуть, когда ширина области просмотра составляет ‹ 576px
  • md = свернуть, когда ширина области просмотра составляет ‹ 768 пикселей
  • lg = свернуть, когда ширина области просмотра составляет ‹ 992 пикселей
  • xl = свернуть, когда ширина области просмотра составляет ‹ 1200 пикселей

[dark]=true было добавлено, потому что цвет фона темный. [light]=true следует использовать, когда используется более светлый фон.

2. Добавлен компонент CDBNavToggle. Это переключатель панели навигации «Контрасты». Он становится видимым только тогда, когда ширина окна просмотра меньше, чем указанная точка останова, которую вы установили в реквизите «expand».

3. В компонент CDBNavToggle добавлен обработчик события клика:(click)="myNav.toggleCollapse()". CDBNavToggle обращается к функции toggleCollapse(), присутствующей в CDBCollapse, чтобы программно свернуть панель навигации через локальную ссылку «myNav».

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

<CDBNavToggle (click)=”myNav.toggleCollapse()” image=””></CDBNavToggle>

Здесь я использую буквальный гамбургер :)

Добавлен компонент CDBCollapse. Это фактический компонент, который сворачивает панель навигации. Добавляется локальная ссылка #myNav, чтобы переключатель мог получить доступ к своей функции toggleCollapse. [navbar]=true используется для информирования свертывания о том, что этот экземпляр используется в качестве панели навигации. Обратите внимание, что здесь должна использоваться та же точка останова, что и в компоненте CDBNavbar.

Вау! Хорошо, теперь, когда навигационная панель отзывчива и готова к работе, давайте добавим ей живости. Мы будем использовать некоторые другие компоненты Contrast.

<CDBNavbar style="background: black; color: #f4f4f4" [dark]=true expand="lg">
<CDBNavBrand href="/">
<img src="" alt="Brand" class="img-fluid" width="30" />
</CDBNavBrand>
<CDBNavToggle (click)="myNav.toggleCollapse()" > </CDBNavToggle>
<CDBCollapse #myNav class="w-100" [navbar]=true expand="lg">
<CDBNavbarNav [left]=true class="align-items-center">
<CDBNavItem>
<CDBDropDown>
<CDBDropDownToggle [caretDropDown]=true style="padding: 0"
color="dark" (click)="menu.toggleDropdown($event)">
Categories
</CDBDropDownToggle>
<CDBDropDownMenu #menu="cdbDropdownMenu" placement="bottom">
Coming soon #pleaseStayUpdated.
</CDBDropDownMenu>
</CDBDropDown>
</CDBNavItem>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="/" style="color: #ffffff">Help</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="/" style="color: #ffffff">About</CDBNavLink>
</CDBBtn>
</CDBNavItem>
</CDBNavbarNav>
<CDBNavbarNav [right]=true>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="/" style="color: #ffffff">EN</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn [flat]=true color="dark" style="padding: 0">
<CDBNavLink to="/" style="color: #ffffff">Login</CDBNavLink>
</CDBBtn>
</CDBNavItem>
<CDBNavItem>
<CDBBtn color="white" style="padding: 0">
<CDBNavLink to="/" style="color: #000000;"> Sign Up </CDBNavLink>
</CDBBtn>
</CDBNavItem>
</CDBNavbarNav>
</CDBCollapse>
</CDBNavbar>

Это окончательный результат того, как должна выглядеть наша навигационная панель, и вы определенно можете стилизовать компоненты по своему усмотрению.

Подробнее обо всех компонентах, используемых в навбаре, вы можете узнать в документации

Создавайте потрясающие веб-сайты и веб-приложения

Создание различных пользовательских компонентов в React для ваших веб-приложений или веб-сайтов может стать очень напряженным. Поэтому мы решили создать контраст. Мы собрали набор пользовательского интерфейса с более чем 10000 компонентов, 5 панелей администратора и 23 дополнительных различных шаблона страниц для создания практически любого типа веб-приложения или веб-страницы в одном продукте под названием Contrast Pro. Попробуй контраст про

Contrast React Bootstrap PRO — это многоцелевой профессиональный шаблон, набор пользовательского интерфейса для создания вашего следующего лендинга, администрирования, SAAS, предварительного запуска и т. д., проекта с чистым, хорошо документированным, хорошо продуманным шаблоном и компонентами пользовательского интерфейса. Узнать больше о Contrast Pro

Ресурсы

Первоначально опубликовано на https://www.devwares.com.