Have ideas to improve npm?Join in the discussion! »

    @vcl/drawer

    0.6.3 • Public • Published

    VCL drawer

    Sliding drawer.

    Features

    Sliding drawer and main panel. In closed state, only the main area is visible.

    Visibility of the drawer is controlled via modifiers. The margin of the content must be set programmatically according to the width of the drawer.

    The slide in/ out of the drawer is animated.

    Usage

    In this example, the drawer panel is open via the vclDrawerOpen modifier and the inline style margin-left: 256px; on the vclDrawerContent.

    wide example

    This rule makes the main panel appear below the drawer panel. This is intended for narrow viewports.

    side example

    In this example, the drawer is closed and only the main panel is visible.

    closed example

    The drawer panel can also be laid out to the right of the main panel using the vclDrawerRight modifier.

    Classes

    • vclDrawerContainer
    • vclDrawer
    • vclDrawerContent
    • vclDrawerBackdrop

    Modifiers

    • vclDrawerOpen: To open the panel.
    • vclDrawerBackdropVisible: Must be toggled for backdrop animation
    • vclDrawerRight: Drawer is rendered on the right side
    • vclDrawerAnimations: Enables drawer animations

    Variables

    • --drawer-color
    • --drawer-bg-color
    • --drawer-content-bg-color

    Demo

    example.html on GH-pages.

    Install

    npm i @vcl/drawer

    DownloadsWeekly Downloads

    15

    Version

    0.6.3

    License

    MIT

    Unpacked Size

    30.5 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar