web-material

    1.19.21 • Public • Published

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

    Install

    npm i web-material

    DownloadsWeekly Downloads

    2

    Version

    1.19.21

    License

    Unlicense

    Unpacked Size

    422 kB

    Total Files

    556

    Last publish

    Collaborators

    • avatar