Component Feature Set

Components are the building blocks of your applications in Plateau Studio Low Code Platform. They allow you to create rich and interactive user interfaces, display data in various formats, and connect to different services. Plateau Studio integrates with Vuetify Components, Chart.js components, GoldenLayout, DevExpress data table and, offers you its own component set. You can find short details about components in the table below, along with their available platforms and a brief description of their functionality.

Studio Components

Component	Web	iOS	Android	Description
LiveConnection	✓	X	X	The LiveConnection component is a socket management component that enables bidirectional interactive communication between the user's browser and a server.
DocumentViewer	✓	✓	✓	The DocumentViewer component is used to display img, pdf, and html files.
Frame	✓	✓	✓	The Frame component is used to embed another document within the current HTML document.
Video	✓	✓	✓	The Video component embeds a media player that supports video playback within the document.
Text	✓	✓	✓	The Text component allows you to add texts to other UI components that do not have their own text properties.
LightBox	✓	X	X	You can use a LightBox to display forms, videos, images, and almost any type of content in a pop-up window that appears at the top of your page.
Sidebar Menu	✓	X	X	The Sidebar Menu component allows you to access targets on your page. It provides a convenient and organized way to present a menu of options for users to choose from.
Map	✓	✓	✓	The Map component enables you to display a customized and interactive map on your website.
Otp	✓	✓	✓	The Otp component enables one-time password implementations to be implemented.
PhoneInput	✓	X	X	The PhoneInput component provides a customizable phone number input with automatic formatting.
TableCell	✓	X	X	The TableCell component represents a grouping within a data table used for storing information or data.
QrCode	✓	X	X	The QrCode component allows embedding qrcode into the design
QrReader	X	✓	✓	The QrReader component provides a built-in QR code scanning feature for mobile devices.
RichText	✓	X	X	The RichText component is used to create formatted text, such as product descriptions or article entries.
Tutorial	✓	X	X	The Tutorial component is designed for creating step-by-step website guides with keyboard and mouse support.
Tooltip	✓	X	X	The Tooltip component is a user interface element that displays text when a user hovers their cursor over an item.
InlineDatepicker	✓	✓	✓	The InlineDatepicker component is a companion to the Datepicker component that is linked to a text input field. It extends the functionality of the Datepicker by allowing the user to enter a date through a customizable text input.
ReCaptcha	✓	X	X	The ReCaptcha component is a Google-powered tool used to verify whether a user is human or not.
InlineTimePicker	✓	X	X	The InlineTimePicker component is a convenient way to incorporate a time picker into a text input field. By connecting it to a Timepicker component, users can easily select a specific time by typing it directly into the text input.
Col	✓	✓	✓	The Col component enables the division of a row into multiple columns. It is a mandatory component to be used within the Row component.
Container	✓	✓	✓	The Container component provides the ability to center and horizontally fill the content of your website.
ImgZoom	✓	X	X	The ImgZoom component allows users to zoom in on an image when they hover over it, providing a closer view of the details.
Row	✓	✓	✓	The Row component serves as a wrapper for Col components, allowing you to control the layout and flow of its nested columns.
PageComponent	✓	✓	✓	The lifecycle of Quick pages is managed by the PageComponent. It holds the PreRender, EndRender, and postRender properties for defining the desired events to occur before, during, and after page loading. Additionally, it allows users to add custom events that can be triggered in other components.
BlockComponent	✓	✓	✓	The block component is usually used on long and complex pages to master the page layout, to get away from the complex structure. You can separate sections on a page as subpages, and display each section on your page as a block component.You can also customize them according to the page desires.
Timer	✓	X	X	Timer is a component that provides the functionality of the setInterval event. This event allows you to start or stop functions that are called periodically.
IdleTimer	✓	X	X	IdleTimer is a component used to detect the user's idle time for a specific number of milliseconds.
Legend	✓	X	X	Essential for comparing changes (Saved, Updated, Removed) within a component on a page. By adding the Legend, users can ensure a clear representation of updates.
Captcha	✓	X	X	This security feature is designed to prevent automated or malicious activities by presenting challenges that are typically easy for humans to solve but difficult for automated systems.

Vuetify Components

Component	Web	iOS	Android	Description
AppBar	✓	✓	✓	The AppBar component is crucial for any graphical user interface as it typically serves as the primary source of navigation on a website.
Alert	✓	✓	✓	The Alert component is used to communicate important information to the user through text, icons, and colors.
Autocomplete	✓	✓	✓	The Autocomplete component provides the user with the ability to type into a text box while also offering suggestions in addition to the Combobox component.
Avatar	✓	✓	✓	The Avatar component is commonly used to display circular user profile images.
Badge	✓	✓	✓	The Badge component is used to highlight information or draw attention to a specific item by adding an avatar-like icon, text, or content on top of it.
Banner	✓	X	X	The Banner component displays a message to the user with 1 or 2 functional options. These options can include text or icons, providing a visually appealing way to communicate important information or prompt user actions.
BottomNavigation	✓	✓	✓	The BottomNavigation component is an alternative to the sidebar navigation. It is primarily used for mobile applications.
BottomSheet	✓	✓	✓	The BottomSheet component is designed for displaying buttons and specific application-level actions.
Breadcrumbs	✓	X	X	The Breadcrumbs component is a navigation aid for pages. It includes the BreadcrumbsItem sub-component.
Button	✓	✓	✓	The Button component is a customized version of the standard HTML button with additional styling options for colors and icons.
ButtonToggle	✓	✓	✓	The ButtonToggle component is a simple wrapper designed specifically to work with Btn, providing a toggle functionality.
Calendar	✓	X	X	The vCalendar component is used to display information in a daily, weekly, monthly or category view.
Card	✓	✓	✓	The Card component is a versatile component that can be used for anything from a simple panel to a static image. It offers a wide range of options for displaying content.
Carousel	✓	✓	✓	The Carousel component is used to display a large number of visual contents in a rotating carousel, using the CarouselItem sub-component. It provides an interactive and dynamic way to showcase images or other media in a slideshow-like manner.
Checkbox	✓	✓	✓	The Checkbox component allows users to make a selection between two different values. It provides a checkbox-style input that can be toggled on or off, providing a convenient way for users to make binary choices or select multiple options from a list.
Stepper	✓	✓	✓	The Stepper component displays a progression of steps with numbered labels, allowing users to navigate through a process or workflow. It consists of several sub-components: StepperHeader, StepperStep, StepperItems, and StepperContent.
Sparkline	✓	X	X	The Sparkline component is a mini chart component that allows users to create simple and compact graphs.
Chip	✓	✓	✓	The Chip component is used to display small pieces of information in a compact and visually appealing manner.
ChipGroup	✓	✓	✓	The ChipGroup component is used to create a group of Chips for advanced selection options.
Combobox	✓	X	X	The Combobox component is a specialized version of Autocomplete that allows users to select values from a predefined list or enter custom values that are not available in the provided options.
DataIterator	✓	X	X	The DataIterator component is used to display data and shares many of its functionalities with the DataTable component.
DataTable	✓	✓	✓	The DataTable component is used to display tabular data in a structured and interactive format. It provides various features and functionalities that enhance the usability and manageability of data tables. · Search · Server-Side and Client-Side Sorting · Filtering · Pagination · Content Editing · Column Selection · Row Selection
DatePicker	✓	X	X	The DatePicker component is a date selection component that allows users to choose a single date or a range of dates.
Dialog	✓	✓	✓	The Dialog component provides a popup window that can contain various components.
Divider	✓	✓	✓	The Divider component creates a line that visually separates content, components or lists within a layout.
EditDialog	✓	X	X	The EditDialog component is specifically designed to provide a convenient and efficient way to edit data within a DataTable.
ExpansionPanels	✓	✓	✓	The ExpansionPanels component provides a way to create nested vertical expandable panels using the ExpansionPanel, ExpansionPanelContent, and ExpansionPanelHeader sub-components.
FileInput	✓	✓	✓	The FileInput component provides an input field for file selection.
Footer	✓	✓	✓	The Footer component is used to display general information at the bottom of a page, which you may want to access from any page on your website.
Form	✓	X	X	The Form component makes it easy to add validation to form inputs.
Icon	✓	✓	✓	The Icon component is used to display Material Design Icons (MDI icons).
Image	✓	✓	✓	The Image component is used for displaying media content.
List	✓	✓	✓	The List component is used for displaying information. It can include an avatar, content, actions, subheadings, and more. It includes sub-components such as: · ListGroup · ListItemGroup · ListItem · ListItemAvatar · ListItemAction · ListItemTitle · ListItemSubtitle · ListItemActionTex · ListItemContent
Toggle Menu	✓	X	X	The Toggle Menu component displays a menu at the activated position.
NavigationDrawer	✓	✓	✓	The NavigationDrawer component is a menu component that allows your users to navigate within your application.
OverflowBtn	✓	X	X	The OverflowBtn component is used to provide your users with the ability to select items from a list.
Overlay	✓	X	X	The Overlay component is used to highlight a specific element or its sections. It signals a change in the application's state to the user and can be used to create loaders, dialogs, and more.
Pagination	✓	X	X	The Pagination component divides long data sets into pages to facilitate information analysis for the user.
Parallax	✓	✓	✓	The Parallax component creates a 3D effect that allows the image to scroll slower than the window, creating a parallax effect.
ProgressCircular	✓	✓	✓	The ProgressCircular component provides users with a circular loading indicator that animates when data is being loaded or processed.
ProgressLinear	✓	✓	✓	The ProgressLinear component provides users with a horizontal loading indicator that shows progress while data is being loaded or processed.
Radio	✓	✓	✓	The Radio component is a simple radio button.
RadioGroup	✓	✓	✓	When combined with Radio components, the RadioGroup component is used as a grouping tool to allow you to make selections from predefined options. It helps in organizing and grouping radio buttons for easier selection within a specific context.
RangeSlider	✓	✓	✓	The RangeSlider component is used for better visualization of numerical input. It allows you to select a range of numeric values and is commonly used for gathering numerical user data.
Rating	✓	X	X	The Rating component provides a simple interface for collecting user feedback and ratings. It allows you to provide ratings or evaluations based on a specified scale or criteria.
Sheet	✓	✓	✓	The Sheet component serves as the base container for various components such as Card and ToolBar. It provides a foundation for styling and organizing content within a structured layout.
SkeletonLoader	✓	X	X	The SkeletonLoader component provides a visual indicator to users that content is being loaded or is in the process of being fetched. It presents a skeleton-like placeholder that mimics the structure of the actual content, giving you a sense of progress and responsiveness.
Select	✓	✓	✓	The Select component is used to collect user-provided information from a list of options. It presents a dropdown menu with selectable choices, allowing you to make a selection based on the available options.
Slider	✓	✓	✓	The Slider component enables users to select a value by sliding along a bar. It is ideal for adjusting settings like volume, and brightness, or applying image filters. Users can easily slide the handle to choose a desired value within a specified range.
SlideGroup	✓	✓	✓	The SlideGroup component allows users to horizontally navigate through provided information by allowing items to take up as much space as needed within SlideItem.
Snackbar	✓	X	X	The Snackbar component is used to quickly display a message to the user.
SpeedDial	✓	X	X	The Button component can be used as a floating action button. This provides an application with a main point of action. Combined with the SpeedDial component, you can create a diverse set of functions available for your users.
Switch	✓	✓	✓	The Switch component allows users to make a choice between two different values. While visually distinct from a checkbox, it functions similarly to a toggle switch, enabling users to switch between on and off states.
Tabs	✓	✓	✓	Tabs component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.
TextField	✓	✓	✓	The TextField component is used to collect user input entered from the keyboard. It provides a text input field where users can enter data.
Textarea	✓	✓	✓	The Textarea component is used to collect large amounts of textual data. It provides a multi-line input field where users can enter and edit text.
Toolbar	✓	X	X	The Toolbar component is a key element in any graphical user interface as it serves as the primary source of navigation on a website. It allows you to create visually appealing and functional navigation menus, making it an essential component for any web application.
Timeline	✓	✓	✓	The Timeline component allows you to display information in chronological order using the TimelineItem sub-component.
TimePicker	✓	X	X	The TimePicker component provides a visual presentation for users to select a specific time.
Treeview	✓	X	X	The Treeview component is used to display large amounts of nested data.
VirtualScroll	✓	X	X	The VirtualScroll component displays a virtual, infinite list. It supports dynamic height and scrolling vertically.

Other Components

Component	Web	iOS	Android	Description
DxDataGrid	✓	X	X	DxDataGrid is a table component that offers similar features to the DataTable component. It provides support following sub-components for server-side filtering, searching, querying, and paging operations: · DxColumn · DxSorting · DxPager · DxScrolling · DxPaging · DxHeaderFilter · DxFilterRow · DxSelection · DxSearchPanel · DxExport · DxRowDragging · DxMasterDetail · DxStateStoring · DxSummary · DxTotalItem · DxColumnChooser · DxColumnFixing · DxEditing
DxTreeList	✓	X	X	DxTreeList is a UI component that represents data in a multi-column tree view format, sourced from either local or remote data. It offers a range of features such as sorting, filtering, editing, selection, and more.
GoldenLayout	✓	X	X	GoldenLayout is a JavaScript layout manager that allows you to arrange and reconfigure components within a web page using drag and drop.
BarChart	✓	X	X	A bar chart is a graphical representation of data using rectangular bars of varying heights or lengths, proportional to the values they represent.
DoughnutChart	✓	✓	✓	A doughnut chart is a variation of a pie chart that adds a hole in the center, creating a "doughnut" shape. It is used to display data in a circular format, where each data category is represented by a segment of the doughnut.
PieChart	X	✓	✓	A pie chart is a circular graph divided into slices, with each slice representing a category and its size indicating the proportion of that category in the whole.
LineChart	✓	X	X	A line chart is a graphical representation of data using connected line segments to show the relationship or trend between data points over a continuous interval or time period.