precision inputs

Präzisionseingänge

Diese Komponenten können so gestaltet werden, dass sie perfekt in jede App passen und es Benutzern ermöglichen, genaue Werte durch viele Eingabemodalitäten festzulegen. Benutzer können sich berühren, Klick und Drasip, scrollen Sie ihr Mausrad, doppelklicken Sie oder verwenden Sie die Tastatureingabe. Nach der Instanziierung können Sie die Komponenten genauso verwenden, wie Sie es bei normalen Eingaben tun würden.

Bitte melden Sie alle Probleme, die Sie auf GitHub entdecken.

Demos

Siehe https://codepen.io/jhnsnc/pen/mqpgqk/ für eine Demo unter Verwendung der FLStandardKnob -Komponente.

Siehe https://github.com/jhnsnc/precision-inputs-Demo für dieselbe Demo in einem Webpack-Setup.

Dokumentation

Anweisungen zum Verwenden/Anpassen jeder Komponentenentyps finden Sie in der Dokumentationstabelle.

Geplante Funktionen

• Komponenten
  • Base
    • ✔ KnobInput - vollständig anpassbarer, bloßes Basiskomponente
  • FL -Kontrollen
    • ✔ FLStandardKnob -Einfach zu bedienende Basisknopfkomponente
    • ✔ FLReactiveGripDial - Detailliertes Zifferblatt mit "Grip" -Beulen, gut für größere Steuerelemente
    • Numerische Bereicheingabe (z. B. Kanalauswahl)
    • Anpassbarer Range-Knopf (z. B. flexibler Feinstunknopf)
    • Slider -Eingabe
    • XY Controller
    • Andere Komponenten, die wie FL Studio -Steuerelemente komponiert und gestylt wurden
  • ❓ Möglicherweise andere Sätze von gestalteten, herrlich zu verwendenden Komponenten
• Leistung
  • ❓ Änderung oder Ersetzen Sie die Rendering -Methode, um die Leistungsbeschränkungen von SVG zu vermeiden
• Merkmale
  • ❓ Möglicherweise in eingebaute logarithmische Skalierung zu Eingängen hinzufügen
  • ❓ Möglicherweise integrierte Eingangsetiketten hinzufügen
  • ❓ direkte Unterstützung für React oder andere Frameworks

Paketinhalt

Derzeit werden die Komponenten als einzelnes UMD -Modul mit allen relevanten Klassen verteilt, die über das Standard -Exportobjekt zugegriffen werden können.

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