Nuanced Pumpkin Mavens

    @undercoatcss/backdrop

    0.5.1 • Public • Published

    @undercoatcsss/backdrop

    Backdrop is a component of the Undercoat.css framework.

    Travis (.org) npm (scoped) WCAG 2.0 Level AA schema.org

    CAUTION! IT'S UNDER HEAVY DEVELOPMENT CURRENTLY! DON'T USE IT IN PRODUCTION!

    Description

    Backdrop is a logically and functionally independent reusable page component (block), which represents a camouflage surface. It appears behind all other surfaces in the UI to make it disabled. Сommonly used with dialog component (modal).

    Installation

    NPM

    npm install @undercoatcss/backdrop

    Usage

    After installation, you can link or import the assets into your project:

    CDN

    <script src="https://unpkg.com/@undercoatcss/backdrop@latest/dist/backdrop.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@undercoatcss/backdrop@latest/dist/backdrop.min.css">

    Webpack

    import Backdrop from '@undercoatcss/backdrop';
    import '@undercoatcss/backdrop/backdrop.css';

    Settings

    The component provides CSS custom property to change its defaults.

    Property Default value
    --backdrop--z-index 99
    --backdrop--opacity 0.5
    --backdrop--background-color #000000
    --backdrop--transition-duration 0.5s
    --backdrop--transition-timing-function ease

    Methods

    The component provides the following Javascript methods:

    show()

    Shows backdrop.

    Backdrop.show();

    hide()

    Hides backdrop.

    Backdrop.hide();

    Browser support

    Undercoat is compatible with 2 recent desktop versions of:

    • Chrome
    • Edge
    • Firefox
    • Opera
    • Safari

    and 2 recent mobile versions of:

    • Chrome
    • Safari

    We support only recent browsers to keep the components codebase clean and provide high performance.

    The .browserlist config is provided.

    Key concepts

    Undercoat is based on the next main principles:

    Contributing

    If you're interested in the improvement of this project you can help in the following ways:

    • bug reporting and new feature requesting by creating issues on plugin GitHub page;
    • contribution to a project following these instructions.

    Install

    npm i @undercoatcss/backdrop

    DownloadsWeekly Downloads

    1

    Version

    0.5.1

    License

    GPL-3.0-or-later

    Unpacked Size

    46.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • lautsevich