UI Components

Table of Content

• UI Extensions
• Vue Components
• Abstract Design System

UI Extensions

• Extra Tabs
• Info Actions

Vue Components

• Icons

Abstract Design System

Abstract Design Systems (ADS) are an approach to User Interfaces (UI) implementation where developers are incentivized to use abstract UI components interfaces, instead of directly using a specific Design System (DS).
The main benefit of such an approach is that it let the possibility two switch the concrete DS use to display the UI.
For instance, users of Cristal can freely choose between Vuetify and Shoelace without programming efforts.
Note that supporting a new DS requires development efforts. Also, the goal of ADS is not to allow for the redefinition of the layout and positioning of visual elements, but allow of the seamless integration of various DS inside Cristal.

Component	Description	Vuetify	Shoelace	DSFR
Alert
Avatar
Breadcrumb				missing
btn
card
dialog	Also known as modal.
divider
fle input				missing
form				missing
img
load	Component with no visual content. This is where CSS for a given design system must be loaded.
menu, menu-item, menu-label
navigation tree				missing
navigation-tree-select				missing
tab, tab group, tab panel				missing
textfield