CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

3D Drawer

A 3D panel component used to display critical content.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The 3D Drawer component is a slide-in, 3D panel used to display relevant information without losing the context of the page.

To connect the 3D panel to its trigger (e.g., button), make sure the ID value of the first one is equal to the aria-controls value of the second one.

By default, the panel enters the viewport from the right. You can modify this behavior using one of the following class modifiers (applied to the .td-drawer element):

  • .td-drawer--left
  • .td-drawer--bottom

You can listen to the opening/closing of a drawer element using the two custom events drawerIsOpen and drawerIsClose that are emitted when the drawer is open/close.

Changelog

  • ✅ Component created
    🗓 September 17, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us