The layout package contains cards, avatars, splitter, timeline and Dashboard Layout components.
-
The
card
is a small container in which user can show defined content in specific structure. -
The
avatars
are icons, initials or figures representing a particular person, used in popular media formats like images, SVG, font icons, and letters. -
The
splitter
is container component which used to construct different layouts using multiple and nested panes. -
The
timeline
is a tool for displaying chronological information effortlessly within your application. It offers a visually compelling and user-friendly experience for showcasing user activities, tracking progress, or narrating historical timelines. -
The
DashboardLayout
is a grid structured layout component that helps to create a dashboard with panels. Panels hold the UI components and allow resize, reorder, drag-n-drop, remove and add options. This allows users to easily place the components at the desired position within the grid layout.
This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license, you can purchase or start a free 30-day trial here.
A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
To install Layout components
and its dependent packages, use the following command.
npm install @syncfusion/ej2-vue-layouts
Following list of components are available in the package
-
Vue Card - Container used to display content in specific structure.
-
Vue Avatar - Used to add images or initials or icons in different shapes and sizes to your application.
-
Vue Splitter - Used to construct a different layout using its multiple and nested panes with resizable.
-
Vue Timeline - Used to build timelines to showcases user activities, tracking progress, narrating historical timelines, and more.
-
Vue Dashboard Layout - Used to build dashboards with panels that holds the UI components and allow resize, reorder, drag-n-drop, remove and add options.
These components are available in following list of:
- IT Asset Management (Live Demo)
- Swipeable Card (Live Demo)
- Flip Card (Live Demo)
- Tile View (Live Demo)
- Contact Application (Live Demo)
- Avatar Badge (Live Demo)
- Avatar Card (Live Demo)
- SEO Analysis Dashboard (Live Demo)
-
Card
-
Header - Header supports to include title, subtitle along with image.
-
Images and Title - Support to include images with customizable caption positions in it.
-
Action Buttons - Supports to add buttons within the card either in vertical or horizontal alignment.
-
Horizontal Card - Allows to align card elements horizontally and also allows to stack the content vertically within horizontal alignment.
-
-
Avatar
-
Splitter
-
Multiple Panes - Provided an option to configure more than two panes.
-
Resizable Panes - Supports resizable to adjust its pane size dynamically.
-
Orientation - The panes can orient either
horizontally
orvertically
. -
Integration - Other Vue UI components can be integrated within panes.
-
Nested Panes - Another splitter can be integrated within panes to create a complex layout.
-
-
Timeline
-
Orientation - Display items in a horizontal or vertical orientation.
-
Opposite content - Display additional information opposite to the item content.
-
Items alignment - Items content and opposite content can be aligned - before, after, alternate, or alternate reverse.
-
Reverse timeline - Shows the timeline items in the reverse order.
-
Templates - Customize the default appearance, including styling the dot item, templated content, and more.
-
-
Dashboard Layout
-
Drag and Drop - Allows drag and drop of panels at the desired location within the dashboard.
-
Floating - Floats the panels upward when the dragging option is enabled.
-
Resizing - Support to resize the panels in any direction as per the requirement.
-
MediaQuery - Allows the panels to be stacked when the specified resolution is met.
-
Product support is available for through following mediums.
- Creating incident in Syncfusion Direct-Trac support system or Community forum.
- New GitHub issue.
- Ask your query in Stack Overflow with tag
syncfusion
andej2
.
Check the license detail here.
Check the changelog here
© Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.