После месяцев планирования и создания команда 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!
Нравится то, что вы видите? Хотите присоединиться к веселью? Подбери нас и присоединяйся к отряду.
Терадата: Старший фронтенд-инженер