-
Notifications
You must be signed in to change notification settings - Fork 27
Built in Icon Support
Using Bootstrap you would probably use icons in the following way:
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
The sl-ember-components repo took a slightly different route by using a base icon class sl-ember-components-icons
instead of the one provided by bootstrap i.e glyphicon
. The base icon class sl-ember-components-icons
rolls into one, the functionality of the sr-only
class and the bootstrap glypicon
class. To better illustrate this, compare the following code sample to the former:
<div class="alert alert-danger" role="alert">
<span class="sl-ember-components-icons glyphicon-exclamation-sign" aria-hidden="true">Error:</span>
Enter a valid email address
</div>
The sl-ember-components-icons
class will make sure that the text "Error:" is not visible to the user, although it will still be present on the page and read aloud by assistive technologies.
Internally within the repo, sl-ember-components-icons
class is extended into other component icon classes via LESS. Here's an example of how the class is extended in app/styles/sl-pagination.less
.sl-icon-previous, .sl-icon-next {
&:extend( .sl-ember-components-icons all );
}
If you are using LESS, you too can extend the sl-ember-components-icons
class if you choose to do so. If you are not using LESS and wish to use the sl-ember-components-icons
class, you can apply it directly on the element as we saw in the code sample previously, also shown below:
<div class="alert alert-danger" role="alert">
<span class="sl-ember-components-icons glyphicon-exclamation-sign" aria-hidden="true">Error:</span>
Enter a valid email address
</div>