danieldiekmeier / Vue Slide Up Down
Licence: mit
Like jQuery's slideUp/slideDown, but for Vue!
Stars: ✭ 180
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Slide Up Down
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+40.56%)
Mutual labels: component, vue2
Vue Img Inputer
🏞 A graceful image type inputer / uploader
Stars: ✭ 548 (+204.44%)
Mutual labels: component, vue2
Vue Ydui
A mobile components Library with Vue2.js. 一只基于Vue2.x的移动端组件库。
Stars: ✭ 2,798 (+1454.44%)
Mutual labels: component, vue2
Vue Tinymce Editor
This a component provides use of tinymce for vue developers
Stars: ✭ 216 (+20%)
Mutual labels: component, vue2
Region Picker
A region picker based on Vue and ElementUI.
Stars: ✭ 59 (-67.22%)
Mutual labels: component, vue2
Vue Marquee Text Component
[CSS GPU Animation] Marquee Text for vuejs
Stars: ✭ 226 (+25.56%)
Mutual labels: component, vue2
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+2840.56%)
Mutual labels: component, vue2
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (+20%)
Mutual labels: component, vue2
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-81.11%)
Mutual labels: component, vue2
Vue Truncate Collapsed
A simple component that truncates your text and adds a 'Read More/Show Less' clickable.
Stars: ✭ 98 (-45.56%)
Mutual labels: component, vue2
Vue Typer
Vue component that simulates a user typing, selecting, and erasing text.
Stars: ✭ 691 (+283.89%)
Mutual labels: component, vue2
Stf Vue Select
stf vue select - most flexible and customized select
Stars: ✭ 61 (-66.11%)
Mutual labels: component, vue2
Vue Datatables Net
Vue jQuery DataTables.net wrapper component
Stars: ✭ 119 (-33.89%)
Mutual labels: component, vue2
Vue Draggable Resizable
Vue2 Component for draggable and resizable elements.
Stars: ✭ 2,431 (+1250.56%)
Mutual labels: component
React Twitter Embed
Simplest way to add twitter widgets to your react project.
Stars: ✭ 171 (-5%)
Mutual labels: component
React Native List Popover
Popover to render a selectable list
Stars: ✭ 168 (-6.67%)
Mutual labels: component
Vue Grid Canvas
A vue component, it can generate a similar excel form for you
Stars: ✭ 179 (-0.56%)
Mutual labels: component
vue-slide-up-down
Like jQuery's slideUp
/ slideDown
, but for Vue!
Demo: https://codepen.io/danieldiekmeier/pen/YapGWq
Installation
npm i vue-slide-up-down
Usage with Webpack or other module bundlers:
import SlideUpDown from 'vue-slide-up-down'
// or
const SlideUpDown = require('vue-slide-up-down')
Vue.component('slide-up-down', SlideUpDown)
Or use the UMD build directly in your browser (the component is provided as window.VueSlideUpDown
).
<script
type="text/javascript"
src="node_modules/vuejs/dist/vue.min.js"
></script>
<script
type="text/javascript"
src="node_modules/vue-slide-up-down/dist/vue-slide-up-down.umd.js"
></script>
<script type="text/javascript">
Vue.component('slide-up-down', VueSlideUpDown)
</script>
Usage
The component takes four props:
-
active
(Boolean, required): Whether to show the component (true
) or not (false
) -
duration
(Number, optional): How long the animation is supposed to be, in milliseconds. Defaults to500
. -
tag
(String, optional): Which HTML tag to use for the wrapper element. Defaults todiv
. -
use-hidden
(Boolean, optional): Whether to apply the "hidden" attribute to the element when closed. Defaults totrue
. This hides the component from the screen and from assistive devices. The internal elements of the component are completely invisible, and cannot be focused on (by a keyboard or assistive device). (This is probably what you want!) If you need, set this property tofalse
to not use thehidden
attribute. This could be used if you wanted to have a min-height requirement on your component. ⚠️ Note that this can create accessibility issues, specifically for users with a keyboard or screen reader. Even though the component may appear hidden, focusable elements within the component are still able to be accessed through keyboard navigation.
<div class="MyContent">
<h1>Always show this</h1>
<slide-up-down :active="active" :duration="1000">
Only show this if "active” is true
</slide-up-down>
</div>
The component emits four Vue events:
open-start
open-end
close-start
close-end
<slide-up-down @close-end="console.log('done closing!')" />
transition-timing-function
Custom If you want to use a different timing function, add some CSS for your <slide-up-down>
element. (See demo/index.html
for a full example.)
<style>
.wobbly-accordion {
transition-timing-function: cubic-bezier(0.195, 1.65, 0.435, -0.6);
}
</style>
<slide-up-down class="wobbly-accordion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta omnis velit
ab culpa, officia, unde nesciunt temporibus cum reiciendis distinctio.
</slide-up-down>
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].