jeudi 6 octobre 2016

Ember 1.13, class names order in a component

I've created a simple component to render icons from SVG sprite. This component should have a default CSS class to manage it's styles globally (.svg-icon). Also, I want to have a possibility to add some context dependent styles via class names through 'class' attribute.

JS:

App.SvgIconComponent = Ember.Component.extend
   layoutName: 'components/svg-icon'
   classNames: ['svg-icon']
   tagName: 'svg'
   attributeBindings: ['width', 'height', 'fill'],

   width: 16
   height: 16
   fill: 'currentColor'

Template:

<use xlink:href="#svg-icon-"/>

Usage:



HTML output:

<svg id="ember1012" width="14" height="14" fill="currentColor" class="social__icon ember-view svg-icon">
    <use xmlns:xlink="http://ift.tt/PGV9lw" xlink:href="#svg-icon-facebook"></use>
</svg>

The problem is that Ember pushed my default class (.svg-icon) into the end of classes list. But, to avoid some issues with cascade, I need this class at the start of classes list (class="svg-icon social__icon ember-view"). Is it possible to achieve?

I know, that I can set classes names with classNameBindings property, but in this case I will need to use some attribute different from 'class'. Use of native 'class' attribute is preferable.

Thnx.




Aucun commentaire:

Enregistrer un commentaire