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.

anatomy of drawer component

Properties

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

Size	Orientation
Small	Bottom
Medium	Top
Large	Right
	Left

React

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;

Angular

<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();
  }
}

Vue

<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>

Javascript

<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.

React

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;

Angular

<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
  }
}

Vue

<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>

Javascript

<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.

React

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;

Angular

<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
  }
}

Vue

<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>

Javascript

<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.

drawer component features

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.

layout & spacing of drawer component

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.

light & dark mode of drawer component

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.

Criteria	Description	Status
ARIA Attributes	Ensures ARIA attributes are allowed for an element's role	✔️ Passed
ARIA Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	✔️ Passed
ARIA Valid Values	Ensures all ARIA attributes have valid values	✔️ Passed
ARIA Valid Names	Ensures attributes that begin with aria- are valid ARIA attributes	✔️ Passed
Discernible Text	Ensures buttons have discernible text	✔️ Passed
Nested Interactive Controls	Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies	✔️ Passed
Tabindex Attribute	Ensures tabindex attribute values are not greater than 0	✔️ Passed
ID Attributes	Ensures every id attribute value is unique	✔️ Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	✔️ AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
orientation	Sets the drawer's opening direction	String	left, right, top, bottom	right
size	Sets the drawer's size	String	sm, md, lg	md
is-open	Determines if the drawer is open	Boolean	true, false	false