README
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 / Тестировние компонент