VRIX

English

한국어

English

한국어

Appearance

What is VRIX? ​

vrix.js is a JavaScript-based, flexible, and extensible basic UI component library. This library provides flexibility to handle everything from virtual scrolling to large data processing, from simple UI elements to complex requirements, simplifying the user's development process. Each component offers various customization options to easily handle requirements from simple UI elements to complex ones. The provided components include List, Tree, Popup, Autocomplete, Tokenizer, Combobox, DateChooser, DatePicker, and more.

Features ​

  • Customizability: VRIX allows for extensive customization, enabling you to tailor components to specific requirements.
  • Performance: Optimized for handling large datasets efficiently, with features like virtual scrolling and data loading state management.
  • Dynamic Content Management: Supports real-time data processing and dynamic content updates, with capabilities for real-time search and input handling through AutoComplete and Tokenizer.
  • Flexible Positioning: The Popup component offers various alignment options, allowing flexible positioning of UI elements like popups and dropdowns.
  • User Interaction: Seamlessly supports user interactions such as item selection, focus, and drag-and-drop to improve user experience.
  • Date Handling: Facilitates easy date selection and display through a calendar-like interface with DateChooser and DatePicker.
  • Comprehensive Filtering and Suggestions: AutoComplete and Tokenizer provide filtering and suggestion features based on user input to enhance user experience.

Getting Started ​

To get started with VRIX, you can refer to the Getting Started Guide for detailed instructions on how to integrate and use VRIX in your projects.

Components ​

List ​

The List component is a UI component that effectively displays and manages large datasets. Instead of rendering all data at once, it dynamically renders only the items visible in the user's viewport, optimizing performance.

  • Virtual Scrolling: Enhances performance by dynamically rendering only the data currently visible on the screen, efficiently handling large amounts of data.
  • Custom Renderer: Allows rendering data in the desired format.
  • Row Count Specification: Enables setting the number of rows to display on the screen at once.
  • External Scroller: Can operate based on the scroll of the container (parent element) that wraps the list, not just the list itself.
  • Interaction: Handles user interactions such as item selection and focus.
  • Drag and Drop: Allows changing the order of items through drag and drop.

Tree ​

The Tree component displays hierarchical data and inherits the characteristics of the List component. It effectively manages tree-structured data and provides user interaction.

  • Virtual Scrolling: Enhances performance by dynamically rendering only the data currently visible on the screen, efficiently handling large amounts of data.
  • Custom Renderer: Allows rendering tree items in the desired format.
  • Row Count Specification: Enables setting the number of rows to display on the screen at once.
  • External Scroller: Can operate based on the scroll of the container (parent element) that wraps the list, not just the list itself.
  • Interaction: Handles user interactions such as node selection and focus.
  • Node Expand/Collapse: Allows expanding or collapsing tree nodes.
  • Automatic Node Expansion: Can automatically expand nodes based on conditions.
  • Full Node Traversal: Provides functionality to traverse the entire tree.
  • Parent, Sibling Node Access and Node Add/Delete: Allows accessing parent and sibling nodes and adding or deleting nodes.
  • Drag and Drop: Allows changing the order of nodes or moving items under different parent nodes through drag and drop.

A component that dynamically displays content at a specified position on the screen. It is used to create and display content in various popup forms such as modals, tooltips, and dropdown menus at the specified target position.

  • Display Popup from Specified Element (Anchor): Can display a popup from a specific DOM element.
  • Display Popup on Anchor Event: Can display a popup on mouse hover or click.
  • Modal: Can emphasize the popup by blurring the background.
  • Popup Content Coordinate System: Can set the popup's position based on the anchor element or screen.
  • Nested Popup: Can display another popup inside a popup.
  • Priority: Can set the priority of the popup.
  • Close on Outside Click: Closes the popup when clicking outside.
  • Close with ESC Key: Closes the popup when pressing the ESC key.
  • Auto Focus: Can automatically set focus when the popup opens.
  • Prevent Viewport Overflow: Adjusts the position to prevent the popup from going outside the screen.

AutoComplete ​

A component that suggests related items in real-time based on the text entered by the user. It is useful for completing input or providing additional information.

  • Custom Renderer: Allows customizing suggestion list items.
  • Minimum String Specification: Can set the minimum string length to start input.
  • Suggestion List Configuration: Can configure suggestion lists based on input.
  • Floating Label and Placeholder: Can set labels and placeholders for the input field.
  • Suggestion List State Handling: Can handle states when the suggestion list is loading or when there is no data.
  • Suggestion List Container Control: Automatic and manual closing.

Tokenizer ​

A component that can process and manage multiple values simultaneously in an input field. Each item is divided into individual 'tokens' and managed as a collection with each input. It is useful for input fields like email where multiple values need to be entered at once.

  • Custom Renderer: Allows customizing tokens and suggestion list items.
  • Minimum String Specification: Can set the minimum string length to start input.
  • Suggestion List Configuration: Can configure suggestion lists based on input.
  • Floating Label and Placeholder: Can set labels and placeholders for the input field.
  • Suggestion List State Handling: Can handle states when the suggestion list is loading or when there is no data.

ComboBox ​

A component for selecting and displaying items from a dropdown list. Users can filter and select from the item list.

  • Custom Renderer
  • Multiple Selection
  • Item List Filtering
  • Dropdown Container Control: Automatic and manual closing.

DateChooser ​

A component for displaying dates. Typically provides a calendar-like interface where users can click to select specific dates.

  • Custom Renderer
  • Date Format: Can format dates using external libraries like moment and dayjs.
  • Header Format
  • Period Selection: Allows single selection and period selection.
  • allowDates: Can define selectable dates.

DatePicker ​

A component for selecting and displaying dates from a dropdown. Typically provides a calendar-like interface where users can click to select specific dates.

  • Custom Renderer
  • Date Format: Can format dates using external libraries like moment and dayjs.
  • Header Format
  • Period Selection: Allows single selection and period selection.
  • allowDates: Can define selectable dates.