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 libs directory to include plugin css & js
3. Add related @imports and @includes in the 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 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 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 package.json file.
3. Remove related directories from libs directory.
4. Remove related @imports and @includes in the 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 package.json file.
3. Remove the libs/bootstrap-select directory.
4. Remove @import "../../libs/bootstrap-select/mixins"; and included template-libs-theme mixin from 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