vue-environment-sticker
v0.2.1
Published
Vue.js component which shows a sticker displaying current environment name (e.g. 'demo', 'stg')
Downloads
12
Readme
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
ℹ️ Theare are only few themes available. I'll waiting your pull requests for the new COOL themes. See HOW_TO_DEVELOP.md if you're interested in it.
Usage
with Yarn / npm
Install it.
yarn add vue-environment-sticker
# or if you use npm
# `npm install vue-environment-sticker`
Then, import and register the component.
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:
import 'vue-environment-sticker/dist/vue-environment-sticker.css';
Alternatively, you can import the scss for complete control of the component styles:
@import "vue-environment-sticker/dist/vue-environment-sticker.css";
That's all!! You can use environment-sticker
component like below.
<body>
<div class="content-wrapper>
<h1>Demo page</h1>
</div>
<EnvironmentSticker
label="STAGING"
theme="SQUARE"
/>
</body>
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 if you're interested in it. |
| containerStyles | Object | {}
| CSS styles for the container. This is bound as inline style. e.g. {padding: '4px'}
|
| labelStyles | Object | {}
| CSS styles for the label. This is bound as inline style. e.g. {fontSize: '12px', color: 'blue'}
|
via CDN (directly install in the browser)
you can install it directly in the browser through CDN.
<!-- include VueJS first -->
<!--<script src="https://unpkg.com/vue@latest"></script>-->
<!-- use the latest vue-environment-sticker release -->
<script src="https://unpkg.com/vue-environment-sticker@latest"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-environment-sticker@latest/dist/vue-environment-sticker.css">
<!-- or point to a specific vue-environment-sticker release -->
<script src="https://unpkg.com/[email protected]"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-environment-sticker.css">
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