At this point, we have laid out all our views according to how we want them to appear on the page and so, we can begin to look at styling them appropriately. There are three properties on SC.View
that are useful for styling: classNames
, tagName
, and layerId
.
First, we use the classNames
property of the view to name one or more CSS class names that the view element will include. For example, to have the classes title-view
and blue
included as class names, we would add the following code lines:
titleView: SC.View.extend({ // <div class="title-view blue … classNames: ['title-view', 'blue'] }),
It is a bit surprising though if you inspected the class
attribute of the resulting element. You would find it doesn't just contain only the title-view
and blue
class names. Here is what it would be for an application called MyApp
:
class="ace my-app sc-view title-view blue"
The first two classes ace
and my-app
are the result of themes applied by default at the application level. The application...