Accordion List

Tags: #<Tag:0x00007fc8f1f69138>

I’d like to get a List-Card that acts like an accordion. But all I get is that the list items behave like an accordion, not the list itself:


I would’ve expected that it’s enough to click “accordian list” in “edit list card”

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 :slight_smile:

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 :frowning: (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:

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: true
              noBorder: true
              noShadow: true
              outline: true
              no-chevron: true 
    - component: oh-list-item
      config:
        title: B
      slots:
        accordion: []
    - component: oh-list-item
      config:
        title: C
      slots:
        accordion: []

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.

Here’s

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

Produces


With a first level accordion

And a second level accordion

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

1 Like

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 :wink:
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.

Hello,

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.

Thanks in advance,
Alex

Yes it is - you can use accordionItemOpened: true as a config parameter on the f7-/oh-list-item component.

3 Likes