menu
Dark Mode
backgroundLayer 1
preact-material-components
Components and their props
  • Drawer.Drawer
    • dismissible true/false
      Builds a dismissible drawer.
    • modal true/false
      Builds a modal based drawer.
  • Drawer.DrawerHeader
    • no specific props
  • Drawer.DrawerContent
    • no specific props
  • Drawer.DrawerItem
    • selected true/false
      Tells if the drawer item is selected.
Custom events
  • onOpen
    Fired when the drawer is opened.
  • onClose
    Fired when the drawer is closed.
Sample code
import {h, Component} from 'preact';
import Drawer from 'preact-material-components/Drawer';
import List from 'preact-material-components/List';
import Button from 'preact-material-components/Button';
import 'preact-material-components/Drawer/style.css';
import 'preact-material-components/List/style.css';
import 'preact-material-components/Button/style.css';

export default class DrawerPage extends Component {
  constructor(){
    super();
    this.state = {
      drawerOpened = false
    };
  }
  render(){
    return (
      <div>
        <Button onClick={() => {
            this.setState({
              drawerOpened: !this.state.drawerOpened
            })
          }}
        >
          Open Drawer
        </Button>
        <Drawer
          modal
          open={this.state.drawerOpened}
          onClose={() => {
            this.setState({
              drawerOpened: false
            });
          }}>
          <Drawer.DrawerHeader className="mdc-theme--primary-bg">
            Components
          </Drawer.DrawerHeader>
          <Drawer.DrawerContent>
            <Drawer.DrawerItem>
              <List.ItemIcon>home</List.ItemIcon>
              Home
            </Drawer.DrawerItem>
          </Drawer.DrawerContent>
        </Drawer>
      </div>
    );
  }
}
Original documentation
This component encapsulates mdc-drawer, you can refer to its documentation here.