🎨 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: *wNUM*px 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: [email protected]

License

MIT