Home Assistant Swipe Navigation
Swipe through Home Assistant Dashboard views on mobile.
This repository has been forked from maykar/lovelace-swipe-navigation to continue the development since the original project seems to be currently unmaintained.
Features:
- Animated swiping through Dashboard 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.
- Option to ignore swipes over certain elements (e.g. sliders or maps).
Installation:
Follow only one of these installation methods.
Installation and tracking with HACS:
-
In "Frontend" hit the plus button at the bottom right, search for "swipe navigation", and install.
-
Refresh the Dashboard page. You might need to clear the cache.
Manual installation:
-
Copy swipe-navigation.js from the latest release into
/www/hass-swipe-navigation/
-
Add the resource in
ui-lovelace.yaml
or in Dashboard Resources.
resources:
# increase this version number at end of URL after each update
- url: /local/hass-swipe-navigation/swipe-navigation.js?v=1.0.0
type: module
- Refresh the page, may need to clear cache.
Config:
If you just want to use the default config values you don't need to add a config at all.
If you want to modify the configuration, place it in the root of your dashboard configuration.
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 separated 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:
If you need help, Mark Watt has an excellent video covering the configuration in this youtube video.
Contributions
If you want to help, put a
Thank you
Big thanks to:
- @maykar The original author of this project.