После месяцев планирования и создания команда Teradata UX чрезвычайно горда анонсировать Covalent, платформу пользовательского интерфейса с открытым исходным кодом, созданную с использованием Angular 2.0 и Material Design.

Что такое Covalent и почему мне это нужно?

Мы облегчаем вам сборку всех частей

Angular 2.0 является совершенно новым и требует некоторого обучения.
Angular-Material 2 еще больше в стадии разработки, имеет неполные документы и может будет сложно собрать воедино в полнофункциональное приложение.

Мы сделали всю работу за вас! Covalent включает:

  • Angular 2.0 (мы управляем и включаем зависимости ng2 за вас)
  • Angular-Material 2 (мы также управляем и включаем зависимости material2 для вас)
  • Макеты (макеты flexbox из Angular-Material 1.x + 4 готовых варианта макета материала)
  • Компоненты Covalent ng2 (степпер, панели расширения, загрузка файла, ход загрузки, выделение синтаксиса и анализ разметки)
  • Ковалентные каналы ng2 (преобразование цифр, преобразование байтов, предыдущее время и разница во времени)
  • Руководство по стилю продукта и многоразовые шаблоны Material Design (для карточек, списков и т. д.)
  • Covalent Quickstart (готовое к клонированию приложение для быстрого запуска, которое поможет вам начать работу)
  • Подробная документация (чтобы помочь вам начать работу с Covalent, а также с Angular 2.0 и Angular-Material 2)

Почему название Covalent?

Мы следуем принципам атомарного дизайна, применяя их как веб-компоненты атомарного дизайна. В атомарном дизайне несколько атомов (например, кнопок и входов) образуют молекулы (например, поле поиска). Наши ковалентные связи - это молекулы, которые мы строим на основе Angular-Material. Кроме того, ковалентные связи являются жидкими и соответствуют своему контейнеру, как и наши адаптивные макеты!

Макет Flexbox

В настоящее время angular-material2 не имеет никакой системы компоновки. Angular-material1 включал фантастический макет flexbox, поэтому мы перенесли его на Covalent. Очевидно, что если (когда) material2 добавит макеты, мы их поддержим.

Варианты компоновки Material Design

Огромное (YUGE) преимущество использования Covalent - это доступ к 4 предварительно подготовленным пакетам компонентов компоновки Material Design Angular 2.0. Эти макеты взяты непосредственно из спецификаций Material Design и продуктов Google, вдохновленных Шаблонами макетов Polymer Application.

Компоненты Covalent Angular 2.0

Одна из самых важных функций Angular 2.0 - это компоненты. Истинная инкапсуляция в модульных веб-компонентах с помощью встроенного или эмулированного Shadow DOM CSS!

Teradata UX необходимо будет расширить Angular-Material для наших корпоративных продуктов. Когда мы это сделаем, мы будем строго следовать официальным спецификациям Material Design. Вы получаете выгоду, получая их в Covalent!

Вот несколько:

Шаговый

Из официальной спецификации: Степперы передают прогресс через пронумерованные шаги. Мы используем степперы для сложных форм, которые имеют несколько… шагов :)
Вот степпер в действии:

Использовать степпер так же просто, как:

<td-steps>
 <td-step> … </td-step>
 <td-step> … </td-step>
</td-steps>

Панели расширения

Здесь мы идем прямо из спецификации материального дизайна. Каждому приложению нужен какой-либо компонент пользовательского интерфейса для разворачивания / сворачивания аккордеона. Думайте о панелях расширения как о иммерсивном аккордеоне Material Design.

Опять же, прелесть веб-компонентов заключается в простоте их использования:

<td-expansion-panel>
 …
</td-expansion-panel>

Служба медиа-запросов и директива

Идеальное оружие в вашем арсенале адаптивного дизайна. Условно добавьте атрибуты, классы CSS, встроенные стили и директивы Angular 2.0 в адаптивные точки останова!

<div tdMediaToggle=”sm” [mediaClasses]=”[‘classOne’, ‘classTwo’]” [mediaAttributes]=”{title: ‘tooltip’}” [mediaStyles]=”{color: ‘red’}”> … </div>

В этом фрагменте кода используется TdMediaToggleDirective, чтобы два класса (classOne и classTwo), всплывающая подсказка и встроенный стиль (цвет: красный) применялись ТОЛЬКО к точке останова «sm» (min-width : 600px) и (max-width: 959px)! Вы также можете подключиться к питанию непосредственно в своем контроллере с помощью TdMediaService.

Компоненты MOAR:

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

Погрузитесь в мир с Covalent Quickstart!

Начать использовать Covalent очень просто. Просто клонируйте и приступайте к работе! (сначала убедитесь, что вы установили предварительные требования)

git clone [email protected]:teradata/covalent-quickstart.git my-product
cd my-product
npm i
ng serve

и вы получите каркас Angular-Material 2.0 с несколькими примерами представлений, использующих все 4 наших варианта компоновки:

БОНУС: Шаблон Covalent Sketch 3.9+

Когда мы не разрабатываем код, мы: heart: Sketch for mockups. Sketch 3.9 (бета) предлагает потрясающую новую функцию «изменение размера группы», которая является идеальным дополнением для разработки многоразовых адаптивных компонентов Covalent.

  • 4 Covalent Layouts (просмотр навигации, список управления, список карт и навигации) x 4 формата (настольный компьютер, альбомная ориентация планшета, портретная ориентация стола и мобильное устройство)
  • Компоненты Material Design (построенные с использованием масштабируемых символов Sketch)
  • Шаблоны дизайна (тонны карточек, списков, настроек и форм)
  • Материальный дизайн Типография и иконография

ПРИМЕЧАНИЕ. Этот шаблон предназначен ТОЛЬКО для Sketch 3.9+, в настоящее время вы должны использовать бета-версию!

Загрузить шаблон эскиза

Что дальше?

Чтобы выделить данные в Tera data, пользовательские интерфейсы наших продуктов имеют общую потребность в обработке указанных данных в интерфейсе. . Для этого нам немедленно потребуется создать более многоразовые компоненты Angular 2.0, такие как:

  • Компонент D3 v4.0: версия 4 D3.js является модульной, поэтому идеально подходит для компонентов ng2! Мы также применим к этим диаграммам принципы материального дизайна, которые мы называем «MD3»!
  • Компонент таблицы данных: прямо из таблицы данных MD spec
  • Компонент динамической формы JSON. Нашим продуктам требуются динамически генерируемые формы для расширяемых и подключаемых продуктов. Формы, управляемые JSON (например, formly), являются ключевыми.
  • Здесь ваш компонент: Мы принимаем запросы на добавление функций!

Присоединяйтесь к команде Teradata UX!

Нравится то, что вы видите? Хотите присоединиться к веселью? Подбери нас и присоединяйся к отряду.

Терадата: Старший фронтенд-инженер