Add New third-party plugins

To add new third-party plugin, follow this steps :

Using Node

1. Install node dependency for third-party plugin that you want to add.
2. Create related directories within the src/libs directory to include plugin css & js
3. Add related @imports and @includes in the src/scss/_theme/_libs.scss file.
4. Start adding third-party plugin CSS & JS in your HTML file.

For example, if you want to include bootstrap-select plugin, you need to follow this:

1. Install node dependency for using npm i bootstrap-select.
2. Create bootstrap-select directory within the src/libs directory & create plugin related files like :
   • Create below files & import node_module path : bootstrap-select.js & bootstrap-select.scss
   • You can also write light and dark, ltr and rtl specific style in bootstrap-select.scss. Refer template support for mixins details.
   Copy

   import bootstrapSelect from 'bootstrap-select/js/bootstrap-select';
   
   export { bootstrapSelect };

   Copy

   @import "../../node_modules/bootstrap-select/sass/bootstrap-select.scss";
   // include scss that you want to overwrite
   
   // Light style
   @if $enable-light-style {
     .light-style {
       @import '../../css/_bootstrap-extended/include';
       .bootstrap-select {
         ...
       }
     }
   }
   
   // Dark Style
   @if $enable-dark-style {
     .dark-style {
       @import '../../css/_bootstrap-extended/include-dark';
       .bootstrap-select {
         ...
       }
     }
   }
   
   //LTR Style
   @include app-ltr(false) {
     .bootstrap-select{
         ...
     }
   }
   
   //RTL Style
   @include app-rtl(false) {
     .bootstrap-select{
       ...
     }
   }

   • Create plugin mixin to customise its UI according to template
   Copy

   @import "../../css/_bootstrap-extended/functions";
   
   <!-- Add mixins that you need for this plugin -->
   @mixin bs-select-theme($background, $color: null) {
     $color: if($color, $color, yiq($background));
   
     .bootstrap-select .dropdown-menu.inner a[aria-selected="true"] {
       background: $background !important;
       color: $color !important;
     }
   }

3. Add related @imports and @includes in the src/scss/_theme/_libs.scss file.
   Copy

   @import "../../libs/bootstrap-select/mixins";
   @mixin template-libs-theme($background, $color: null) {
     @include bs-select-theme($background, $color);
   }

4. Start adding third-party plugin CSS & JS in your HTML file.
   Copy

   // Include stylesheet
   <link rel="stylesheet" href="vendor/libs/bootstrap-select/bootstrap-select.css" />
   // Include Javascript
   <script src="vendor/libs/bootstrap-select/bootstrap-select.js"></script>
   // Include page specific Javascript
   <script src="js/page.js"></script>
   // Include HTML
   <select class="selectpicker w-100" data-style="btn-default">
     <option>Rocky</option>
     <option>Pulp Fiction</option>
     <option>The Godfather</option>
   </select>

   Copy

   // To style only selects with the selectpicker class
   $('.selectpicker').selectpicker();

5. And you are ready to go!!

Without Node

1. Download third-party plugin's CSS & JS file
2. Save/copy JS & CSS files inside a folder at dev/assets/vendors/libs/ path.
3. Include Vendor JS and CSS files to your HTML file

For example, if you want to include bootstrap-select plugin, you need to follow this:

1. Download bootstrap-select plugin's CSS & JS file
2. Save/copy bootstrap-select.js & bootstrap-select.css files inside a folder For example, bootstrap-select at dev/assets/vendors/libs/.
3. Include Vendor JS and CSS files to your HTML file

Check plugin options and configurations that you want to use and You're done!

Remove third-party plugins

You can remove unwanted third-party plugins to reduce bundle size and execution time :

Using Node

1. Use npm uninstall <module_name> --save to remove module from dependencies in package.json
2. Confirm unwanted packages removed from the dependencies section in the src/package.json file.
3. Remove related directories from src/libs directory.
4. Remove related @imports and @includes in the src/scss/_theme/_libs.scss file.
5. Remove Vendor JS and CSS file includes from your HTML file

For example, if you want to remove bootstrap-select plugin, you need to follow this:

1. Uninstall node dependency using npm uninstall bootstrap-select --save.
2. Confirm bootstrap-select dependency removed from src/package.json file.
3. Remove the src/libs/bootstrap-select directory.
4. Remove @import "../../libs/bootstrap-select/mixins"; and included template-libs-theme mixin from src/scss/_theme/_libs.scss file.
5. Remove Vendor JS and CSS files from your HTML file

Without Node

1. Remove related directories from assets/vendors/libs directory.
2. Remove Vendor JS and CSS files from your HTML file

For example, if you want to remove bootstrap-select plugin, you need to follow this:

1. Remove bootstrap-select folder that contains CSS and JS files of the plugin from assets/vendors/libs directory.
2. Remove Vendor JS and CSS files from your HTML file