Include non-property components in property-grid / property-group

I would like to use Property Grids as shown in this example (when you click ‘Property Grids’ on the left), but only their ability to shrink and expand like they do so I can place other components in there, without them having to be a <property>.

However, at this time if I do so and the component isn’t a <property> but a <label> or <listview> instead, they do not collapse when the <property-group> does:

<property-grid width="100%">
 <property-group text="stuff">
  <property id="blah" label="I do collapse" value="Value 1" />
  <label text="this will not collapse" />
  <listview width="100" id="lv1" selectedIndex="0">
    <item value="cannot" />
    <item value="shrink" />
    <item value="me! haha" />
  <label text="gotcha" />
  <property id="blah2" label="this doesn't help either" value="Value 1" />

Actually this would be kind of like the <accordion> but being able to have a selection of them (e.g. vboxes) opened or having them all closed. I just like how <property-group> is instantaneously without the slowing animation.

Thank you.

So you mean an accordion where you can open multiple pages at the same time and not have any animation?


Yes, that’d be possible: multiple accordion-pages opened / and no animation.
The <accordion> could do the job. I still really like how the <property-group>s in <property-grid> stay at a fixed size. And it has no animation, right, neither a button style changed :hover and it just pops-depops on click.

By the way, I couldn’t find the API Docs for them (<property-group> / <property-grid>)
(they should be here in containers, right? or even in components ??) so I could find the style property to show them minimized on app launch?

Thank you

Yeah, i think it would be nice if accordion could handle both styles, ill check it out - if not a new component “Drawer” maybe or something?


PS: ill check out the docs, they havent been generated in a while!

I like the idea of a “<drawer>”. At the same time I guess the inheritance/functionality to rely on the <accordion> would make more sense to handle both styles as you said. I don’t know :slight_smile:

1 Like

FYI - i think im going to go with “drawer” also as a new component… the more i think i about the more i think, they are actually quite different and trying to make both fit into an accordion api might be a pain in the long run.

That sounds great, I guess.
I’m just thinking now IRL a drawer does actually behave like the <accordion>: Only one drawer can be opened (when drawers arranged vertically). When in contrast for example the <property-grid> behaves actually like an accordion, as each bellow (“fold”, here <property-group>) can be opened so the instrument enlarges. (I mean at least when you think of it that way… but maybe cannot compare to reality that much)
edit: lol nevermind, I’m not sure but it may be playing (like music) an accordion is to only have one fold opened…so everything’s alright