But since that didn’t work I tried to activate it by going to the list items and then “edit accordion code”. But that only gets an accordion symbol of these items.
component: oh-list-card
config:
title: Accordion List - Test
accordionList: true
slots:
default:
- component: oh-list-item
config:
title: A
slots:
accordion:
- component: oh-list-card
config:
accordionList: false
noBorder: true
noShadow: true
outline: true
- component: oh-list-item
config:
title: B
slots:
accordion: []
- component: oh-list-item
config:
title: C
slots:
accordion: []
I’m sure the solution is very simple, I just didn’t find it. Looking forward to your help
Had similar question myself a while back. AccordionList is not just an overall parameter of the entire list widget, it is specific to each level/item. The accordionList: true config has to be in the direct parent widget (that is, the one where you are populating the accodion slot) of any of the accordion items. It is not sufficient just to label then entire list widget as an accordion list.
As for the chevrons, if you want those items to still be the parents of accordion items but not display the chevron, there’s a no-chevron parameter that I think you can set to true in order to have those removed.
I’m not sure I understand what you’re saying (too inexperienced, I’m afraid)
The way I see it, the list-item doesn’t have a parent, it is the parent. And the kids are “A”, “B” and “C”. And there the only thing is “Edit Accordion Code” which seems to get me the chevrons I don’t want.
Adding “no-chevron: true” didn’t help either:
I hope it’s not asking too much (you’ve already been very helpful in my other post), could you change the example code so it’d work? I could transfer the rest and probably understand it then, too.
I think the thing that is confusing you is that there is a difference between the list-card and the actual list widget. All of the oh specific cards are just an f7 card (that is a container object with some basic slots, header, footer, etc. and some default background settings) with some direct access to widget that is by default rendered in the card’s content area. So when creating an oh-list-card you start with a card and an empty list widget but still must populate that list widget with at least one visible list item. The title and many other config parameters are for the card they are not the first row of the actual list. The following YAML: demonstrates some of this
component: oh-list-card
config:
title: This is just the card title not the list widget
accordionList: true
slots:
default:
- component: oh-list-item
config:
title: At least one list item must be visible for the list widget to be drawn
slots:
accordion:
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
title: A
- component: oh-list-item
config:
title: B
- component: oh-list-item
config:
title: C
- component: oh-list
config:
accordionList: true
thisDoesNotWork: This list is not rendered because it has no child items and there is nothing to show
- component: oh-list
config:
accordionList: true
slots:
default:
- component: oh-list-item
config:
title: But you can nest accordions lists as long as there are items to be drawn
slots:
accordion:
- component: oh-list
config: {}
slots:
default:
- component: oh-list-item
config:
title: E
- component: oh-list-item
config:
title: F
- component: oh-list-item
config:
title: G
But the empty oh-list is not rendered anywhere because it has no items to display (thisDoesNotWork parameter doesn’t cause a YAML or rendering error because unrecognized keys are simply ignored).
Took me a while, but now (I think) I understand it. Good you gave the example with the code, otherwise I wouldn’t have had a chance
One question: what are the “{}” good for? I noticed it doesn’t work without them, but what’s their function?
And maybe one (hopefully last) thing I can’t get done which would make things look nicer: I how can I align nested objects? Here’s (Alignment in nested objects) the entire description but nobody could help me so far …
That’s just an empty array. I can’t tell you why it’s needed in some cases but not in others. As you noted, the oh-list doesn’t render without the config: key, but if you don’t need to set any config parameters then you can just use {} to pass an empty set to it and that’s sufficient to keep the renderer happy.
i hope its ok to place my question here:
Is ist also possible to configure if an accordion list is opened oder closed by default or depending on a state?
For example i would like to create an accordion list with several scene triggers sorted by daytime. So when its morning (depending on item state) the morning part should be opened and all others closed.
You must add accordionList: true to the repeater config. The list item will only render the accordion content if it’s direct parent has this property; in this case, the repeater.
Technically yes. In practice, particularly if you have a lot of accordions, it would be extremely cumbersome.
Each list item has an accordionItemOpened property which takes a boolean value and true opens the accordion and false closes it. This property can be linked to a widget variable and the action of some other widget can then easily control the open closed state of the item. Within the limited function of the custom widget system building up the logic to control each accordion from the action of each other one would quickly get absurd.
Interesting. Apparently, by setting fragment to false (which I almost never do in my repeater lists). the added container around the list items automatically applies the limitation of only one expanded accordion at a time. That’s good to know.
fragment: false and deleting the property are equivalent. If you include fragment: true (which I use on 99% of my repeater lists) instead you’ll see that the accordions stay open even if you open other ones.
Most of what the fragment property does is under the hood: the repeater item’s will be wrapped in an extra <div> container if you leave fragment out or set it to false, but if you set it to true they are placed in a vue fragment which doesn’t render as any type of container in the end.
(too inexperienced, I’m afraid)
