Overflow is the general property. There are also specific versions to separately control the different directions: overflow-x, and overflow-y.
loop.rooms_source.length does, indeed, give you the length of the array that the repeater is using. However, that variable is only scoped for the repeater and it’s children; it can’t be accessed by any elements at the same level as or higher than the repeater.
Sure - but neither overflow-x nor overflow-y does a horizontal scrolling … 
Hi,
I several times tried to use f7-navbar - but the only thing I figured out is how to define the title:
component: f7-navbar
config:
title: Test
Using link: ABC or icon: f7-zzz did not show up…
Then I am not sure exactly what you mean. overflow-x: scroll will establish that a horizontal scrollbar appears when the containers contents are wider than the container.
my fault.
If I use overflow-x or overflow-y this scrollbars appears and it scrolls every time vertically:
Not only the Developers publish Nights Builds!
To be honest, i want desperately Nic to find a working solution for navbar. After that we have to focus on (what we have started for) Widgets and give to OH -a small mayby- added value: This is an open invitation to everyone who attends and contributes here: Please help us overcome the issues that we face!
I’m trying to learn something more day by day…
Can anyone tell me how to use iconify icons on expanded card?
I’m only able to use SOME f7 icons when the card is expanded…
I’m trying to use them on f7-icon component with no luck. Any suggestion for a poor noob?
can you share your code please so we can have a look.
Here you are.
Maybe this code for you will be a nightmare and need to be corrected almost everywhere…
uid: test:Rollershutter Preset_V3_Expandable
tags:
- New UI
props:
parameters:
- description: Title of the card
label: Title
name: Title
required: false
type: TEXT
- context: item
description: Rollershutter item
label: Rollershutter Item
name: RollerItem
required: true
type: TEXT
- description: 1st chart
label: Chart label 1
name: chart1
required: false
type: TEXT
- description: Y-axis name
label: Y-axis label
name: axlabel
required: false
type: TEXT
- context: item
description: Item in chart
label: Chart item 1
name: item3
required: false
type: TEXT
timestamp: Aug 31, 2022, 9:11:33 PM
component: f7-card
config:
expandable: true
swipeToClose: true
backdrop: true
class:
- card-expandable-animate-width
style:
box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.05)
--f7-card-header-border-color: transparent
border-radius: 10px
background: linear-gradient(to top, rgba(95, 0, 200) 10%, rgba(0, 0, 0) 100%)
min-width: 95%
margin-left: 5px
margin-right: 5px
height: 250px
slots:
default:
- component: oh-button
config:
iconF7: ellipsis
iconSize: 20px
style:
position: absolute
top: 0
right: 10px
padding-top: 10px
z-index: 999
class:
- cell-open-button
- card-opened-fade-out
- component: f7-card-content
config: {}
slots:
default:
- component: Label
config:
text: =props.Title
style:
padding-top: 5px
padding-left: 60px
font-weight: 500
font-size: 15px
class:
- card-opened-fade-out
- component: f7-icon
config:
material: dehaze
size: 45px
style:
top: -15px
class:
- card-opened-fade-out
- component: Label
config:
text: '=items[props.RollerItem].state == "100" ? "Chiusa" : items[props.RollerItem].state == "0" ? "Aperta" : items[props.RollerItem].state + "% chiusa"'
style:
font-size: 15px
position: absolute
top: 55px
left: 75px
background: purple
border-radius: 8px
class:
- card-opened-fade-out
- component: f7-block
config:
class:
- no-padding
style:
position: absolute
top: 110px
left: 25%
right: 25%
margin: 0px
height: 10px
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
iconColor: purple
iconF7: arrow_up_circle
iconSize: 30
action: command
actionItem: =props.RollerItem
actionCommand: UP
style:
height: 30px
z-index: 98
class:
- card-prevent-open
- card-opened-fade-out
- component: oh-button
config:
iconColor: red
iconF7: stop_circle
iconSize: 30
action: command
actionItem: =props.RollerItem
actionCommand: STOP
style:
height: 30px
z-index: 999
class:
- card-prevent-open
- card-opened-fade-out
- component: oh-button
config:
iconColor: purple
iconF7: arrow_down_circle
iconSize: 30
action: command
actionItem: =props.RollerItem
actionCommand: DOWN
style:
height: 30px
z-index: 98
class:
- card-prevent-open
- card-opened-fade-out
- component: f7-card-content
config: {}
slots:
default:
- component: f7-row
config:
style:
margin-top: 10%
class:
- justify-content-center
slots:
default:
- component: f7-icon
config:
material: dehaze
size: 65px
class:
- card-opened-fade-in
- component: Label
config:
text: =props.Title
style:
position: absolute
top: 15%
font-weight: 500
font-size: 25px
class:
- card-opened-fade-in
- component: Label
config:
text: '=items[props.RollerItem].state == "100" ? "Chiusa" : items[props.RollerItem].state == "0" ? "Aperta" : items[props.RollerItem].state + "% chiusa"'
style:
font-size: 25px
position: absolute
top: 21%
background: purple
border-radius: 8px
class:
- card-opened-fade-in
- component: oh-button
config:
iconF7: xmark_circle_fill
iconSize: 25px
color: red
style:
position: absolute
top: 50px
right: 10px
z-index: 999
class:
- card-opened-fade-in
- cell-close-button
- card-close
- component: f7-block
config:
class:
- no-padding
style:
position: absolute
top: 30%
left: 30%
right: 30%
height: 10px
slots:
default:
- component: f7-row
slots:
default:
- component: oh-button
config:
iconColor: purple
iconF7: arrow_up_circle
iconSize: 30
action: command
actionItem: =props.RollerItem
actionCommand: UP
style:
height: 30px
z-index: 98
class:
- card-prevent-open
- card-opened-fade-in
- component: oh-button
config:
iconColor: red
iconF7: stop_circle
iconSize: 30
action: command
actionItem: =props.RollerItem
actionCommand: STOP
style:
height: 30px
z-index: 999
class:
- card-prevent-open
- card-opened-fade-in
- component: oh-button
config:
iconColor: purple
iconF7: arrow_down_circle
iconSize: 30
action: command
actionItem: =props.RollerItem
actionCommand: DOWN
style:
height: 30px
z-index: 98
class:
- card-prevent-open
- card-opened-fade-in
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
style:
top: 20%
height: 10px
slots:
default:
- component: f7-col
config:
width: auto
style:
top: 7%
margin-left: 5%
margin-right: 5%
slots:
default:
- component: oh-chart
config:
chartType: day
periodVisible: false
options:
backgroundColor: transparent
slots:
grid:
- component: oh-chart-grid
config:
containLabel: false
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
axisPointer:
show: false
yAxis:
- component: oh-value-axis
config:
name: "% chiusura"
gridIndex: 0
min: 0
series:
- component: oh-time-series
config:
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: bar
barWidth: 1
color: purple
item: =props.item3
- component: Label
config:
text: "Chiusure preimpostate:"
style:
font-size: 13px
position: absolute
left: 0px
bottom: 10%
color: white
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-in
- component: oh-button
config:
round: true
text: "0"
action: command
actionItem: =(props.RollerItem)
actionCommand: UP
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-in
style:
position: absolute
height: 24px
width: 10px
left: 0px
bottom: 5%
z-index: 98
background: '=items[props.RollerItem].state == "0" ? "purple" : ""'
color: white
- component: oh-button
config:
round: true
text: "25"
action: command
actionItem: =(props.RollerItem)
actionCommand: 25
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-in
style:
position: absolute
height: 24px
width: 10px
left: 50px
bottom: 5%
z-index: 98
background: '=items[props.RollerItem].state >= "20" && items[props.RollerItem].state <= "30" ? "purple" : ""'
color: white
- component: oh-button
config:
round: true
text: "50"
action: command
actionItem: =(props.RollerItem)
actionCommand: 50
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-in
style:
position: absolute
height: 24px
width: 10px
left: 100px
bottom: 5%
z-index: 98
background: '=items[props.RollerItem].state >= "45" && items[props.RollerItem].state <= "55" ? "purple" : ""'
color: white
- component: oh-button
config:
round: true
text: "75"
action: command
actionItem: =(props.RollerItem)
actionCommand: 75
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-in
style:
position: absolute
height: 24px
width: 10px
bottom: 5%
left: 150px
z-index: 98
background: '=items[props.RollerItem].state >= "70" && items[props.RollerItem].state <= "80" ? "purple" : ""'
color: white
- component: oh-button
config:
round: true
text: "100"
action: command
actionItem: =(props.RollerItem)
actionCommand: DOWN
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-in
style:
position: absolute
height: 24px
width: 10px
bottom: 5%
left: 200px
z-index: 98
background: '=items[props.RollerItem].state == "100" ? "purple" : ""'
color: white
- component: Label
config:
text: "Chiusure preimpostate:"
style:
font-size: 13px
position: absolute
top: 170px
left: 0px
color: white
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-out
- component: oh-button
config:
round: true
text: "0"
action: command
actionItem: =(props.RollerItem)
actionCommand: UP
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-out
- card-prevent-open
style:
position: absolute
height: 24px
width: 10px
top: 200px
left: 0px
z-index: 999
background: '=items[props.RollerItem].state == "0" ? "purple" : ""'
color: white
- component: oh-button
config:
round: true
text: "25"
action: command
actionItem: =(props.RollerItem)
actionCommand: 25
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-out
- card-prevent-open
style:
position: absolute
height: 24px
width: 10px
top: 200px
left: 50px
z-index: 98
background: '=items[props.RollerItem].state >= "20" && items[props.RollerItem].state <= "30" ? "purple" : ""'
color: white
- component: oh-button
config:
round: true
text: "50"
action: command
actionItem: =(props.RollerItem)
actionCommand: 50
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-out
- card-prevent-open
style:
position: absolute
height: 24px
width: 10px
top: 200px
left: 100px
z-index: 98
background: '=items[props.RollerItem].state >= "45" && items[props.RollerItem].state <= "55" ? "purple" : ""'
color: white
- component: oh-button
config:
round: true
text: "75"
action: command
actionItem: =(props.RollerItem)
actionCommand: 75
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-out
- card-prevent-open
style:
position: absolute
height: 24px
width: 10px
top: 200px
left: 150px
z-index: 98
background: '=items[props.RollerItem].state >= "70" && items[props.RollerItem].state <= "80" ? "purple" : ""'
color: white
- component: oh-button
config:
round: true
text: "100"
action: command
actionItem: =(props.RollerItem)
actionCommand: DOWN
class:
- margin
- display-flex
- flex-direction-column
- card-opened-fade-out
- card-prevent-open
style:
position: absolute
height: 24px
width: 10px
top: 200px
left: 200px
z-index: 98
background: '=items[props.RollerItem].state == "100" ? "purple" : ""'
color: white
why not use oh-icon instead of f7-icon?
Using oh-icon, you can use all sources like f7, material and iconify.
I’ve tried but the icon is not shown. Seems to be the placeholder but empty…
I don’t think you can combine the trick for the for the hiding the cut-off buttons with scrolling. That trick will really only work if you are moving through the button options with back and forward buttons. The way this trick works is that the child elements, which are set to float: left try to squeeze themselves next to their neighbor. If they cannot do that, then they are moved down to the next row which (because we have fixed the vertical size of the container) is overflow space. But, we’ve set the container overflow to hide so those buttons are now hidden. (Actually, as I’ve written this description out, it occurs to me that this same effect can be achieved with flex-box settings, but I don’t think there’s a huge different between the two except the flex-box version won’t require the float: left on the child elements so it’s perhaps a bit cleaner).
If you change the container overflow setting to anything else, then, when the buttons that don’t fit automatically move down to a second row, the container adds a vertical scroll because that’s the only way it is going to be able to show that content that it’s not allowed to hide.
I would suggest, anyway, that scrolling and showing only buttons that fit across the space are two mutually exclusive mechanisms anyway. You need to pick either one or the other. If there are three buttons, but only two of them are rendered there really isn’t any visual clue for the user that there is a reason or scrolling. Typically the user is going to react to the visual cue of something running off the edge of the screen. Also, rending only the button that fit is a discreet interaction which is why it needs the addition of the backwards and forwards buttons, but scrolling is a continuous interaction. You’ll have to decide which of these two mechanisms better fits the UI style you are going for and then follow that one path.
You can’t use the iconify icons with the f7-icon, that functionality is something that is added on top of the base component by OH. If you want iconify then you must use the oh-icon component.
Then you’ll have to show us the code you used to try so that we can help with that.
Be aware, referencing the iconify icons takes an extra specifier (the icon set). So instead of just f7:<icon name> it has to be if:<icon set>:<icon name>.
That sounds true. The “trick” method looks better / more intuitiv. But to use it - I would have to define the “>” and “<”" buttons to be left and right. How could I achieve that the right “>” and the left “<” are shown even if the floating trick takes away the right side / the right buttons?
This does not work:
uid: demo:hide_buttons
props:
parameterGroups: []
parameters: []
tags: []
component: f7-block
config:
slots:
default:
- component: f7-row
config:
style:
overflow-x: scroll
display: block
height: 28px
slots:
default:
- component: oh-button
config:
text: <
outline: true
style:
float: left
#width: auto
- component: oh-button
config:
text: Very very very long button here
outline: true
style:
float: left
width: auto
- component: oh-button
config:
text: Short button
outline: true
style:
float: left
width: auto
- component: oh-button
config:
text: Regular button here
outline: true
style:
float: left
width: auto
- component: oh-button
config:
text: >
outline: true
style:
float: right
#width: auto
And another question: Is it possible to define / set a variable outside an action? And if yes how? Did just find this in the doc:
the variable action allows to set a fixed or computed (using an expression) value to a variable.
thanks! this did the trick! but, oh-icon seems not to support “class:” options, that i need to “fade in” the icon when the card is exapnded.
- component: oh-icon
config:
icon: if:mdi:window-shutter-cog
height: 65
class:
- card-opened-fade-in
so, how can i manage iconify/material icons, to be shown when the card is exapended but hide them when the card is collpsed?
EDIT: got it! i’ve used oh-button with oh-icon in slot and there i can use iconify icon. class is applied to oh-button.
@Nic0205 @JustinG I’m not quite sure if this guide helps… but please take a look.
Allign_v1_details.pdf (68.4 KB)
Hey @Dimitris ,
just to let you see that I am not lazy and working on it
Here is the actual code - it’s getting forward.
Actual challenge for me is to learn how to set an variable without having to do it by pressing a button. If I know how to do this, I will implement a first attempt of the navbar-controlling.
For now the code is much reduced cause of using oh-repeater now. And you can define your own Menu-structure (at least in some way) by setting it via the props…
uid: demo:responsive_navbar1
tags: []
props:
parameters:
- context: text
description: Names for TopLevel Menu
label: Names for TopLevel Menu
name: tArray
required: false
type: TEXT
multiple: true
- context: text
description: Names for Home Menu
label: Names for Home Menu
name: hArray
required: false
type: TEXT
multiple: true
- context: text
description: Names for Rooms Menu
label: Names for Rooms Menu
name: rArray
required: false
type: TEXT
multiple: true
parameterGroups: []
timestamp: Sep 1, 2022, 12:34:05 PM
component: f7-block
config:
style:
display: flex
flex-direction: column
height: calc(100vh - var(--f7-toolbar-height) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-safe-area-top))
justify-content: space-between
margin: 0
padding: 0
widht: 100vh
variables:
vars.buttonIndex == "1"
slots:
default:
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
slots:
default:
- component: f7-segmented
config:
style:
flex: 1 1 auto
slots:
default:
- component: oh-repeater
config:
fragment: true
for: baseMenu
sourceType: array
in:
=props.tArray
#map: loop.baseMenu.name
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectSection
actionVariableValue: ="SECTION" + loop.baseMenu_idx
large: true
style:
color: '=vars.selectSection=="SECTION" + loop.baseMenu_idx ? "black" : "#8C8C8C"'
font-size: 30px
font-weight: 200
text-decoration: underline
text-decoration-color: '=vars.selectSection=="SECTION" + loop.baseMenu_idx ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.baseMenu
- component: f7-segmented
config:
visible: =!!(vars.selectSection == "SECTION0")
slots:
default:
- component: oh-button
config:
text: <
style:
width: 1vh
color: "#F8BB00"
- component: oh-repeater
config:
fragment: true
for: HomeMenu
sourceType: array
in:
=props.hArray
#map: loop.HomeMenu.name
filter: (loop.HomeMenu_idx >= 0) && (loop.HomeMenu_idx <= (0 +5))
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectDivision
actionVariableValue: ="DIV" + loop.HomeMenu_idx
large: true
style:
color: '=vars.selectDivision=="DIV" + loop.HomeMenu_idx ? "black" : "#8C8C8C"'
text-decoration: underline
text-decoration-color: '=vars.selectDivision=="DIV" + loop.HomeMenu_idx ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.HomeMenu
- component: oh-button
config:
text: ">"
style:
width: 1vh
color: "#F8BB00"
- component: f7-segmented
config:
visible: =!!(vars.selectSection == "SECTION1")
slots:
default:
- component: oh-repeater
config:
fragment: true
for: RoomMenu
sourceType: array
in:
=props.rArray
# map: loop.RoomMenu.name
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectDivision
actionVariableValue: ="DIV" + loop.RoomMenu_idx
large: true
style:
color: '=vars.selectDivision=="DIV" + loop.RoomMenu_idx ? "black" : "#8C8C8C"'
text-decoration: underline
text-decoration-color: '=vars.selectDivision=="DIV" + loop.RoomMenu_idx ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.RoomMenu
- component: f7-segmented
config:
visible: =!!(vars.selectSection == "SECTION2")
slots:
default:
- component: oh-repeater
config:
fragment: true
for: FloorMenu
sourceType: array
in:
- name: Floor1
- name: Floor2
- name: Floor3
- name: Floor4
- name: Floor5
map: loop.FloorMenu.name
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectDivision
actionVariableValue: ="DIV" + loop.FloorMenu_idx
large: true
style:
color: '=vars.selectDivision=="DIV" + loop.FloorMenu_idx ? "black" : "#8C8C8C"'
text-decoration: underline
text-decoration-color: '=vars.selectDivision=="DIV" + loop.FloorMenu_idx ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.FloorMenu
- component: f7-block
config:
style:
flex: 1 1 auto
overflow: scroll
slots:
default:
- component: f7-card
config:
content: With some stuff
title: The middle content
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: oh-cell
config:
icon: f7:lightbulb
style:
flex: 1 1 auto
overflow-y: auto
position: relative
subtitle: only for testing
title: I am a light card in the Bedroom
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Lights")
- component: oh-cell
config:
icon: f7:lightbulb
style:
flex: 1 1 auto
overflow-y: auto
position: relative
subtitle: only for testing
title: I am a light card in the Home
visible: =!!(vars.selectSection == "SECTION1")
- component: Label
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
text: =vars.selectSection + vars.selectDivision
- component: Label
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
text: =vars.SecDiv
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
slots:
default:
- component: f7-segmented
config:
class:
- segmented-strong
style:
--f7-segmented-strong-between-buttons: 0px
--f7-segmented-strong-bg-color: transparent
--f7-segmented-strong-button-font-weight: 300
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.15)
--f7-segmented-strong-padding: 0px
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectThing
actionVariableValue: Lights
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.selectThing=="Lights" ? true : false'
icon-f7: lightbulb
iconColor: black
iconSize: 20
style:
--f7-button-bg-color: '=vars.selectThing=="Lights" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.selectThing=="Lights" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.selectThing=="Lights" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Lights
- component: oh-button
config:
action: variable
actionVariable: selectThing
actionVariableValue: Climate
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.selectThing=="Climate" ? true : false'
icon-f7: snow
iconColor: black
iconSize: 20
style:
--f7-button-bg-color: '=vars.selectThing=="Climate" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.selectThing=="Climate" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.selectThing=="Climate" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Climate
- component: oh-button
config:
action: variable
actionVariable: selectThing
actionVariableValue: Rollers
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.selectThing=="Rollers" ? true : false'
icon-f7: archivebox
iconColor: black
iconSize: 20
style:
--f7-button-bg-color: '=vars.selectThing=="Rollers" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.selectThing=="Rollers" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.selectThing=="Rollers" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Rollers
- component: oh-button
config:
action: variable
actionVariable: selectThing
actionVariableValue: Security
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.selectThing=="Security" ? true : false'
icon-f7: camera
iconColor: black
iconSize: 20
style:
--f7-button-bg-color: '=vars.selectThing=="Security" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.selectThing=="Security" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.selectThing=="Security" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Security
Of course there is still a long way for us but it’s getting forward.
Next step (after the nav-bar controlling) will be to integrate the option for showing the widgets…
I can clearly see how much you insist and work on this project. Besides that, its your Project! If you remember, in the beginning, I came here and asked ONLY for a widget… Keep walking!
OMG It works!
It’s all about how you nest the different elements. This structure sounds like you want a container (f7-row) that spaces (using flex spacing probably) the left and right buttons at the ends and another container in the middle. Then that container in the middle is set up to hold/hide the dynamic buttons.
Not at the moment, alas. There is a request on the UI GitHub page for this but right now you just have to make your expressions a little more complicated to account for the initial null value of a variable.
The easiest way to do this is usually just (vars.variable_name || default_value). This is just a simple OR statement but if the variable does not exist yet then the first part is false and so it falls back on the second part.
I see. But does this statement really set the variable initially? or does it just take “default_value” until variable_name is set by an action?
I would for example try to set an variable with the actual index of my oh-repeater variable. Is this possible? I mean something like this:
vars.buttonIndex=HomeMenu_idx
Why? I want to use your approach here:
filter: (loop.whatever_idx >= vars.buttonIndex) && (loop.whatever_idx <= (vars.buttonIndex +2))
and I am mussing the buttonIndex