ember.jsbootstrap-4ember-bootstrap

How to customize ember-bootstrap components?

I'm new to learning Ember and it mostly makes sense except I'm having a bit of a problem with templating.

My model retrieves a record array and I want to display each record in a collapse-able bootstrap accordion. There is a native ember-bootstrap component (BsAccordion) that seems to make this super easy, but it includes some styling that I'd prefer not to use.

My template is simple and looks like this:

<BsAccordion as |list|>
  {{#each mail as |message|}}
    <list.item @value={{message.id}} @title="{{message.sender.firstName}} {{message.sender.lastName}}: {{message.subject}}">
      {{{message.content}}}
    </list.item>
  {{/each}}
</BsAccordion>

The problem I have is that it wraps each message in a div with class="card" and I do not wish to use bootstrap's card layout. How can I customize the component and prevent it from doing this?

Solution

  • The card class name is applied in the addon/components/bs4/bs-accordion/item.js file. See v3.0.0-rc.0 and master.

    To override this file, define a app/components/bs-accordion/item.js in your app and override with the same content as in the original file, but omitting the unwanted class.