[OH3] Main UI - New „main_widget“ - development and testing [deprecated]

[JustinG]

@Nic0205

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…):

No worries, just be sure, as you learn more and more, to pass on what you know to others.

@Nic0205

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?.

@JustinG

To restrict the repeater’s output to only 3 of those at a time, you’ll need to use the fitler property of the repeater and the index variable that gets created.

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))

@Dimitris

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

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.