All Projects → KamilOcean → Vue Sticker

KamilOcean / Vue Sticker

Licence: mit
Vue component, that helps to make sticky effects

Projects that are alternatives of or similar to Vue Sticker

Ms Design
Vue components that implement Microsoft Design Language
Stars: ✭ 150 (-20.63%)
Mutual labels:  vue-components
Vue Styleguidist
Created from react styleguidist for Vue Components with a living style guide
Stars: ✭ 2,133 (+1028.57%)
Mutual labels:  vue-components
Vue Beauty
Beautiful UI components build with vue and ant design
Stars: ✭ 2,109 (+1015.87%)
Mutual labels:  vue-components
Vue Codemirror
⌨️ @codemirror component for @vuejs
Stars: ✭ 2,115 (+1019.05%)
Mutual labels:  vue-components
Vue Info Card
Simple and beautiful card component with an elegant spark line, for VueJS.
Stars: ✭ 159 (-15.87%)
Mutual labels:  vue-components
Vue Objccn
🔥 Use Vue.js to develop a cross-platform full stack application / 用 Vue.js 开发的跨三端应用
Stars: ✭ 1,993 (+954.5%)
Mutual labels:  vue-components
Tgs To Gif
Converts animated Telegram stickers (*.tgs) to animated GIFs (.gif)
Stars: ✭ 148 (-21.69%)
Mutual labels:  stickers
Vue Switches
An on/off switch component for Vue.js with theme support.
Stars: ✭ 188 (-0.53%)
Mutual labels:  vue-components
Vue Pivot Table
A vue component for pivot table
Stars: ✭ 162 (-14.29%)
Mutual labels:  vue-components
Vueleaflet
Vue components for Leaflet maps
Stars: ✭ 177 (-6.35%)
Mutual labels:  vue-components
Vue Literal Compiler
A Vue Compiler that allows you compile your string literals to render functions at build time and write components in SFC paradigm
Stars: ✭ 158 (-16.4%)
Mutual labels:  vue-components
Vuejs Clipper
Vue.js image clipping components using Vue-Rx.
Stars: ✭ 161 (-14.81%)
Mutual labels:  vue-components
Fundamental Vue
Vue.js components implementation of Fundamental Library Styles guidelines. The library is aiming to provide a Vue.js implementation of the components designed in Fundamental Library Styles.
Stars: ✭ 169 (-10.58%)
Mutual labels:  vue-components
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件,包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (-17.46%)
Mutual labels:  vue-components
Vue Bootstrap4 Table
Advanced table based on Vue 2 and Bootstrap 4 ⚡️
Stars: ✭ 187 (-1.06%)
Mutual labels:  vue-components
Vue Wait
Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications
Stars: ✭ 1,869 (+888.89%)
Mutual labels:  vue-components
Vue Email Editor
Drag-n-Drop Email Editor Component for Vue.js
Stars: ✭ 166 (-12.17%)
Mutual labels:  vue-components
Vue Eva Icons
Is a pack of more than 480 beautiful open source Eva icons as Vue components
Stars: ✭ 189 (+0%)
Mutual labels:  vue-components
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-0.53%)
Mutual labels:  vue-components
Eth Vue
Featured in Awesome Vue [https://github.com/vuejs/awesome-vue], a curated list maintained by vuejs of awesome things related to the Vue.js framework, and Awesome List [https://awesomelists.net/150-Vue.js/3863-Open+Source/18749-DOkwufulueze-eth-vue], this Truffle Box provides everything you need to quickly build Ethereum dApps that have authentication features with vue, including configuration for easy deployment to the Ropsten Network. It's also Gravatar-enabled. Connecting to a running Ganache blockchain network from Truffle is also possible -- for fast development and testing purposes. Built on Truffle 5 and Vue 3, eth-vue uses vuex for state management, vuex-persist for local storage of app state, and vue-router for routing. Authentication functionalities are handled by Smart Contracts running on the Ethereum blockchain.
Stars: ✭ 171 (-9.52%)
Mutual labels:  vue-components

vue-sticker

Vue component, that helps to make sticky effects

example

Build Status js-standard-style npm version

Installation

# install component
npm install --save-dev vue-sticker

using like local component

import VueSticker from 'vue-sticker'

...
    components: { VueSticker }

or use globally

import VueSticker from 'vue-sticker'
import Vue from 'Vue'

Vue.use(VueSticker)

Usage

After installing you can use vue-sticker component in your templates:

<VueSticker :d="300"></VueSticker>

Props description

prop name type description
d Number required It's diameter of your sticker (width and height of block)
className String This allows to you add styles to sticker by this name. For example: if you set className="good", then you can styling this sticker with .good__wrapper, .good__main-image and .good__backside-image. Your pictures has to be describe in these classes. By default className is set to 'vue-sticker'
prefix String that allows to you keep style guide and metodology, that you use in all your project. This string will be added between className and other words (elements). For example, you can set it in '--', and you get something like this: .goode--wrapper, .good--main-image and .good--backside-image. By default uses __
end Number/Boolean end point of sticky ability. This prop has to be > 0 and < d (size of your component)
deg Number this prop need to set degree that will be used when we active sticker by Enter key, without mouse cursor (Yes, i thought about accessibility). Also this prop uses for first animation helper (if you turn it on)
tipAnimation Boolean This prop turn on/off first animation, to indicate users, taht this element can sticky. (Indeed, i think about it case, may be it can be design by other way)

Describe your styles in component where you use vue-sticker by three elements: wrapper, main-image and backside-image.

Sass example with className="good"

Illustrate case when you set main-image, but backside is just color

<VueSticker :d="200" className="good" />
.good

    &__wrapper

        &:focus
            box-shadow: 0 0 5px 10px rgba(0, 0, 0, .4)

    &__main-image
        background-image: url('your-image.png')

    &__backside-image
        background-color: lighgray
        opacity: .4

CSS example with className="example" and prefix="--"

<VueSticker :d="200" className="example" prefix="--" />

In this case we skip wrapper just for example. Usually wrapper styles need to add :hover and :focus for your component. But it's not must have.

.example--main-image {
    background-image: url('example.png');
}

.example--backside-image {
    background-image: url('back.png');
}

getPercent event

Vue-sticker always generate event, that indicate number from 0 to 1 of sticky complition. When user get down of sticker it will be 1.

To handle this event you just need add your method in your parent component and subscribe on event getPercent in vue-sticker component.

<VueSticker :d="400" @getPercent="doSomething" />

And set your method in parent component, for example we use percent:

...
doSomething(value) {
    this.percentOfComplition = value * 100;
}

Backers

Maxim Chagin — 17$

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].