vinayakkulkarni / V Offline
Licence: mit
🔌 Simple VueJS component to detect offline & online changes.
Stars: ✭ 307
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to V Offline
vue
Vue.js Demos. jQWidgets Vue.js Components - Grids, Charts, Scheduling, Pivot Tables
Stars: ✭ 55 (-82.08%)
Mutual labels: vue-components, vue2
Vue Cnodejs
基于vue.js重写Cnodejs.org社区的webapp
Stars: ✭ 3,065 (+898.37%)
Mutual labels: vue-components, vue2
v-pip
🖼 Tiny vue wrapper for supporting native picture-in-picture mode.
Stars: ✭ 30 (-90.23%)
Mutual labels: vue-components, vue2
File-Explorer
A File Manager with stunning design & astonishing develops, beautifully written in PHP, everything fused in a single file.
Stars: ✭ 31 (-89.9%)
Mutual labels: online, offline
Vuejs Component Style Guide
Vue.js Component Style Guide
Stars: ✭ 2,796 (+810.75%)
Mutual labels: vue-components, vue2
hoc-element-table
📦 A Vue 3.x Table Component built on Webpack 5
Stars: ✭ 26 (-91.53%)
Mutual labels: vue-components, vue2
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-79.15%)
Mutual labels: vue-components, vue2
vue-drag-zone
Drag Zone component for @vuejs
Stars: ✭ 127 (-58.63%)
Mutual labels: vue-components, vue2
Tui
This is a high quanlity components library for VUE
Stars: ✭ 258 (-15.96%)
Mutual labels: vue-components, vue2
osiris
🎨 A Vue.js 2.0 universal responsive UI component library
Stars: ✭ 36 (-88.27%)
Mutual labels: vue-components, vue2
vue-flag-icon
a vue compoment for flag-icon-css
Stars: ✭ 64 (-79.15%)
Mutual labels: vue-components, vue2
Vue Testing Examples
Advanced testing with vuejs. When you need to go beyond Getting started section and see some real world example with everything that proper tests should have.
Stars: ✭ 288 (-6.19%)
Mutual labels: vue-components, vue2
v-page
A simple pagination bar, including length Menu, i18n support, based on Vue2.x
Stars: ✭ 85 (-72.31%)
Mutual labels: vue-components, vue2
cuida
A design system built by Sysvale, using storybook and Vue components
Stars: ✭ 16 (-94.79%)
Mutual labels: vue-components, vue2
office-fabric
johannes-z.github.io/office-fabric/
Stars: ✭ 12 (-96.09%)
Mutual labels: vue-components, vue2
ngx-online-status
🔛 Angular 5+ Detect online/offline state
Stars: ✭ 23 (-92.51%)
Mutual labels: online, offline
Mono-PWA
Monobank PWA — unofficial online web client for monobank
Stars: ✭ 24 (-92.18%)
Mutual labels: online, offline
vue2
【🔥Vue.js资讯📚】目前web前端开发非常火爆的框架;定时更新,欢迎 Star 一下。
Stars: ✭ 415 (+35.18%)
Mutual labels: vue-components, vue2
Mui Vue2
mui+mint+vue2.x+vue-router+vuex+webpack最终打包成原生apk的app项目,样式使用vue移动端mint ui框架,原生手机能力偏重于mui框架,欢迎star!
Stars: ✭ 278 (-9.45%)
Mutual labels: vue-components, vue2
V-Offline ⚡️
-
Detect offline & online events for your vue app.
-
This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐️ if you like it 🍻
-
Demo here -> 💯 Webpackbin Link
Requirements
- Vue.js 2.x
✅ Install 👌
npm install v-offline
# or
yarn add v-offline
CDN: UNPKG | jsDelivr (available as window.VOffline
)
✅ Usage 🎓
Register the component globally:
Vue.component('VOffline', require('v-offline'));
Or use locally
import VOffline from 'v-offline';
✅ Example 1 🍀
HTML
<v-offline
online-class="online"
offline-class="offline"
@detected-condition="amIOnline">
<template v-slot:[onlineSlot] :slot-name="onlineSlot">
( Online: {{ onLine }} )
</template>
<template v-slot:[offlineSlot] :slot-name="offlineSlot">
( Online: {{ onLine }} )
</template>
</v-offline>
JS
import VOffline from 'v-offline';
Vue.component('example-component', {
components: {
VOffline
},
data: () => ({
onLine: null,
onlineSlot: 'online',
offlineSlot: 'offline',
}),
methods: {
amIOnline(e) {
this.onLine = e;
},
},
});
CSS
.offline {
background-color: #fc9842;
background-image: linear-gradient(315deg, #fc9842 0%, #fe5f75 74%);
}
.online {
background-color: #00b712;
background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
}
✅ 📖 Props
Name | Type | Required? | Default | Description |
---|---|---|---|---|
slot-name |
String | No | 'online' | The name of the slot, refer to the v-slot docs |
online-class |
String | No | '' | Styling the div which you want to give if you're online. |
offline-class |
String | No | '' | Styling the div which you want to give if you're offline. |
ping-url |
String | No | https://google.com | Pinging any url to double check if you're online or not. |
✅ 👂 Events
Name | Description |
---|---|
detected-condition |
Emits an Boolean value which can be used for multiple purposes in your app. |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
v-offline © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).
GitHub @vinayakkulkarni · Twitter @_vinayak_k
License
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].