Make Accordion component with child components

[RYeah Sh]

Hello,

I am struggling to make a simple Accordion component.
The purpose of that component is to receive header and content component and render them both, with a toggle event on `on-click` on the header part to show/hide the contentComp.

<div
    on-click='@this.toggle("accordionOpen")' class="accordion-container">
    <div class="accordion-header">
        {{headerComp}}
    </div>
    {{#accordionOpen}}
    <div class="accordion-content">
        {{contentComp}}
    </div>
    {{/stateOpen}}
</div>

Something like this.

and in the template that uses this component

<div>
    <Accordion headerComp={??} contentComp={??} />
</div>

I tried to think how to use the {{yield}} but it just render the children, where i need to wrap the children in order to make the toggle event.

Also another point is that `headerComp` and `contentComp` can be any components that receive or already received its data so it has its own context.

Any thoughts about this? Maybe there is a different way i did not consider?

Thanks.

[Chris Reeves]

This is one of those slightly touchy things that requires a bit of twiddling to get good usability. You can build it as two separate components, a wrapper Accordion and contained Panels, or you can adjust the content partial that comes in to the component at init to suite your needs. I found a bug while putting together this https://jsfiddle.net/L9rvx5Ly/, but it's a start. This is also achievable with 0.8, but you can't yield non-inline partials there, so for convenience from the use side, 0.9-alpha is best.

Thanks, Chris

--
You received this message because you are subscribed to the Google Groups "Ractive.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Chris Reeves]

The yielding bugs are now fixed on edge (though tags seem to take a bit longer to update), which makes things a bit cleaner: https://jsfiddle.net/L9rvx5Ly/1/

Thanks, Chris

[RYeah Sh]

Thanks for the effort but it looks cumbersome especially when using ES6 modules loading.
I will investigated your solution to learn more on ractive.

what is the future roadmap regarding these issues i am in need for?

Thanks.

Thanks, Chris

Thanks, Chris

To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+...@googlegroups.com.

[Chris Reeves]

Well, making a generic, configurable accordion is a bit cumbersome. If you just want to put a bit of accordion markup around an array or map in data, that's really simple.

There's nothing specific on the roadmap for this particular case, but there are some ongoing discussions about how to make components more effective and easier to build. There are also some ongoing efforts to build a UI library, so this would be a generic component where the cumbersome bits were already taken care of.

To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+unsubscribe@googlegroups.com.

[RYeah Sh]

Thanks so much, i hope with the release of version 9 there will be updates also regarding the documentation.