Web Component

This is a toast notification Web Component using Stenciljs. Built with Stencil Built with TailwindCSS v3.x Demo Demo Installation npm install cb-toast Or use npm cdn <script type="module" src="https://cdn.jsdelivr.net/npm/cb-toast@1.0.3/dist/cb-toast/cb-toast.esm.js"></script> Usage The Coolbrains toast Component can be use as following: <cb-toast></cb-toast> <button id="showToastSuccess" class="bg-green-700">Success</button> <script> let cbToast = document.querySelector('cb-toast'); document.getElementById('showToastSuccess').addEventListener('click', event => { cbToast.Toast({ title: 'Success', //default description: 'success message', //default timeOut: 3000, //default position: 'top-right', //default type: 'success', //default }); }); </script> Positions 'top'; 'bottom'; 'top-left'; 'top-right'; //default 'bottom-left'; 'bottom-right'; type 'success'; //default 'info'; 'warning'; 'error'; Code Github

This is a TreeView Web Component using Stenciljs. Built with Stencil Built with TailwindCSS v3.x *** Special thanks to Hasibul Haque Demo codesandbox Installation npm install cb-treeview Or use npm cdn <script type="module" src="https://cdn.jsdelivr.net/npm/cb-treeview@1.0.0/dist/cb-treeview/cb-treeview.esm.js"></script> Usage The Coolbrains TreeView Component can be use as following: <cb-treeview></cb-treeview> <script> const data = [ { id: 1, name: 'Parent 1', parentId: null, children: [ { id: 3, name: 'Parent 1-0', parentId: 1, children: [ { id: 2, name: 'Leaf', parentId: 3, children: [ { id: 8, name: 'Leaf', parentId: 2, children: [], }, ], }, ], }, { id: 4, name: 'Parent 1-1', parentId: 1, children: [], }, ], }, { id: 5, name: 'Parent 2', parentId: null, children: [], }, { id: 9, name: 'Parent 3', parentId: null, children: [ { id: 4, name: 'Parent 3-0', parentId: 9, children: [], }, { id: 4, name: 'Parent 3-1', parentId: 9, children: [], }, ], }, ]; const cbTreeView = document....