/lovelace-swipe-navigation

↔️ Swipe through Lovelace views on mobile.

Primary LanguageJavaScriptMIT LicenseMIT

Lovelace Swipe Navigation

hacs_badge hacs_badge

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 from the latest release into /www/lovelace-swipe-navigation/

  2. Add the resource in ui-lovelace.yaml or in Lovelace Resources.

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
  1. 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: