Insites Docs Web Components V1FeedbackDrawer

Drawer

Last updated on August 02, 2024.

Element: <ins-drawer>

Creates a side drawer element.

Complete Example

 
NOTE: If you are using iframes, your 'ins-drawer' should be placed outside of the 'iframe'. Use parent. to select your element.
 

Hello World

You can add any HTML element here. Use custom-width attribute to set your custom width.

Code Snippet

<ins-button label="Open Inner" solid color="blue" id="openDrawerEl"></ins-button>
<ins-button label="Open Outer" solid color="blue" id="openOuterDrawerEl"></ins-button>

<!-- Drawer inside iframe -->
<ins-drawer label="Inner Drawer" custom-width="550px" position="left" icon="icon-star" id="drawerEl">
  <h4>Hello World</h4>
  <p>You can add any HTML element here. Use <code>custom-width</code> attribute to set your custom width.</p>
  <ins-input label="Name"></ins-input>
  <ins-input label="Email"></ins-input>
  <div style="text-align: right;">
    <ins-button solid color="blue" label="Save"></ins-button>
  </div>
</ins-drawer>

<script>
  // this button opens the <ins-drawer> inside of the iframe
  document.getElementById('openDrawerEl').addEventListener('onClickInsButton', function() {
    document.getElementById('drawerEl').setDrawerState(true);
  });
  // this button opens the <ins-drawer> outside of the iframe
  document.getElementById('openOuterDrawerEl').addEventListener('onClickInsButton', function () {
    parent.document.getElementById('drawerOutsideEl').setDrawerState(true);
  });
</script>
Event Example

Hello World

This drawer sample has no heading.

See console log for event data.


This is a sample content.

Code Snippet

<ins-button label="Open" solid color="blue" id="openEventDrawer"></ins-button>
<ins-drawer label="Sample" show-header="false" id="eventDrawerEl">
  <h4>Hello World</h4>
  <p>This drawer sample has no heading.</p>
  <p>See console log for event data.</p>
  <hr>
  <p>This is a sample content. </p>
</ins-drawer>

<script>
  // button event to open drawer
  document.getElementById('openEventDrawer').addEventListener('onClickInsButton', function () {
    document.getElementById('eventDrawerEl').setDrawerState(true);
  });
  // Drawer event listener
  document.getElementById('eventDrawerEl').addEventListener('toggleDrawer', function (event) {
    console.log("Toggle Drawer", event.detail)
  });
</script>

 

Properties

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "" any Defines drawer heading text
icon string "" any Defines heading icon CSS class
is-open boolean false true, false Open / Close the drawer element
position string right left, right Defines drawer placement
sticky-header boolean true true, false Make heaading sticky on top of the drawer element
show-header boolean true true, false Show / Hide drawer heaading
bordered boolean true true, false Defines heading has border bottom
custom-width string "420px" any Defines custom width of drawer
no-padding boolean false true, false Defines drawer body has padding
backdrop-can-close boolean true true, false Click on backdrop closes the drawer
show-close-button boolean true true, false Show / Hide drawer close button

 

Events

 

EVENT OBJECT DESCRIPTION
toggleDrawer status, label Emit drawer element details on change state.

 

Methods

 

FUNCTION PARAMETERS RETURN DESCRIPTION
setDrawerState boolean n/a Open / Close drawer element

 

This drawer is outside

Drawer element is placed outside the <iframe>


Unlock the full potential of your business with our innovative solutions, designed to streamline your operations and enhance productivity. Our expert team is dedicated to delivering results that not only meet your goals but exceed your expectations. Experience seamless integration, cutting-edge technology, and unparalleled support. From start to finish, we’re here to help you succeed. Join the countless businesses that trust us to transform their vision into reality. Let’s achieve greatness together.

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.