framework7io / framework7-vue

Deprecated! Build full featured iOS & Android apps using Framework7 & Vue
http://framework7.io/vue/
MIT License
674 stars 151 forks source link

Allow custom components in f7-list #401

Closed cathrinevaage closed 6 years ago

cathrinevaage commented 6 years ago

It's impossible to use custom components in f7-list because they are sortet into listChildren instead of ulChildren, and placed outside the ul.

I have a component, result-item. The root element in the template is f7-list-item. The tag name in the VNode is then vue-component-N-result-item, and is not treated like a an list-item component.

I propose two solutions to this:

  1. Add a whitelist option, so that you can specify elements that should be treated as ulChildren.
  2. Remove the whole listChildren thing. I don't think the documentation even mentions support for other element types than list-item. Treating every element in the default slot as list items, regardless of tag name.

I personally think the second option is better. If we still need to support other elements that will be put under the list, add a named slot for it.

nolimits4web commented 6 years ago

There are some more elements that must be a direct list children like: list-group, block-title, block-footer, swipeouts, etc. You can just add own <ul> inside and it will work like you expected, e.g.:


<f7-list>
  <ul>
     <some-custom-component></some-custom-component>
  </ul>
</f7-list>
nolimits4web commented 6 years ago

Also added before-list, list, after-list slots to have more control over it