Web Components / Material UI Design

Как добавить в проект

Просто положите папку репозитория в корне вашего сервера.

npm

$ npm install web-material

настройте сборку и среду разработки так, чтобы /material/* резолвился в ${workspaceFolder}/node_modules/web-material/*

Как собрать

Polymer или Vue.js работают с веб-компонентами.
Вообще, можно ничего не собирать, они нативно работают в Chrome и в Firefox (за флагом), но для прода все-таки стоит подумать о сборщике.

Как использовать

Добавьте импорт компонента на страницу (например, кнопка material-button)

import MaterialButton from '/material/components/button/material-button.js';

и используйте новый тег в разметке

<material-button>Button</material-button>

Устройство проекта

/components - папка с веб-компонентами
/script     - Общие скрипты для компонент (базовый JS класс)
/style      - Общие стили для компонент

Устройство компонента (пример: material-button)

/components/button

/index.html          - разметка (шаблон) компонента
/material-button.css - стили компонента
/material-button.js  - логика и скрипт для регистрации компонента

Примечание. Устройство остальных компонент аналогичное.

Для оформления компонент используются css-переменные, которые необходимо инициализировать в проекте, куда компоненты будут подключены.

Для разработки

• Панель задач для разработчиков
• Вехи развития
• Инструкции для разработчиков

Список компонент

Около названий некоторых компонент есть сылки на задачу (типа тз) для просмотра подробностей

Готово / В процессе улучшения

• #12 Button | Кнопки
• #13 Input | Поля ввода
• #4 Select | Поле выбора из выпадающего списка
• #19 Tabs | Вкладки
• #8 Title (ApplicationBar) | Колонтитул
• #15 List | Списки
• #16 Tooltip | Подсказки
• #20 BreadCrumbs | Следы
• #21 Message | Сообщения в чате
• #22 Card | Карточка
• #11 Search | Строка поиска
• #14 Textarea | Многострочное поле ввода
• #36 Expand | Развороты
• #30 Switch | Выключатели
• #26 Figure | Рамки
• #28 Avatar | Аватарки
• #32 Radio | Переключатели
• #33 Chips | Теги
• #29 Icon | Иконки
• #34 Drop | Выпадающие блоки
• #31 Checkbox | Флажки
• #35 Paper (Panel) | Панель / Блок для размещения информации
• #27 Caption | Заголовок
• #10 Progress | Отображение уровня загрузки
• #9 Loader | Отображение бесконечной загрузки
• #39 Rating | Рейтинг (звездочки)
• #23 Drawer |
• #25 Badge | Счетчик уведомлений
• #37 Stack | Экраны и история переходов
• Copyright | Авторские права
• Navigation (Navigation Bar) | Панель навигации
• Blockquote | Цитаты
• Dialog | Диалоговое окно
• Header | Шапка страницы
• Banner | Баннеры
• Calendar | Календарь
• Timeline | Хроника
• Slider | Ползунок
• Table | Отображение таблиц
• Footer | Подвал (сводная информация)
• #24 Charm | Выдвигаемая панель быстрых действий
• Divider | Разделитель
• Snackbar

Эти компоненты уже можно использовать в ваших проектах, со временем в них все будет доведено "до ума", не потребуется(?) дополнительных действий с вашей стороны

ROADMAP (список компонент для реализации)

• Parallax
• Grid | Сетка - Structure-Grid
• Sheet | Список элементов
• Panorama | Панорамы и 360-градусные изображения
• Payment | Платежи банковской картой
• Structure
• PickerDate | Выбор времени
• PickerTime | Выбор даты (календарь)
• PickerDateTime | Выбор даты и времени
• Countdown
• Reaction | Кнопки Like/Dislike и другие
• Counter?
• Bar
• BarSide
• BarSideNavigation
• Toolbar
• Widget
• Menu
• MenuVertical
• MenuHorizontal
• Notify
• Toast
• Hint
• Stepper
• Master
• Wizard
• Popup
• Modal
• Snippet
• Code(?) (Source)
• Upload
• Typography
• Link
• Contents
• Pagination
• SliderRange
• Tile
• Carousel
• TreeView
• InfoBox
• KeyPad (pin-code)
• Ribbon
• Emotion
• Smile
• Sticker
• Player
• Audio
• Video
• Layer
• Ad
• Remark
• Route
• Map
• Address
• Markdown
• TextEditor

и так далее...)

TODO:

e2e / Тестировние компонент