HTMLPLUS

Drawer

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

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

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
"bottom" | "end" | "left" | "right" | "start" | "top""bottom" | "end" | "left" | "right" | "start" | "top"
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

Below is a collection of simple to complex examples.

PreviewScriptStylesandboxEdit 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 logo
React