VDS
Vtiger Design System is Webcomponent based Library to help you develop Enterprise Web Application with out-of-box UI components and templates.
This guide provides usage examples to get you started.
Quickstart
Dependency
On the HTML page add the style and script of VDS library.
<!doctype html>
<html>
<head>
<!-- recommended to load styles at start -->
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" crossorigin="anonymous" />
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="https://vtigerdesignsystem.vtiger.com/vds/variable.css">
<link type="text/css" rel="stylesheet" href="https://vtigerdesignsystem.vtiger.com/vds/index.css">
</head>
<body>
<!-- recommended to load script at end -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/lit/dist@3/all/lit-all.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://vtigerdesignsystem.vtiger.com/vds/dist/vds.umd.js"></script>
</body>
</html>
Usage
Once the dependency is added. You can use vds-* components in HTML or Javascript like any other HTML tag.
<body>
<vds-button variant="primary">Hello World</vds-button>
</body>
Congratulations! on getting started. You can go further with examples or explore more detailed usage of components.
Components
VDS components are built on Lit framework.
Registered to DOM customElements with vds- prefix
vds-accordian
vds-button
<vds-button></vds-button>
| Attribute | Description |
|---|---|
| variant | primary,secondary |
Templates
TBD