Drawer

The Drawer Component Revolutionizes Your UI Space With Content Organization

The Drawer Component introduces a versatile, space-efficient way to enhance user navigation and content organization. Perfect for housing menus, filters, or additional information, this side-panel slides in and out of view on command, offering a sleek solution to manage extra content without overcrowding the main interface.

Anatomy

At its core, the Drawer Component consists of a slide-out panel, typically anchored to the side of the screen. It includes a handle or button for opening and closing, a content area for navigation links, tools, or information, and an optional overlay that dims the main content when the drawer is active, focusing user attention on the drawer's contents.

Properties

The Drawer Component is customizable through various properties, allowing it to cater to different design needs and user preferences:

import React, { useRef } from 'react';
import { PlusDrawer, PlusButton } from '@plusui/react';

const DrawerWithSlots = () => {
  const drawerRef = useRef();

  const openDrawer = () => {
    drawerRef.current.show();
  };

  return (
    <>
      <PlusButton onClick={openDrawer}>Open Drawer</PlusButton>
      <PlusDrawer ref={drawerRef}>
        <div slot="header">Drawer Header</div>
        <div slot="body">This is the body content of the drawer.</div>
        <div slot="footer">Drawer Footer</div>
      </PlusDrawer>
    </>
  );
};

export default DrawerWithSlots;

<plus-button (plus-click)="openDrawer()">Open Drawer</plus-button>
<plus-drawer #drawer>
  <div slot="header">Drawer Header</div>
  <div slot="body">This is the body content of the drawer.</div>
  <div slot="footer">Drawer Footer</div>
</plus-drawer>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-drawer-example',
  templateUrl: './drawer-example.component.html',
})
export class DrawerExampleComponent {
  @ViewChild('drawer') drawer;

  openDrawer() {
    this.drawer.show();
  }
}

<template>
  <plus-button @plus-click="openDrawer">Open Drawer</plus-button>
  <plus-drawer ref="drawer">
    <div slot="header">Drawer Header</div>
    <div slot="body">This is the body content of the drawer.</div>
    <div slot="footer">Drawer Footer</div>
  </plus-drawer>
</template>

<script>
export default {
  methods: {
    openDrawer() {
      this.$refs.drawer.show();
    }
  }
}
</script>

<plus-button id="open-drawer">Open Drawer</plus-button>
<plus-drawer id="my-drawer">
  <div slot="header">Drawer Header</div>
  <div slot="body">This is the body content of the drawer.</div>
  <div slot="footer">Drawer Footer</div>
</plus-drawer>

<script>
document.getElementById('open-drawer').addEventListener('plus-click', function() {
  document.getElementById('my-drawer').show();
});
</script>

Size

Small drawer component offers a compact space, ideal for minimal content or limited screen real estate.
Medium drawer component provides a balanced space for standard content, the most commonly used size.
Large drawer component grants ample space for extensive content or complex navigation structures.

import React, { useRef } from 'react';
import { PlusDrawer, PlusButton } from '@plusui/react';

const SmallDrawerExample = () => {
  const drawerRef = useRef();

  const openDrawer = () => {
    drawerRef.current.show(); 
  };

  return (
    <>
      <PlusButton onClick={openDrawer}>Open Small Drawer</PlusButton>
      <PlusDrawer ref={drawerRef} size="sm">
        <div slot="header">Drawer Header</div>
        <div slot="body">This is a small drawer's body content.</div>
        <div slot="footer">Drawer Footer</div>
      </PlusDrawer>
    </>
  );
};

export default SmallDrawerExample;

<plus-button (plus-click)="openDrawer()">Open Small Drawer</plus-button>
<plus-drawer #drawer size="sm">
  <div slot="header">Drawer Header</div>
  <div slot="body">This is a small drawer's body content.</div>
  <div slot="footer">Drawer Footer</div>
</plus-drawer>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-drawer-example',
  templateUrl: './drawer-example.component.html',
})
export class DrawerExampleComponent {
  @ViewChild('drawer') drawer;

  openDrawer() {
    this.drawer.show();  // Küçük çekmeceyi açar
  }
}

<template>
  <plus-button @plus-click="openDrawer">Open Small Drawer</plus-button>
  <plus-drawer ref="drawer" size="sm">
    <div slot="header">Drawer Header</div>
    <div slot="body">This is a small drawer's body content.</div>
    <div slot="footer">Drawer Footer</div>
  </plus-drawer>
</template>

<script>
export default {
  methods: {
    openDrawer() {
      this.$refs.drawer.show();
    }
  }
}
</script>

<plus-button id="open-small">Open Small Drawer</plus-button>
<plus-drawer id="small-drawer" size="sm">
  <div slot="header">Drawer Header</div>
  <div slot="body">This is a small drawer's body content.</div>
  <div slot="footer">Drawer Footer</div>
</plus-drawer>

<script>
document.getElementById('open-small').addEventListener('plus-click', function() {
  document.getElementById('small-drawer').show();  // Küçük çekmeceyi açar
});
</script>

Orientation

Orientation property of the component allows it to be positioned on the screen from the bottom, top, left, or right, seamlessly integrated over a transparent background. This transparent background can enhance the visual harmony of the application by ensuring that the Drawer Component doesn't visually clash with the underlying content.

For customizing the transparency level of the background, you can adjust it through the "Opacity" option found under the "Foundations" category in your design system or component library settings.

Bottom drawer slides up from the bottom of the screen, suitable for mobile devices or web applications needing bottom-accessible content.
Top drawer descends from the top, creating a dropdown effect perfect for notifications or additional navigation options.
Left drawer emerges from the left side, a traditional placement for navigation menus in many applications.
Right drawer appears from the right side, often used for supplementary content, settings, or profile information.

import React, { useRef } from 'react';
import { PlusDrawer, PlusButton } from '@plusui/react';

const DrawerWithOrientation = () => {
  const drawerRef = useRef();

  const openDrawer = (orientation) => {
    drawerRef.current.orientation = orientation;  // Adjust drawer orientation
    drawerRef.current.show();  // Open the drawer
  };

  return (
    <>
      <PlusButton onClick={() => openDrawer("left")}>Open Drawer (Left)</PlusButton>
      <PlusButton onClick={() => openDrawer("right")}>Open Drawer (Right)</PlusButton>
      <PlusButton onClick={() => openDrawer("top")}>Open Drawer (Top)</PlusButton>
      <PlusButton onClick={() => openDrawer("bottom")}>Open Drawer (Bottom)</PlusButton>

      <PlusDrawer ref={drawerRef}>
        <div slot="header">Drawer Header</div>
        <div slot="body">This is the body content of the drawer.</div>
        <div slot="footer">Drawer Footer</div>
      </PlusDrawer>
    </>
  );
};

export default DrawerWithOrientation;

<plus-button (plus-click)="openDrawer('left')">Open Drawer (Left)</plus-button>
<plus-button (plus-click)="openDrawer('right')">Open Drawer (Right)</plus-button>
<plus-button (plus-click)="openDrawer('top')">Open Drawer (Top)</plus-button>
<plus-button (plus-click)="openDrawer('bottom')">Open Drawer (Bottom)</plus-button>

<plus-drawer #drawer>
  <div slot="header">Drawer Header</div>
  <div slot="body">This is the body content of the drawer.</div>
  <div slot="footer">Drawer Footer</div>
</plus-drawer>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-drawer-example',
  templateUrl: './drawer-example.component.html',
})
export class DrawerExampleComponent {
  @ViewChild('drawer') drawer;

  openDrawer(orientation) {
    this.drawer.orientation = orientation;  // Adjust drawer orientation
    this.drawer.show();  // Open the drawer
  }
}

<template>
  <plus-button @plus-click="openDrawer('left')">Open Drawer (Left)</plus-button>
  <plus-button @plus-click="openDrawer('right')">Open Drawer (Right)</plus-button>
  <plus-button @plus-click="openDrawer('top')">Open Drawer (Top)</plus-button>
  <plus-button @plus-click="openDrawer('bottom')">Open Drawer (Bottom)</plus-button>

  <plus-drawer ref="drawer">
    <div slot="header">Drawer Header</div>
    <div slot="body">This is the body content of the drawer.</div>
    <div slot="footer">Drawer Footer</div>
  </plus-drawer>
</template>

<script>
export default {
  methods: {
    openDrawer(orientation) {
      this.$refs.drawer.orientation = orientation;  // Adjust drawer orientation
      this.$refs.drawer.show();  // Open the drawer
    }
  }
}
</script>

<plus-button id="open-drawer-left">Open Drawer (Left)</plus-button>
<plus-button id="open-drawer-right">Open Drawer (Right)</plus-button>
<plus-button id="open-drawer-top">Open Drawer (Top)</plus-button>
<plus-button id="open-drawer-bottom">Open Drawer (Bottom)</plus-button>

<plus-drawer id="drawer">
  <div slot="header">Drawer Header</div>
  <div slot="body">This is the body content of the drawer.</div>
  <div slot="footer">Drawer Footer</div>
</plus-drawer>

<script>
function openDrawer(orientation) {
  const drawer = document.getElementById('drawer');
  drawer.orientation = orientation;  // Adjust drawer orientation
  drawer.show();  // Open the drawer
}

document.getElementById('open-drawer-left').addEventListener('plus-click', function() {
  openDrawer("left");
});

document.getElementById('open-drawer-right').addEventListener('plus-click', function() {
  openDrawer("right");
});

document.getElementById('open-drawer-top').addEventListener('plus-click', function() {
  openDrawer("top");
});

document.getElementById('open-drawer-bottom').addEventListener('plus-click', function() {
  openDrawer("bottom");
});
</script>

Drawer Component Features

After importing the Drawer Component from your assets, you should "Detach" it. This allows you to customize the content area with specific design elements while keeping the header and footer consistent with the original component, ensuring ease of use and design consistency.

Layout & Spacing

The Drawer Component is designed with a focus on efficient layout and spacing, ensuring the content within is easily navigable and visually appealing. Proper spacing prevents clutter, enhancing readability and user interaction, while its layout is thoughtfully designed to complement the main content area without interference.

Light & Dark Mode

This component is equipped to seamlessly integrate into both light and dark mode settings, adapting its color scheme to match the overall aesthetic of the application or the user's system preferences, ensuring a consistent and strain-free viewing experience.

Accessibility

Accessibility features of the Drawer Component include keyboard navigability, focus management, and screen reader support. ARIA attributes are utilized to articulate the drawer's state and role in the interface, ensuring that all users, regardless of their method of interaction, can efficiently use the drawer component.

Design System

API

PreviousDivider NextDropdown

Last updated 6 months ago