precision inputs

Точные входы

Эти компоненты могут быть стилизованы для идеального вписаться в любое приложение, и позволяют пользователям устанавливать точные значения с помощью многих входных методов. Пользователи могут соприкасаться с и драговать, щелкнуть и драговать, прокручивать колесо мыши, двойной щелчок или использовать ввод клавиатуры. После экземпляра вы можете использовать компоненты так же, как и любой нормальный вход.

Пожалуйста, сообщите о любых вопросах, которые вы обнаружите на GitHub.

Демо

См. Https://codepen.io/jhnsnc/pen/mqpgqk/ для демонстрации с использованием компонента FLStandardKnob .

См. Https://github.com/jhnsnc/precision-inputs-demo для той же демонстрации в настройке WebPack.

Документация

См. Таблицу документов для инструкций о том, как использовать/настроить каждый тип компонента.

Запланированные функции

• Компоненты
  • База
    • ✔ KnobInput - полностью настраиваемый базовый компонент с голой костями
  • FL Controls
    • ✔ FLStandardKnob -простой в использовании базовую ручку компонент
    • ✔ FLReactiveGripDial - подробный циферблат с ударами "Grip", хорошо для более крупных элементов управления
    • Вход численного диапазона (например, селектор канала)
    • Ручка настраиваемого диапазона (например, гибкая ручка с тонкой настройкой)
    • Вход слайдера
    • XY Controller
    • Другие компоненты, составленные и стилизованные как управление FL Studio
  • ❓ Возможно, другие наборы стилизованных, готовых к использованию компонентов
• Производительность
  • ❓ Измените или замените метод рендеринга, чтобы избежать ограничений производительности SVG
• Функции
  • ❓ Может быть, добавить встроенное логарифмическое масштабирование к входам
  • ❓ Может быть, добавить встроенные этикетки
  • ❓ Прямая поддержка React или других рамок

Содержимое пакета

На данный момент компоненты распространяются как один модуль UMD со всеми соответствующими классами, доступными через объект экспорта по умолчанию.

 precision-inputs
└── dist
    ├── precision-inputs.css
    ├── precision-inputs.css.map
    ├── precision-inputs.js
    └── precision-inputs.js.map