davidgaroro / Vuetify Swipeout
Licence: mit
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Vuetify Swipeout
Vuetify Todo Pwa
✔️ A simple Todo PWA built with Vue CLI 3 + Vuex + Vuetify.
Stars: ✭ 160 (+36.75%)
Mutual labels: vue-cli, material-design, material, vuetify, vuejs2, pwa, vue2
Swiper
Most modern mobile touch slider with hardware accelerated transitions
Stars: ✭ 29,519 (+25129.91%)
Mutual labels: mobile, swipe, slider, touch, swiper, touch-events
Vue Awesome Swiper
🏆 Swiper component for @vuejs
Stars: ✭ 12,072 (+10217.95%)
Mutual labels: swipe, slider, swiper, vuejs2, vue2
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+17070.94%)
Mutual labels: material-design, material, vuejs2, pwa, vue2
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: ✭ 2,046 (+1648.72%)
Mutual labels: mobile, swipe, slider, touch
Keen Slider
The HTML touch slider carousel with the most native feeling
Stars: ✭ 3,097 (+2547.01%)
Mutual labels: mobile, slider, touch, touch-events
Vuetify Material Dashboard
Vuetify Material Dashboard - Open Source Material Design Admin
Stars: ✭ 1,023 (+774.36%)
Mutual labels: vue-cli, material, vuetify, vuejs2
Framework7
Full featured HTML framework for building iOS & Android apps
Stars: ✭ 16,560 (+14053.85%)
Mutual labels: material-design, mobile, material, touch
Vue Ts Daily
基于vue、Typescript、pwa的一款习惯养成app
Stars: ✭ 735 (+528.21%)
Mutual labels: vue-cli, vuejs2, pwa
Slidetoact
A simple 'Slide to Unlock' Material widget for Android, written in Kotlin 📱🎨🦄
Stars: ✭ 783 (+569.23%)
Mutual labels: material-design, material, slider
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+28177.78%)
Mutual labels: material-design, material, vuetify
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Stars: ✭ 45,802 (+39047.01%)
Mutual labels: material-design, mobile, pwa
Vue Crud
Vue.js based REST-ful CRUD system
Stars: ✭ 629 (+437.61%)
Mutual labels: material-design, vuetify, vuejs2
Demo Progressive Web App
🎉 A demo for progressive web application with features like offline, push notifications, background sync etc,
Stars: ✭ 798 (+582.05%)
Mutual labels: material-design, material, pwa
Dashboard
A dashboard scaffolding based on Vue.js 3.0 created by Vite.
Stars: ✭ 497 (+324.79%)
Mutual labels: vue-cli, vuejs2, vue2
Vuetify Admin Dashboard
A Crud Admin panel made from Vue js and Vuetify
Stars: ✭ 481 (+311.11%)
Mutual labels: vue-cli, vuetify, vuejs2
Quasar Awesome
🎉 A list of awesome things related to Quasar
Stars: ✭ 995 (+750.43%)
Mutual labels: material-design, material, vue2
Mdi Vue
Material design icons for vue.js
Stars: ✭ 53 (-54.7%)
Mutual labels: material-design, vuejs2, vue2
Generator Ngx Rocket
🚀 Extensible Angular 11+ enterprise-grade project generator
Stars: ✭ 1,329 (+1035.9%)
Mutual labels: mobile, material, pwa
React Easy Swipe
Easy handler for common swipe operations
Stars: ✭ 85 (-27.35%)
Mutual labels: mobile, swipe, touch
vuetify-swipeout
This project is a swipe out example built with Vue, Vuetify and Swiper.
Features
- Vue CLI 3 + Webpack + vue-loader for single file Vue components
- Hot-reload in development
- Lint-on-save with ESLint (Standard)
- Stylus CSS preprocessor
- Vuetify a-la-carte (reduce project's size in production)
- Progressive Web App
- App manifest
- Service worker
- Workbox options - Cache Google Fonts
- 100/100 Lighthouse score
Built With
Dependencies
Name | Description | |
---|---|---|
swiper | ️Most Modern Mobile Touch Slider | 👆 |
vue | Progressive JavaScript Framework | 🖖 |
vue-cli-3 | ️Standard Tooling for Vue.js Development | 🛠️ |
vuetify | ️Material Component Framework for Vue.js | 📚 |
Development Dependencies
Name | Description | |
---|---|---|
stylus-loader | CSS preprocessor for webpack | 🎨 |
vue/cli-plugin-babel | Compiler for next generation JavaScript | 🐠 |
vue/cli-plugin-eslint | Pluggable JavaScript linter | ✍️ |
vue/cli-plugin-pwa | JavaScript Library for adding support to PWA | 📱 |
How To Use Swiper with Vuetify
For information on how to use Swiper, visit the official documentation
Install Swiper
npm install swiper --save
Add v-list component
<!-- App.vue -->
<template>
...
<v-list>
<template v-for="(item, index) in items">
<custom-component
:id="`item-${item}`"
@transitionEnd="customFunction"
...
/>
<v-divider...></v-divider>
</template>
</v-list>
...
</template>
<script>
import CustomComponent from '@/components/CustomComponent.vue'
export default {
components: {
'custom-component': CustomComponent
},
methods: {
transitionEnd () {
// Callback from SwipeoutItem after transition
...
}
}
}
</script>
Import and configure Swiper in the custom component
<!-- CustomComponent.vue -->
<template>
<div :id="id" class="swiper-container">
<div class="swiper-wrapper">
<v-list-tile class="swiper-slide error"></v-list-tile>
<v-list-tile class="swiper-slide">
<!-- custom content here -->
</v-list-tile>
</div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.min.css'
import { Swiper } from 'swiper/dist/js/swiper.esm.js'
export default {
props: ['id'],
mounted () {
const self = this
const el = '#' + this.id
// Initialize Swiper
const swiper = new Swiper(el, {
initialSlide: 1,
resistanceRatio: 0,
speed: 150
})
// Event will be fired after transition
swiper.on('transitionEnd', function () {
if (this.activeIndex === 0) {
self.$emit('transitionEnd')
// Destroy slider instance and detach all events listeners
this.destroy()
}
})
}
}
</script>
Project Installation & Setup
Clone repository
git clone https://github.com/davidgaroro/vuetify-swipeout.git
cd vuetify-swipeout
Install dependencies
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
Donation
License
MIT © davidgaroro
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].