Syncfusion Vue UI Components (Essential JS 2)

The MultiColumn ComboBox displays detailed information about items in a table-like structure with multiple columns. This provides more context than standard single-string text lists.

Key capabilities include:

• Data binding: Supports JavaScript object arrays and remote data sources (OData, URLs, Web APIs).
• Grouping: Organizes pop-up list items into groups.
• Filtering: Advanced filtering for large datasets.
• Sorting: Ascending/descending and single/multi-column sorting.
• Virtualization: Efficiently handles large datasets by loading data on demand.
• Templates: Customizes the appearance of headers, footers, and list items.

The ej2-vue-popups package provides components for displaying information in popup overlays. The primary components are:

• Dialog: A component used to create modal or modeless (non-modal) windows. It supports built-in buttons, custom positioning, animations, draggability, and templates for headers and footers. It is ideal for alerts, prompts, and confirmation dialogs.
• Tooltip: A component that displays information or messages when a user interacts with an element via hover, click, focus, or touch. Tooltip content can be simple text, images, hyperlinks, or custom templates.

The ej2-vue-layouts package provides several UI components for structuring application layouts:

• Vue Card: A small container used to display content in a specific structure.
• Vue Avatar: Used to represent users or entities using images, initials, icons, or SVG in various shapes and sizes.
• Vue Splitter: A container component used to construct layouts with multiple and nested resizable panes.
• Vue Timeline: A tool for displaying chronological information, such as user activities, progress tracking, or historical timelines.
• Vue Dashboard Layout: A grid-structured layout component for creating dashboards. It uses panels that hold UI components and supports resizing, reordering, drag-and-drop, removing, and adding panels.

The Vue Grid is a powerful tool for displaying and manipulating tabular data. It supports binding to various data sources including:

• Arrays of JSON objects
• OData web services
• Syncfusion DataManager

Key features include sorting, filtering, paging, grouping, editing, frozen rows and columns, and virtualization.

The @syncfusion/ej2-vue-dropdowns package provides a comprehensive suite of selection and input components for Vue applications. The package includes the following components:

• Vue DropDownList: A standard dropdown selection component.
• Vue DropDownTree: A dropdown that displays data in a hierarchical tree structure.
• Vue Mention: An input component that allows users to mention specific entities (similar to social media tagging).
• Vue ComboBox: A combination of a textbox and a dropdown list.
• Vue AutoComplete: An input component that provides suggestions as the user types.
• Vue MultiSelect: A dropdown that allows selecting multiple items from a list.
• Vue ListBox: A component for selecting one or more items from a list displayed in a box.
• Vue MultiSelect: (Included in the package for multi-selection capabilities).

The Vue Block Editor is a modern, block-based editor designed for composing rich, structured documents. Key capabilities include:

• Block Management: Multiple block types (Headings, Tables, Lists, Checklists, Quotes, etc.), drag-and-drop reordering, and an action menu for moving, deleting, or duplicating blocks.
• Content Insertion: Slash commands (/) for quick block insertion, and inline content support for Links, Labels, and Mentions.
• Text Formatting: Rich text styling (Bold, Italic, Underline, etc.) via an inline toolbar and context menus.
• Collaboration & History: Real-time collaboration support for multiple users and Undo/Redo operations.
• Extensibility: A rich set of events (block addition, removal, update, selection change, etc.) allows for deep customization.
• Accessibility: WCAG 2.0 compliance and full keyboard navigation support.

The @syncfusion/ej2-vue-inputs package provides a variety of input controls for Vue applications, including:

• Vue ColorPicker: For selecting colors.
• Vue TextBox: Standard text input.
• Vue MaskedTextBox: Text input with specific formatting masks.
• Vue NumericTextBox: Specialized input for numeric values.
• Vue Signature: For capturing digital signatures.
• Vue Slider: For selecting values from a range.
• Vue File Upload: For uploading files.
• Vue Rating: For star or numeric rating inputs.

The @syncfusion/ej2-vue-splitbuttons package provides four distinct button-related components:

• DropDownButton: Used to toggle contextual overlays to display a list of action items.
• SplitButton: Features a primary button for default actions and a secondary button to toggle contextual overlays for additional action items.
• ProgressButton: Visualizes the progression of an operation (e.g., background processes) using visual indicators.
• ButtonGroup: A graphical interface that groups a series of buttons either horizontally or vertically.