I need help making a component reusable

1

I’m at the beginning of a rewrite of an app from rails to ember. I want to make some components that I can reuse across the app but they have slight differences. Here are images of the panel headers on four seperate pages:

970×78 13.4 KB

970×74 3.69 KB

970×74 3.74 KB

970×74 6.63 KB

When clicked they open up to this:

970×208 16.5 KB

970×232 34.7 KB

970×521 56.6 KB

970×365 39.2 KB

I was thinking about something like this:

{{#content-panel}}
    {{content-panel-header}}
    {{content-panel-body}}
{{/content-panel}}

Does this seem reasonable? Is there a best practice for nested components?

Thank you for your time.

2

Ember newbie currently reading up on stuff here - so take this with a big grain of salt … But this topic in the guide http://guides.emberjs.com/v2.0.0/components/composing-components/ looks like it could help with what you are asking about.

3

Thanks, I’ll check it out.