Object Oriented framework for building rich User Interfaces
npm install fit-ui> Fit.UI is an Object Oriented framework for building rich User Interfaces in JavaScript.
For information on how to use Fit.UI, please see Fit.UI's official website.
For source code, please visit Fit.UI on GitHub.
Install Fit.UI using the package manager or download it from Fit.UI's website.
``
npm install fit-ui
The following files and folders are required to use Fit.UI as an external resource (not bundled with the application).
- node_modules/fit-ui/dist/Controls
- node_modules/fit-ui/dist/Resources
- node_modules/fit-ui/dist/Fit.UI.js
- node_modules/fit-ui/dist/Fit.UI.css
- node_modules/fit-ui/dist/Fit.UI.min.js
- node_modules/fit-ui/dist/Fit.UI.min.css
Simply add references to the stylesheet and Fit.UI itself:
`html`
Fit.UI is now ready to be used:
`js`
alert("Fit.UI loaded: " + (window.Fit ? "Yes" : "No"));
If a bundler such as Webpack is used, all we need to do is import or require Fit.UI, and the core of the framework will be bundled with the application, allowing us to resolve Fit.UI from the global scope.
`ts
import * as Fitty from "fit-ui";
// or
var Fitty = require("fit-ui");
alert("Fit.UI is loaded: " + (Fitty ? "Yes" : "No"));
`
However, to use UI components such as Dialog, DatePicker, HTML Editor, and FilePicker, the following files and folders must be copied to the folder containing the application bundle:
- node_modules/fit-ui/dist/Fit.UI.min.css
- node_modules/fit-ui/dist/Controls
- node_modules/fit-ui/dist/Resources
The official website for Fit.UI has plenty of online demos. Here is a small sample to get you started.
`js
var datepicker = new Fit.Controls.DatePicker("DatePicker1");
datepicker.Date(new Date());
datepicker.Render(document.body);
var button = new Fit.Controls.Button("Button1");
button.Title("Get date");
button.Icon("calendar");
button.OnClick(function()
{
var date = Fit.Date.Format(datepicker.Date(), "YYYY-MM-DD");
Fit.Controls.Dialog.Alert("Date: " + date);
});
datepicker.Render(document.body);
``