KissJS ui layer is the heart and the initial purpose of the library. It provides built-in UI components, which consists of:
Containers
- kiss.ui.Block: basic container
- kiss.ui.Panel: container with a header and other properties that allow to create standard draggable windows and modal windows
- kiss.ui.WizardPanel: panel where items are displayed one at a time (each wizard page) with helper buttons (next, previous) to navigate through the pages
Elements
- kiss.ui.Button: standard clickable button with an icon
- kiss.ui.Dialog: modal dialog box
- kiss.ui.Html: component to insert html
- kiss.ui.Image: component to insert an image
- kiss.ui.Menu: menu of clickable items with icons
- kiss.ui.Notification: notification which disappears automatically (toast message)
- kiss.ui.Spacer: simple empty element used as a spacer in the layout
- kiss.ui.Tip: tip that follows the mouse cursor
Data components
- kiss.ui.Datatable: powerful datatable
- kiss.ui.Calendar: simple calendar
- kiss.ui.Kanban: nice kanban with standard view setup (sort, filter, group, fields)
- kiss.ui.Timeline: powerful timeline with standard view setup (sort, filter, group, fields) + options like color, period, and more
Fields
- kiss.ui.Field: text, textarea, number, date or time fields
- kiss.ui.Checkbox: checkbox with multiple design options
- kiss.ui.Select: highly flexible field to select one or more options into a dropdown list
- kiss.ui.Attachment: widget to manage file attachments
- kiss.ui.Color: field to select a color
- kiss.ui.ColorPicker: widget to pick a color
- kiss.ui.Icon: field to select an icon
- kiss.ui.IconPicker: widget to pick an icon
- kiss.ui.Slider: slider widget to select a number value
- kiss.ui.Rating: widget used for ranking and notation
The ui layer is a work in progress and might change rapidly according to new project requirements.