HTMLPLUS

Drawer

This component lets you add collapsible side contents like navigation alongside some primary content.

Usage

Follow the tutorials here to use the HTMLPLUS library on React-based projects.

API

PlusDrawer

Select your desired component from below and see the available properties, slots, events, styles and methods.

Properties

Slots

Events

CSS Variables

CSS Parts

Methods

Name

animation

Type

stringstring

Default

undefined

TODO

Name

backdrop

Type

"auto" | boolean"auto" | boolean

Default

'auto'

Activate the drawer's backdrop to show or not.

Name

breakpoint

Type

"lg" | "md" | "sm" | "xs""lg" | "md" | "sm" | "xs"

Default

'md'

Sets the mobile breakpoint to apply alternate styles for mobile devices
when the breakpoint value is met.

Name

connector

Type

stringstring

Default

undefined

This property helps you to attach which drawer toggler controls the drawer.
It doesn't matter where the drawer toggler is.
You can put the drawer's toggler inside or outside of the drawer.
Read more about connectors here.

Name

flexible

Type

booleanboolean

Default

undefined

It controls the flexibility of the drawer's width. If yes, the width of the drawer can be reduced.
If false doesn't allow the width of the drawer to reduce.

Name

mini

Type

booleanboolean

Default

undefined

Set the width of drawer to the minimum size you specified for the mini-size property.

Name

miniSize

Type

stringstring

Default

undefined

Sets the minimum width size of the drawer.

Name

open

Type

booleanboolean

Default

undefined

Control drawer to show or not.

Name

persistent

Type

booleanboolean

Default

undefined

If true, don't allow the drawer to be closed by clicking outside of the drawer.
If false, the drawer will be closed by clicking outside of it.

Name

placement

Type

Default

undefined

Specifies where the drawer will open.

Name

size

Type

stringstring

Default

undefined

Determine the width of the drawer.

Name

temporary

Type

"on-breakpoint" | boolean"on-breakpoint" | boolean

Default

undefined

On default the drawer is considered as a part of the main container.
it pushes the other contents on opening.
If true it will be opened over other contents and doesn't affect other contents.
A temporary drawer sits above its application and uses a backdrop to darken the background.

Name

default

The default slot.

Name

onClose

When the drawer is going to hide

Value

void

Name

onClosed

When the drawer is completely closed and its animation is completed.

Value

void

Name

onOpen

When the drawer is going to show this event triggers

Value

void

Name

onOpened

When the drawer is completely shown and its animation is completed.

Value

void

Name

--plus-drawer-size

You can use it to set the width size of the drawer using css variables.

Name

--plus-drawer-mini-size

You can use it to set the minimum width size of the drawer using css variables.

Name

backdrop

Examples

Below is a collection of simple to complex examples.

Default

Preview

Script

Style

sandbox

Edit on CodeSandbox

import React from "react";
import { Grid, Drawer, Card } from "@htmlplus/react";

const App = () => {
  return <>    
    <Grid>      
      <Grid.Item xs="auto">        
        <Drawer animation="fade" size="200px" connector="drawer-default">          
          <Card>
            Drawer Content
          </Card>          
        </Drawer>        
      </Grid.Item>      
      <Grid.Item xs="grow">        
        <Card>          
          <Drawer.Toggler connector="drawer-default">
            Toggle
          </Drawer.Toggler>          
        </Card>        
      </Grid.Item>      
    </Grid>    
  </>;
};

export default App;

plus-card {
  --plus-card-background-color: #E0E0E0;
  padding: 10rem 0;
  text-align: center;
}
plus-drawer plus-card {
  --plus-card-background-color: #AACAFF;
  margin-right: 0.5rem;
}

Contributors

Prev
Divider

Next
Grid

SELECT YOUR FRAMEWORK

React