Hi,
Im playing around with the Main UI to create widgets in the overview page. Till now i have been using the locations tab.
I created a test widget (based on forum examples ). Which displays a popup screen when the paper icon is pressed. There are more toggle buttons , is there a way to display scrollbars or the have scrolling available.
uid: Test
tags: []
timestamp: Jan 3, 2022, 12:51:07 PM
component: f7-card
config:
swipeToClose: true
style:
noShadow: false
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
border-radius: var(--f7-card-expandable-border-radius)
background-color: "=props.bgcolor ? props.bgcolor : themeOptions.dark === 'dark' ? 'DimGrey' : 'GhostWhite'"
height: 130px
width: auto
max-width: 300px
slots:
content:
- component: f7-block
config:
style:
left: 20px
position: absolute
top: -5px
width: 100%
slots:
default:
- component: Label
config:
style:
font-size: 15px
font-weight: 600
margin-left: 5px
margin-top: -3px
text-align: center
text: Test
- component: f7-popup
config:
class: popupDetails
slots:
default:
- component: oh-button
config:
iconF7: clear_fill
iconSize: 30px
action: popup
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
popupClose: .popupDetails
style:
position: absolute
right: 10px
top: 10px
z-index: 998
- component: f7-card
config:
title: Lights
slots:
default:
- component: oh-list
slots:
default:
- component: oh-repeater
config:
for: item
sourceType: itemsWithTags
itemTags: Switch,Light
listContainer: true
slots:
default:
- component: oh-toggle-item
config:
icon: '=(items[loop.item.name].state == "ON") ? "f7:lightbulb_fill" : "f7:lightbulb"'
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
title: =loop.item.label
item: =loop.item.name
default:
- component: oh-button
config:
iconF7: doc_plaintext
iconSize: 30px
action: popup
popupOpen: .popupDetails
iconColor: "=themeOptions.dark === 'dark' ? 'blue' : 'deeporange'"
style:
padding-bottom: 40px
padding-right: 5px
padding-top: 4px
position: absolute
right: 5px
top: 0
z-index: 998