HA Jule-tip #14: Brug af swipe-card

I dagens jule-tip viser jeg, hvordan du kan bruge swipe-card til at skifte mellem forskelligt indhold på dit dashboard. Det gør det muligt at swipe frem og tilbage på skærmen for at skifte indhold.

Det fungerer rigtigt godt på f.eks. mobile enheder eller mindre tablets, hvor der ikke er så meget plads på skærmen.

Jeg bruger det selv på flere af mine dashboards. Eksempelvis som vist her på mit smart clock dashboard, hvor der kan swipes mellem fire forskellige sider:

Sådan gør du

Når du har installeret swipe-card frontend udvidelsen fra HACS, kan du bruge komponenten på dit dashboard.

Denne kode kan bruges til at swipe mellem tre forskellige entiteter samtidigt med at en scrollbar illustrerer antallet af elementer, der kan swipes mellem:

type: custom:swipe-card
reset_after: 30
parameters:
  spaceBetween: 8
  scrollbar:
    hide: false
    draggable: true
    snapOnRelease: true
cards:
  - type: entity
    entity: sensor.local_time
  - type: entity
    entity: sensor.local_date
  - type: entity
    entity: sun.sun

TIP
Du kan swipe mellem flere elementer på én gang ved at samle dem i et vertical eller horizontal stack kort.

Dette eksempel viser, hvordan der kan swipes mellem tre forskellige vertical stack kort, som hver indeholder et billede samt resultater fra forskellige sportsgrene:

Ovenstående er dannet med følgende kode:

type: custom:swipe-card
reset_after: 30
parameters:
  spaceBetween: 8
  scrollbar:
    hide: false
    draggable: true
    snapOnRelease: true
cards:
  - type: vertical-stack
    cards:
      - type: picture
        image: >-
          https://creativereview.imgix.net/content/uploads/2019/09/FWC_2022_Square_Landscape_1080x1080.jpg?auto=compress,format&q=60&w=1080&h=600
      - type: custom:teamtracker-card
        entity: sensor.team_tracker_wc22_den
  - type: vertical-stack
    cards:
      - type: picture
        image: >-
          https://media-foxbusiness-com.cdn.ampproject.org/i/media.foxbusiness.com/BrightCove/854081161001/202002/1582/854081161001_6129184572001_6129186164001-vs.jpg
      - type: custom:nfl-card
        entity: sensor.nfl
  - type: vertical-stack
    cards:
      - type: picture
        image: >-
          https://cdn-motor1-com.cdn.ampproject.org/i/s/cdn.motor1.com/images/mgl/K42vR/s4/f1-logo.webp
      - type: custom:teamtracker-card
        entity: sensor.team_tracker_f1_mag

Indholdet kommer fra sensorer, der er oprettet med brug af Team Tracker, som jeg tidligere har omtalt i et andet indlæg.