Archived
This project has been archived, but a maintained fork can be found here:
https://github.com/zanna-37/hass-swipe-navigation
Big thanks to @zanna-37!
Lovelace Swipe Navigation
Swipe through Lovelace views on mobile.
Features:
- Animated swiping through Lovelace views.
- Configure views to skip over.
- Set the swipe length needed.
- Option to disable a browsers default swipe actions.
- Wrap from first view to last view and vice versa.
- Support RTL languages.
Installation:
Follow only one of these installation methods.
Installation and tracking with HACS:
1. In "Frontend" hit the plus at the bottom right, search for "swipe navigation" and install. 2. Refresh the Lovelace page, may need to clear cache.Manual installation:
1. Copy [swipe-navigation.js](https://github.com/maykar/lovelace-swipe-navigation/releases/latest) from the latest release into `/www/lovelace-swipe-navigation/` 2. Add the resource in `ui-lovelace.yaml` or in Lovelace Resources. ```yaml resources: # increase this version number at end of URL after each update - url: /local/lovelace-swipe-navigation/swipe-navigation.js?v=1.0.0 type: module ``` 3. Refresh the page, may need to clear cache.Config:
Mark Watt does an excellent job covering configuation in this youtube video.
- Configuration is done in the root of your lovelace configuration.
- If you just want to use the default config values you don't need to add a config at all.
Config Options:
| Name | Type | Default | Description |
|---|---|---|---|
| swipe_amount | number | 15 | Minimum percent of screen needed to be swiped in order to navigate. |
| skip_tabs | string | A comma seperated list of views to skip when swiping. e.g., 1,3,5. |
|
| skip_hidden | boolean | true | Automatically skips hidden tabs. |
| wrap | boolean | true | Wrap from first tab to last tab and vice versa. |
| prevent_default | boolean | false | Prevents the browsers default horizontal swipe actions. May require a browser refresh to take effect, if using an HA companion app this can be done by closing the app and reopening. |
| animate | string | Swipe animations. Can be: swipe, fade, flip. The swipe animation should be considered experimental and depending on your setup may appear buggy. |
Example:
Don't just copy the example, it won't fit your needs. Build your own using the config options above.
swipe_nav:
wrap: false
animate: swipe
skip_tabs: 5,6,7,8
prevent_default: true
swipe_amount: 30
views:Thank you
Big thanks to:
- @themoffatt for beating me to the punch and letting me make a duplicate project.
- @RomRider and his decluttering-card for the configuration method.