Sorry, last days have been turbulent.
I still work on the navbar and make efforts - but this week i am Limited a Little bit with time…
Sorry, last days have been turbulent.
I still work on the navbar and make efforts - but this week i am Limited a Little bit with time…
Hey @JustinG ,
I am testing different approaches.
With this code I have the problem, that the flex-row option is ignored.
Could you have - once again - a look, what’s going wrong here:
uid: test_Arr
tags: []
props: {}
timestamp: Aug 29, 2022, 11:11:07 PM
component: f7-card
config: {}
slots:
content:
- component: f7-segmented
config:
style:
display: flex
flex-direction: row
slots:
default:
- component: oh-repeater
config:
for: rooms
sourceType: array
in:
- name: Room1
- name: Room2
- name: Room3
- name: Room4
- name: Room5
map: loop.rooms.name
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectSection
actionVariableValue: SECTION1
large: true
style:
color: '=vars.selectSection=="SECTION1" ? "black" : "#8C8C8C"'
font-size: 30px
font-weight: 200
text-decoration: underline
text-decoration-color: '=vars.selectSection=="SECTION1" ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.rooms
You need to add fragment: true
to the repeater. In it’s normal setting, the repeater wraps all of the elements it produces in a div
element container. So your f7-segmented
is flex spacing correctly, it’s just spacing one div
element (which just happens to contains lots of buttons that the segmented doesn’t care about at all). When you add the fragment property to the repeater it strips that extra container from around the repeated elements and makes them direct children of the repeater’s parent element.
… Oh my dear… I still have a lot to learn - but to be honest it’s a cool thing to learn all this stuff.
Just another question (please tell me when to stop asking questions to you…):
How could I determine where the oh-repeater should start and where it should end - or in other words could I use an index for iterating over the elements?.
let me say it in words:
I have for example 8 Rooms in an array.
The oh-repeater should only show me the first 3 Rooms (index 1 to 3)
I click on “>” and the oh-repeater now should show me show 3 Rooms with the index 2 to 4.
How could I tell the repeater where to start, where to end and how could I know where the index stands?
I hope I described it well.
here my first attempt in code - simplified to just decrease the variable of the Range:
uid: ButtonGridd2
tags: []
props: {}
timestamp: Aug 30, 2022, 9:44:07 AM
component: f7-card
config: {}
slots:
content:
- component: f7-segmented
config:
style:
display: flex
flex-direction: row
slots:
default:
- component: oh-repeater
config:
fragment: true
for: rooms
rangeStart: 1
rangeStop: =vars.rstp
sourceType: array
in:
- name: Room1
- name: Room2
- name: Room3
- name: Room4
- name: Room5
map: loop.rooms.name
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectSection
actionVariableValue: =loop.rooms
large: true
style:
color: '=vars.selectSection=="SECTION1" ? "black" : "#8C8C8C"'
text: =loop.rooms
- component: Label
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
text: =vars.selectSection
- component: Label
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
text: =vars.rstp
- component: oh-button
config:
text: ">"
action: variable
actionVariable: rstp
actionVariableValue: =vars.rstp + 1
Hey Pal. Is there any chance to create a “Dynamic Index”? In the original design the displayed rooms may vary from 1 to 3 (or more if they can fit!) depending on the width of the text -see attachment. I don’t want to add more complexity, but i think this is decision time for the navbar!
See Allign_v1.pdf (71.4 KB) or
No worries, just be sure, as you learn more and more, to pass on what you know to others.
The repeater not only gives you a single element of its array at a time (loop.whatever
) it also creates two other variables you can use in the scope of the repeater: loop.whatever_idx
and loop.whatever_source
. Whereas the regular variable is just the current element of the overall array, the _idx
variable is the index of that current element and the _source
variable is the entire array that the repeater is working form.
The filter
property filters the entire array down to a subset based on whatever expression (without the =
in front) that you give it. So here you want the subset of the original array where the index is equal to some position variable or that position plus 1 or 2. Your filter statement would look something like this:
filter: (loop.whatever_idx >= vars.buttonIndex) && (loop.whatever_idx <= (vars.buttonIndex +2))
As far as I know, there is really only one reliable way to do this with css (I’d be interested to hear if other’s know of a different way). You have to keep the container from expanding vertically (i.e., set a fixed height), let it use block spacing for the child elements and set it to hide overflow elements. Then you have to set the child elements to float: left
. Here’s a quick example. If you put this in your editor and adjust the window width you should see the right-hand buttons disappear as they run out of room.
uid: demo:hide_buttons
props:
parameterGroups: []
parameters: []
tags: []
component: f7-block
config:
slots:
default:
- component: f7-row
config:
style:
overflow: hidden
display: block
height: 28px
slots:
default:
- 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
There’s actually an advantage to this setup: the filter
property for the repeater becomes easier because you just have to rule out buttons before the position variable and then let the css do the rest of figuring out how many buttons are visible.
Definitively, this is the most beautiful reply that i have read here. The definition of the Community.
that’s cool - but for our use case the overflow should scroll horizontal.
But if I set overflow: scroll
it scrolls vertical. Could we get rid of this?
Until we manage this I will go further with the array approach…
That sound like the thing I am looking for. But if I want so show for example the length of source I get an TypeError: undefined is not an object (evaluating 'n[e.property.name]')
.
Did I understand it wrong?
uid: ButtonGridd2
tags: []
props: {}
timestamp: Aug 30, 2022, 9:44:16 AM
component: f7-card
config: {}
slots:
content:
- component: f7-segmented
config:
style:
display: flex
flex-direction: row
slots:
default:
- component: oh-repeater
config:
fragment: true
for: rooms
sourceType: array
in:
- name: Room1
- name: Room2
- name: Room3
- name: Room4
- name: Room5
map: loop.rooms.name
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectSection
actionVariableValue: =loop.rooms_source.length
large: true
style:
color: '=vars.selectSection=="SECTION1" ? "black" : "#8C8C8C"'
text: =loop.rooms
- component: Label
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
text: =loop.rooms_source.length
# text: =loop.rooms_source.length
Hey @Nic0205 I need to enlighten me on this:
While I’m trying to add
component: f7-navbar
in an OH Page, the OH draws a Navbar. Maybe it thinks that i’m just another Mac User and reacts accordingly
My thought is, -if this works and you can configure it- maybe it’s an alternative for what we are trying to do. PLS don’t spend more than of 2-5 minutes on this, I just wanted to show to @JustinG that I’m reading (…not studying) code!!!
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…