Сегодня мы рассмотрим интеграцию Project Clarity с Angular CLI.
Что такое ясность проекта? Со своего веб-сайта:
Project Clarity - это система дизайна с открытым исходным кодом, которая объединяет рекомендации по UX, фреймворк HTML / CSS и компоненты Angular 2. Ясность нужна как дизайнерам, так и разработчикам.
Предпосылки
Это руководство требует, чтобы Angular CLI был установлен глобально. Чтобы получить последнюю версию, выполните эту команду:
$ npm install -g @angular/cli@latest
Строим новый проект
Теперь, когда у нас есть команда ng, мы создадим новый проект Angular CLI, используя ng new.
$ ng new tutorial-angular-styling-clarity
Эта команда создаст новый каталог с именем tutorial-angular-styling-clarity и создаст в нем новое приложение Angular.
Установите зависимости Clarity
Project Clarity состоит из ряда зависимостей, которые мы установим с помощью npm и сохраним в нашем devDependencies:
$ npm install --save-dev clarity-icons clarity-ui clarity-angular @webcomponents/custom-elements@1.0.0-alpha.3 [email protected]
Добавьте файлы CSS
Как только это будет сделано, мы настроим Angular CLI для загрузки правильных скриптов и файлов CSS.
Для этого мы открываем angular-cli.json из корня нашего нового проекта и находим массив styles, который в настоящее время имеет одну запись, styles.css.
В этом массиве styles мы добавляем ссылку на файлы clarity-icons и clarity-ui css, делая его таким:
"styles": [ "../node_modules/clarity-icons/clarity-icons.min.css", "../node_modules/clarity-ui/clarity-ui.min.css", "styles.css" ],
Добавьте файлы JS
Теперь, когда стили на месте, мы добавим 3 файла javascript в массив scripts, чтобы он выглядел так:
"scripts": [ "../node_modules/mutationobserver-shim/dist/mutationobserver.min.js", "../node_modules/@webcomponents/custom-elements/custom-elements.min.js", "../node_modules/clarity-icons/clarity-icons.min.js" ],
Загрузите модуль Angular
Теперь, когда все зависимости установлены и настроены, мы можем перейти в наш Angular AppModule, чтобы настроить ClarityModule. Это гарантирует, что мы сможем использовать Clarity в нашем приложении.
Откройте src/app/app.module.ts и добавьте следующую строку вверху списка зависимостей:
import { ClarityModule } from 'clarity-angular';Он скажет TypeScript загрузить модуль из пакета clarity-angular. Чтобы использовать его, нам нужно добавить следующую строку в массив imports внутри декоратора @NgModule:
ClarityModule.forRoot(),Базовая конфигурация готова. Теперь, когда вы запустите свое приложение, вы увидите, что сообщение по умолчанию app works! было оформлено с использованием причудливого шрифта без засечек. Большой!
$ ng serve
Использование ясности проекта
Создание модуля пользовательского интерфейса и компонентов
Project Clarity - довольно продвинутая структура, позволяющая быстро создать законченный интерфейс. Давайте настроим некоторые элементы пользовательского интерфейса.
Чтобы быстро создать структуру для нашего пользовательского интерфейса, мы будем использовать команду ng generate, или для краткости ng g.
# create the ui module $ ng g m ui # create the layout component $ ng g c ui/layout -is -it --spec false # create components for header, sidebar and main view $ ng g c ui/layout/header -is -it --spec false $ ng g c ui/layout/sidebar -is -it --spec false $ ng g c ui/layout/main -is -it --spec false
Параметры, которые я использую в команде ng g, делают следующее:
-is встроенный стиль вместо отдельного файла CSS -it встроенный шаблон вместо отдельного файла html. --spec false пропускает создание файла спецификации для тестирования.
Теперь создаваемая структура выглядит так:
./src/app/ui ├── layout │ ├── header │ │ └── header.component.ts │ ├── layout.component.ts │ ├── main │ │ └── main.component.ts │ └── sidebar │ └── sidebar.component.ts └── ui.module.ts
Чтобы использовать эти компоненты в нашем приложении, нам нужно импортировать только что созданный UiModule в AppModule. Открываем src/app/app.module.ts, добавляем оператор импорта:
import { UiModule } from './ui/ui.module';
И добавьте UiModule в массив imports внутри декоратора @NgModule.
Поскольку мы будем использовать Clarity внутри нашего UiModule, нам также необходимо импортировать его туда. Открываем src/app/ui/ui.module.ts, добавляем оператор импорта:
import { ClarityModule } from 'clarity-angular';
И добавьте ClarityModule в массив imports внутри декоратора @NgModule, как и раньше, но теперь без вызова метода .forChild().
Последнее, что нужно сделать внутри UiModule, - это добавить массив exports и экспортировать LayoutModule, поскольку мы будем ссылаться на него в нашем AppComponent.
UiModule теперь будет выглядеть примерно так:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LayoutComponent } from './layout/layout.component';
import { HeaderComponent } from './layout/header/header.component';
import { SidebarComponent } from './layout/sidebar/sidebar.component';
import { MainComponent } from './layout/main/main.component';
import { ClarityModule } from 'clarity-angular';
@NgModule({
imports: [
CommonModule,
ClarityModule,
],
declarations: [
LayoutComponent,
HeaderComponent,
SidebarComponent,
MainComponent,
],
exports: [
LayoutComponent,
]
})
export class UiModule { }
Подключение и создание компонентов пользовательского интерфейса
AppComponent
Мы начинаем с обновления шаблона нашего основного AppComponent, открываем src/app/app.component.html и меняем содержимое на это:
<app-layout>
<h1>{{title}}</h1>
</app-layout>
Здесь мы ссылаемся на LayoutComponent с помощью селектора app-layout.
LayoutComponent
Откройте src/app/ui/layout.component.ts и обновите template:
template: `
<div class="main-container">
<app-header></app-header>
<app-main>
<ng-content></ng-content>
</app-main>
</div>
`,
Это оборачивает наш контент в div с классом main-container, затем мы ссылаемся на HeaderComponent и MainComponent, которые мы говорим для встраивания содержимого приложения с помощью компонента ng-content.
HeaderComponent
Откройте src/app/ui/layout/header/header.component.ts и обновите шаблон:
template: `
<header class="header-1">
<div class="branding">
<a class="nav-link">
<clr-icon shape="shield"></clr-icon>
<span class="title">Angular CLI</span>
</a>
</div>
<div class="header-nav">
<a class="active nav-link nav-icon">
<clr-icon shape="home"></clr-icon>
</a>
<a class=" nav-link nav-icon">
<clr-icon shape="cog"></clr-icon>
</a>
</div>
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search for keywords...">
</label>
</form>
<div class="header-actions">
<clr-dropdown class="dropdown bottom-right">
<button class="nav-icon" clrDropdownToggle>
<clr-icon shape="user"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a clrDropdownItem>About</a>
<a clrDropdownItem>Preferences</a>
<a clrDropdownItem>Log out</a>
</div>
</clr-dropdown>
</div>
</header>
<nav class="subnav">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Users</a>
</li>
</ul>
</nav>
`,
Это довольно большой фрагмент, но его должно быть довольно легко понять, что он делает:
- Определите заголовок с классом
header-1(который устанавливает цвет от 1 до 6). - Добавьте брендинг, используя значок и заголовок.
- Добавьте 2 значка заголовка: «Домой» и «Настройки».
- Добавьте поле поиска с текстом-заполнителем.
- Добавьте значок пользователя и раскрывающийся список с 3 элементами.
- Добавьте под-навигацию с 4 ссылками.
MainComponent
Мы почти на месте. Откройте src/app/ui/layout/main/main.component.ts и обновите шаблон:
template: `
<div class="content-container">
<div class="content-area">
<ng-content></ng-content>
</div>
<app-sidebar class="sidenav"></app-sidebar>
</div>
`,
В этом компоненте мы заключаем боковую панель и область содержимого в div с классом content-container.
Под селектором app-sidebar мы создаем еще один div с классом content-area, здесь будет отображаться основное содержимое нашего приложения. Мы делаем это с помощью встроенного в Angular компонента ng-content.
SidebarComponent
Последний! Откройте src/app/ui/layout/sidebar/sidebar.component.ts и обновите шаблон:
template: `
<nav>
<section class="sidenav-content">
<a class="nav-link active">Overview</a>
<section class="nav-group collapsible">
<input id="tabexample1" type="checkbox">
<label for="tabexample1">Content</label>
<ul class="nav-list">
<li><a class="nav-link">Projects</a></li>
<li><a class="nav-link">Reports</a></li>
</ul>
</section>
<section class="nav-group collapsible">
<input id="tabexample2" type="checkbox">
<label for="tabexample2">System</label>
<ul class="nav-list">
<li><a class="nav-link">Users</a></li>
<li><a class="nav-link">Settings</a></li>
</ul>
</section>
</section>
</nav>
`,
И вот он, создание базового пользовательского интерфейса, созданного с помощью Angular CLI и Project Clarity.
Чертовски круто, если вы спросите меня! Проверить живую версию можно здесь: https://beeman.github.io/tutorial-angular-styling-clarity/
Project Clarity может предложить гораздо больше, и все это вы можете найти на веб-сайте:
Https://vmware.github.io/clarity/documentation
Как обычно, демонстрационный проект можно найти на моем GitHub:
Https://github.com/beeman/tutorial-angular-styling-clarity
Если у вас есть какие-либо проблемы или вопросы, используйте комментарии ниже или напишите мне в Twitter @beeman_nl.
Удачного кодирования!
Нужна помощь?
Нужна поддержка для вашего проекта Angular, Ionic, Firebase, NodeJS или TypeScript? Ищете долгосрочное наставничество? Не стесняйтесь заказывать со мной сеанс 1-на-1 на CodeMentor.
