JavaScript (ES5) Demos
List of demos for the JavaScript ES5 controls.
A Floating Action Button (FAB) is a high-emphasis button that allows users to perform a primary action in an application. It typically
appears as a circular icon anchored to the bottom right of the screen.
The Button control is a user interface element that triggers an event when it is clicked. It can contain text, an image, or both.
A Chip is a compact unit of vital information that responds to a click action. It can include text, an image, or both, and is commonly
utilized in contacts, emails, or filter tags.
The Drop Down Button is utilized to toggle contextual overlays for displaying a list of action items. It can include both text and images.
The Progress Button visually represents the ongoing operation to inform the user that a process is occurring in the background. This progress can be depicted using graphics along with a textual representation.
The Split Button component features both primary and secondary buttons. The primary button is used to trigger the default action, while the secondary button toggles contextual overlays to display a list of action items. Additionally, it can accommodate both text and images.
The Calendar is a control that offers a multi-view representation for displaying and selecting dates. Additionally, it provides navigation options across different levels of views, including month, year, and decade.
A Date Picker is a component that allows the user to select a date from a drop down calendar.
The Date Range Picker is a control that allows the user to select a range of dates from a drop down calendar.
The Date Time Picker is a control that allows the user to select a date from a drop down calendar and the time from a drop down list.
The Time Picker is a control that allows the user to select a date from a drop down list.
The Auto Complete component displays a list of matched suggestions as the user types characters in the input field, allowing them to select one.
The Combo Box component displays a list of predefined values a user can select or allows a user to enter their own value.
The Drop Down List control displays a list of predefined values a user can select from.
The Drop Down Tree control displays a hierarchical list of predefined values, allowing users to select a single value or multiple.
The List Box control displays a list of predefined values, which a user can select using various methods.
The Mention control displays a list of items from which a user can select or tag when a defined key @ is pressed in a textarea.
The Multiselect component displays a list of predefined values a user can select multiple values from.
The Color Picker control allows for selecting and adjusting color values. It supports various color specifications, including RGB (Red Green Blue), HSV (Hue Saturation Value), and Hex codes.
The Cron Builder component allows for a human readable selection of value to build a Cron expression.
The Masked Textbox control is used to enter input from a user based on a defined masked.
The Numeric Textbox control is used to enter numeric input from a user.
The Rating control is used give a user a rating scale in which to select a value from.
The Signature control is used to allow a user to draw their signature.
The Slider control allows a user to select a value or range of values in between a min and max range by dragging the cursor over the slider bar.
A Textbox is a control that allows users to enter input or edit a text value.
A Uploader component allows a user to upload documents, pictures and other files types.
Layouts
Layouts
The Avatar control is pure CSS which is used to represent a user’s profile picture, initials or icons.
The Card control is pure CSS to display small content in a structured way.
The Splitter control displays different panes that can be resized by the user and displayed vertically or horizontally.
The List control displays data in an interactive hierarchical structure across various layouts or views, incorporating features like data binding, template rendering, and grouping.
The Progressbar component displays feedback to the user about the progress of a long-running task.
The Skeleton control displays feedback to the user that a content is still loading in the shape of text, circle, square, or rectangle.
The Spinner component displays an overlay on an element representing content is stilling loading or a task is running.
The accordion control is a vertically collapsible content panel that displays one or more panels at a time within the available space.
The Breadcrumb control serves as a navigational aid, helping users identify their current page location within the hierarchical structure of a website or list.
The Carousel control serves as a slide show for displaying images and content.
The Context Menu component on the user right click or touch hold action that provides various actions a user can choose from.
The Menubar control serves as navigation header with various commands for an application or site.
The Tab s a content panel that shows multiple content panes in specific area one at a time.
The Toolbar control displays commands and buttons in horizontal order.
The Treeview control displays data in a hierarchical structure with various configuration options to control how data is presented and manipulated.
The Alert control provides brief messages to users, indicating different severity levels. These messages can include icons and colors to convey the importance and context of the information.
The Badge control is pure CSS used to display an indicator or count, often for purposes like mail notifications or alerts.
The Toast control is a small, temporary message that appears on the screen to deliver important information without interrupting the user's flow.
The Dialog control represents a modal or non-modal dialog box or another interactive component, such as a dismissible alert, inspector, or sub window.
The Tooltip control is a small pop-up box or text that appears when a user hovers over an element such as a button, link, or image.
The Checkbox control allows users to select one or more items from a list of options or a single element.
The Radio component is used to select a specific option from a group of related choices.
The Switch component allows users to toggle between checked and unchecked states.