Hello Community,
here is my next card Swipe-Button-Card. Swipe-Button-Card is a minimalist and customizable card, that lets you toggle 3 buttons with swipe gestures. swipe-button-card is a container for 3 cards, which can be any Home Assistant card. Swiping to the left - right (or top - bottom) triggers a click on the specified sub-card.
This card is written in CSS and Java Script and not using any third party library for the swipe feature.
As I´m not a full time developer (but an IT guy), my code might not be the “best”, but its working very well. I had no issues so far.
So I hope you enjoy it and soon and dont forget to check-out my other custom card css-swipe-card.
Contributors are very welcome.
here also an example of one of m favorite styles.
type: custom:swipe-button-card
auto_height: false
height: 66px
card_1:
type: custom:button-card
layout: icon_name
icon: mdi:test-tube
name: start testing
entity: input_boolean.your_switch
styles:
card:
- background: orchid
- border-radius: 24px 0px 0px 24px
name:
- justify-self: start
swipe_card:
swipe_card: null
type: custom:button-card
name: swipe me to the left or right
entity: input_boolean.your_switch
icon: mdi:gesture-swipe
styles:
grid:
- grid-template-areas: '''i n'''
- grid-template-columns: min-content 1fr
card:
- height: 100%
- border-radius: 0
- padding: 0.5rem
name:
- justify-self: center
- color: purple
img_cell:
- width: 50px
- height: 50px
- background: rgba(0,0,0,0.30)
- border-radius: 100%
icon:
- color: purple
card_2:
type: custom:button-card
layout: icon_name
icon: mdi:alarm
name: alarm set
entity: input_boolean.your_switch
styles:
card:
- background: cornflowerblue
- border-radius: 0px 24px 24px 0px
name:
- justify-self: start
custom_css:
'--card-1-bg': orchid
'--card-1-border-radius': 24px 0px 0px 24px
'--swipe-bg': var(--card-background-color)
'--swipe-border-radius': 0px
'--card-2-bg': cornflowerblue
'--card-2-border-radius': 0px 24px 24px 0px
'--swipe-container-border-radius': 24px