Feather: Add predefined styles
You can change the appearance of Feather widgets by choosing a style from a predefined collection of styles. Feather widget designers use AngularJS technology, using which you just need to register all available styles for the widget in the widget designer, for example, in the designerview-simple.js file.
The following example demonstrates what format to use:
angular.module('designer').value('cssClasses', {
'DetailPage': [
{ 'value': 'blue', 'title': 'Blue box' },
{ 'value': 'red', 'title': 'Red box' }
],
'NewsList': [
{ 'value': 'green', 'title': 'Green box' }
]
});
In the code above:
value is the name of your CSS classtitle is the title for the class that is displayed in the dropdown menu in the widget designer
CSS styles are grouped by the name of the view where they style can be applied.
For example, you may have different set of styles for the DetailPage view and for the NewsList view.
NOTE: When you select a value from this dropdown menu, a class with the same name is applied to the upper element defined in the particular widget view. If you want to apply this style to another element, you can edit the template for this view and move the style binding to it using the following code:
<div class="@Model.CssClass">