Skip to content

Drawer

Navigation drawers provide access to destinations in your app. material.io

Importing

Drawer components are an extension of the <List/> component

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import React from "react";
import { Drawer } from "photoncss/react";

export default function Component() {
    return (
        <Drawer>
            ...content
        </Drawer>
    );
}

Props

Name Default Possible Values Type Description
from left left, right, top, bottom string Sets the origin of the drawer to slide out from when opened.
swipe true Boolean value boolean Enables the drawer to be opened using a gesture on a touch display.

Note

Props other than those listed above such as className and style will be passed directly to the <aside/> element.

Dynamic component

The snippet above will not render any visible content. To use Drawers to their full potential, incorperate the Photon.Drawer() method.