npm.io
0.2.1 • Published 6 years ago

vue-environment-sticker

Licence
Apache-2.0
Version
0.2.1
Deps
2
Size
269 kB
Vulns
1
Weekly
0
Stars
2
SummaryDependencyVersions

Welcome to vue-environment-sticker

Version License: Apache--2.0

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

Image of Demo page

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/vue-environment-sticker@0.2.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-environment-sticker@0.2.0/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

Keywords

Vue.jscomponent