Набор компонентов, который можно использовать в своих целях.
Посмотерть и поиграть с параметрами компонентов можно в сторибуке по ссылке.
Для всех компонентов - Vue.js версии 2
Для Drag-and-Drop - compressorjs
- Color-piсker
- Course-cb-rf
- Suggestion DaData
- Drag-and-Drop
- Shoot-target
- Side-chapter
- Svg-loader
- Custom-input
Компонент выводит палитру заданных цветов. Цвета можно задавать обычными словами (список в файле colorDictionary.js), в форматах rgb, hex, hsla;
По цветам можно кликать, компонент возвращает названия выбранных цветов.
При наведении на элемент цвета всплывает подсказда с его русским наименованием или если цвет задан через rgb, hex или hsla то выводятся их значения.
Эмитет событие 'colorPiked' c массивом выбранных цветов.
Компонент выводит курсы валют на текущую дату по отношению к рублю.
Данные получает с ЦБ РФ или в случае недоступности ЦБ РФ с сайта www.cbr-xml-daily.ru.
Справа от курса отражается рост\падение по отношению к прошедшему дню.
Доступны курсы валют из списка: "USD", "EUR", "GBP", "INR", "JPY", "KRW".
В компонент встроены иконки с сайта fontello.
Выводит 2 input в которых вводимые данные дополняются подсказками от сервиса DaData.
Инициализация
Пример подсказки
Компонент создает поле в которое можно перемещать drag-and-drop изображения или же выбирать их через меню проводника.
Из переданных изображений формируется превью а сами они доступны в base64 для дальнейшего использования
Создает canvas с изображением мишени для стрельбы из пистолета Макарова № 4.
Компоненту передается количество выстрелов которые возможно занести на мишень и критерий оценки (упражнение).
При клике по мишени подсчитывается количество набранных очков и выставляется оценка.
Компонент создает оглавление из тегов h1-h6 с возможностью быстрого перехода при клике.
Анимации загрузки в SVG
Легко настраиваемый компонент инпута с возможностью подсказок от dadata.
- axios
- cleave.js
