> Vue.js component which shows a sticker displaying current environment name (e.g. 'demo', 'stg')
You can make it easier to understand which environments you are accessing (staging? demo? production?) and **reduce incidents.**
### ✨ Demo
[CodePen](https://codepen.io/doyaaaaaken/pen/NWxqyYz)
**ℹ️ Theare are only few themes available. I'll waiting your pull requests for the new COOL themes. See [HOW_TO_DEVELOP.md](HOW_TO_DEVELOP.md) if you're interested in it.**
# Usage
## with Yarn / npm
Install it.
```bash
yarn add vue-environment-sticker
# or if you use npm
# `npm install vue-environment-sticker`
```
Then, import and register the component.
```javascript
import Vue from "vue";
import EnvironmentSticker from "vue-environment-sticker";
Vue.component("environment-sticker", EnvironmentSticker);
```
The component itself does not include any CSS. You'll need to include it separately:
```javascript
import 'vue-environment-sticker/dist/vue-environment-sticker.css';
```
Alternatively, you can import the scss for complete control of the component styles:
```scss
@import "vue-environment-sticker/dist/vue-environment-sticker.css";
```
That's all!! You can use `environment-sticker` component like below.
```sh
```
These are available props. (**all props are optional.**)
| name | type | default value | description |
|------------|---------------|---------------|-------------------------------------|
| label | String | `DEMO` | label which shows environment name |
| position | String | `BOTTOM_RIGHT` | sticker position.
Available values: `BOTTOM_RIGHT` / `BOTTOM_LEFT` |
| theme | String | `SQUARE` | The appearance of the label.
Available values: `SQUARE`
**ℹ️ Theare are only few themes available. I'll waiting your pull requests for the new COOL themes. See [HOW_TO_DEVELOP.md](HOW_TO_DEVELOP.md) if you're interested in it.** |
| containerStyles | Object | `{}` | CSS styles for the container. This is bound as [inline style](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles).
e.g. `{padding: '4px'}` |
| labelStyles | Object | `{}` | CSS styles for the label. This is bound as [inline style](https://vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles).
e.g. `{fontSize: '12px', color: 'blue'}` |
## via CDN (directly install in the browser)
you can install it directly in the browser through CDN.
```html
```
That's all!! You can use `environment-sticker` component.
See detail on `with Yarn / npm Section`.
## Show your support
Give a ⭐️ if this project helped you!
***
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_
---
_Source: https://npm.io/package/vue-environment-sticker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
