Sidebar Footer Button

Published on February 15, 2021, updated on June 01, 2021

Element: <ins-sidebar-footer-button>

Defines a clickable button in sidebar footer.

Complete Example

Code Snippet

<ins-sidebar>

    <ins-sidebar-footer>

      <ins-sidebar-footer-button 
        icon="icon-lock-1">
      </ins-sidebar-footer-button>

      <ins-sidebar-footer-button 
        icon="icon-logout-1">
      </ins-sidebar-footer-button>

    </ins-sidebar-footer>

</ins-sidebar>

Default State

Code Snippet

<ins-sidebar>

   <ins-sidebar-footer>

    <ins-sidebar-footer-button>
    </ins-sidebar-footer-button>

   </ins-sidebar-footer>

</ins-sidebar>

Direct Data Source

Code Snippet

<ins-sidebar>
 
   <ins-sidebar-footer>

      <ins-sidebar-footer-button 
        id="directDataSourceFooterBtn">
      </ins-sidebar-footer-button>

    </ins-sidebar-footer>

  </ins-sidebar>

  <script>
    var iconBtn = 'icon-notification-1';
    var directDataSourceFooterBtn = document.getElementById('directDataSourceFooterBtn')
    directDataSourceFooterBtn.addEventListener('didLoad', function(e){
      directDataSourceFooterBtn = iconBtn = 'icon-notification-1';
    });
  </script>

insSidebarFooterButtonEvent

Code Snippet

<ins-sidebar>

  <ins-sidebar-footer>

    <ins-sidebar-footer-button 
      id="footer-btn" 
      icon="icon-lock-1">
    </ins-sidebar-footer-button>

    <ins-sidebar-footer-button 
      id="footer-btn" 
      icon="icon-logout-1">
    </ins-sidebar-footer-button>

  </ins-sidebar-footer>

</ins-sidebar>

<script>
var sel = document.querySelectorAll('ins-sidebar-footer-button[id="footer-btn"]');
for (var i = 0; i < sel.length; i++){
  sel[i].addEventListener('insSidebarFooterButtonEvent', function(event){
    alert("Hello! I am an alert box!!");
  });
};
</script>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
icon	string	""	icon-close-1, icon-utilities, icon-lock-1 ...	Defines icon of sidebar footer button

Event

EVENT	OBJECT	DESCRIPTION
insSidebarFooterButtonEvent	mouseevent	Execute a script when a foter button is clicked

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.