https://github.com/marinko-peso/vue-pure-modal

👾 Pure & simple Vue Modal component
https://github.com/marinko-peso/vue-pure-modal

Last synced: about 1 month ago
JSON representation

👾 Pure & simple Vue Modal component

• Host: GitHub
• URL: https://github.com/marinko-peso/vue-pure-modal
• Owner: marinko-peso
• License: mit
• Created: 2019-10-29T16:45:27.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T12:49:56.000Z (over 2 years ago)
• Last Synced: 2025-03-12T14:50:44.272Z (about 2 months ago)
• Language: Vue
• Size: 1.44 MB
• Stars: 4
• Watchers: 0
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-pure-modal

[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103)](https://github.com/ellerbrock/open-source-badges/)

[![license](https://img.shields.io/github/license/marinko-peso/vue-pure-modal.svg)](https://github.com/marinko-peso/vue-pure-modal/blob/master/LICENSE)

[![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg)](https://github.com/Flet/semistandard)

[![package version](https://img.shields.io/npm/v/vue-pure-modal.svg)](https://npm.im/vue-pure-modal)

[![install size](https://packagephobia.now.sh/badge?p=vue-pure-modal)](https://packagephobia.now.sh/result?p=vue-pure-modal)

👾 Pure & simple Vue Modal component. Basic a11y covered.

## Installation

`npm i vue-pure-modal`

## Demo

Checkout demo example on [CodeSandbox](https://codesandbox.io/s/vue-pure-modal-demo-x6n9g).

## Usage

As global component:

```

import PureModal from 'vue-pure-modal';

import Vue from 'vue';

Vue.use(PureModal);

```

Or import where you use it in your components:

```

import { PureModal } from 'vue-pure-modal';

...

components: {

  PureModal

}

```

## Example

```

  

    Pure Modal Title

  

  

    Hide me!

  

  Modal body here as a message.

```

You can specify additional options:

- `animate` - to apply smooth open/close transition. `true` by default.

- `focusTrap` - to trap tab focus inside modal while open. `true` by default.

- `describedByBody` - to set modal a11y describedBy to modal body section. `false` by default.

To use basic style (its not really pretty sorry!) just import generated css:

```

import 'vue-pure-modal/dist/puremodal.css';

```

In case you want to use this basic style and overwrite some parts of it you can simply do so since it was written with BEM naming.

Example in scss:

```

.my-custom-class.puremodal .puremodal {

  &__body {

    font-size: 2rem;

  }

}

```

Or in regular css:

```

.my-modal.puremodal .puremodal__body {

  font-size: 2rem;

}

```

Changing backdrop modal throws is also easy:

```

.my-modal.puremodal.puremodal__drop {

  color: blue;

}

```

To overwrite default styles coming with modal be sure to add your custom css class to `` component, like `.my-modal` in examples above.

## License

MIT.