Vue-enjay-design NPM

🎨 Vue-EnJay-Design 1.0.0

Hi! I am a beginner web developer.I would like to present you my first module for quick layout and design your application.

I made:

Beautiful buttons
Cards (example for news)
Animations for blocks
Fast modal window generation
Own system for display image
Rows (using flex) Example(done in 2 minutes):

The overriding design goal for Markdown's formatting syntax is to make it as readable as possible. The idea is that a

📦 Installation

npm i vue-enjay-design

🔧 Connection in you `app.vue`

import Components from 'vue-enjay-design'
import 'vue-enjay-design/dist/enjay-design.css';

Description components

I try to do all components so simply in using. So, i hope, it's will be useful for you :>

`EAnimate` - cycling animation for your element. Example:

<EAnimate name="skewX">
	<EImg circle w300 src="https://enjay.ru/assets/image/myVk/8.jpg" />
</EAnimate>

API:

Name	Params
name	floating-circular, scalePlus, scaleMinus, translateX, translateY, skewX, skewY
speed	Seconds (Example from 0.1 to ♾️)

`EButton` - create buttons with superb style. Example:

<EButton orange radius20>orange radius20</EButton>
<EButton pink radius50 disabled>pink radius50</EButton>

API:

Name	Type	Params
radius5	Boolean	make border-radius 5
radius10	Boolean	make border-radius 10
radius15	Boolean	make border-radius 15
radius20	Boolean	make border-radius 15
radius50	Boolean	make border-radius 50em
blue	Boolean	set gradient, you can use `darkBlue` too for darkest gradient
green	Boolean	set gradient, you can use `darkGreen` too for darkest gradient
orange	Boolean	set gradient, you can use `darkOrange` too for darkest gradient
violet	Boolean	set gradient, you can use `darkViolet` too for darkest gradient
pink	Boolean	set gradient, you can use `darkPink` too for darkest gradient
hoverSize	Boolean	button has glow by default and animations (you can experiment)
disabled	Boolean	make your button inaccessible
link	String	Open url
target	String	like default html , for example `target="_target"` to open in new window
fontSize	String	set font size example `fontSize="30px"`

`ECard` - for quickly creating news or card with something in your app. Example:

<ECard name="This is name" image="https://cubixworld.ru/uploads/news/16.png">
	This is a text simple card
	<EHr/>
	<ERows>
		<EButton green radius50>Open</EButton>
		<EButton green disabled radius50>Like (disabled)</EButton>
	</ERows>
</ECard>

API:

Name	Type	Params
name	String	set name card
iamge	String	set url for head image in card
radius5	Boolean	make border-radius 5
radius10	Boolean	make border-radius 10
radius15	Boolean	make border-radius 15
radius20	Boolean	make border-radius 15

`EEmpty` - For set new line. Example:

<EEmpty />

`EHr` - For creating dividing line. Example:

<EHr />

API:

Name	Type	Params
size	String	height-size, example `size="10"`

`EImg` - simple inserting and styling image. Example:

<EImg circle w300 src="https://enjay.ru/assets/image/myVk/8.jpg" />

API:

Name	Type	Params
src	String	url your image
width	String	set width for image, example `width="50%"`
shadow	Boolean	set default shadow for image
circle	Boolean	make your image circle ⚽️

Quick way to set the size: you can use a boolean variables, like: `w50`, `w100`, `w150`, `w200`, `w250`, `w300`, they set `width: wNUMpx` or of course use default width from API.

`ERows` - Flex marvel 🤣. Made auto-rows with flex help. Example:

<ERows>
	<h1>EnJay</h1>
	<h1>EnJay</h1>
	<h1>EnJay</h1>
</ERows>

API:

Name	Type	Params
center	Boolean	set all your child elements to center

`EModal` - create simple modal window. Example:

<EModal yesNo v-if="modal" name="PRIVET!" yes="YEAH!" no="NOOOPE">
	Information info and inf, kek xD
</EModal>

API:

Name	Type	Params
name	String	set title for modal
yesNo	Boolean	if you want use confirmations buttons
yes	String	if you want change text in button
no	String	like previous

For use you should create method and set variable in your component.vue:

data() {
	return {
		modal: false
	};
},
methods: {
	modalResult(result){
		if(result=='yes'){
			this.modal=true
			//or do smth...
		}else(
			this.modal=false //close modal
			//or do smth...
		)
	}
}

After that, call opening modal

<EButton @click="modal = true">violet radius10</EButton>

Contacts

See my personal site-blog Email: enjay240@gmail.com

License

MIT

core-js sass sass-loader vue

@infinitebrahmanuniverse/nolb-vue-e @everything-registry/sub-chunk-3080

0.0.2

4 years ago

0.0.1

4 years ago

🎨 Vue-EnJay-Design 1.0.0

📦 Installation

🔧 Connection in you app.vue

Description components

EAnimate - cycling animation for your element. Example:

API:

EButton - create buttons with superb style. Example:

API:

ECard - for quickly creating news or card with something in your app. Example:

API:

EEmpty - For set new line. Example:

EHr - For creating dividing line. Example:

API:

EImg - simple inserting and styling image. Example:

API:

Quick way to set the size: you can use a boolean variables, like: w50, w100, w150, w200, w250, w300, they set width: *wNUM*px or of course use default width from API.

ERows - Flex marvel 🤣. Made auto-rows with flex help. Example:

API:

EModal - create simple modal window. Example:

API:

After that, call opening modal

Contacts

License

🔧 Connection in you `app.vue`

`EAnimate` - cycling animation for your element. Example:

`EButton` - create buttons with superb style. Example:

`ECard` - for quickly creating news or card with something in your app. Example:

`EEmpty` - For set new line. Example:

`EHr` - For creating dividing line. Example:

`EImg` - simple inserting and styling image. Example:

Quick way to set the size: you can use a boolean variables, like: `w50`, `w100`, `w150`, `w200`, `w250`, `w300`, they set `width: wNUMpx` or of course use default width from API.

`ERows` - Flex marvel 🤣. Made auto-rows with flex help. Example:

`EModal` - create simple modal window. Example: