/angularjs/

Angular Material. Example Panel Admin.

2015-12-07 16:12:24

From this simple example we can learn few things.

How to change theme

.config(function ($mdThemingProvider) {
    $mdThemingProvider
        .theme('default')
        .primaryPalette('blue')
        .accentPalette('pink')
    ;
})

How we can create nice looking simple list


<md-list>
<md-subheader class='"md-no-sticky"'>Last article</md-subheader>
<md-list-item articles&quot;="" class='"md-3-line"' in="" ng-click='"goToArticle(article.id)"' ng-repeat='"article'>
<img class='"md-avatar"' ng-src='"{{article.face}}"'/>
<div class='"md-list-item-text"' layout='"column"'>
<h3>{{ article.title }}</h3>
<h4>{{ article.notes }}</h4>
<p>{{ article.author }}</p>
</div>
</md-list-item>
</md-list>

How we can create simple form, what component used to do this


<md-input-container>
<label>Title</label>
<input ng-model='"article.title"'/>
</md-input-container>

...

<md-input-container flex="">
<label>State</label>
<md-select ng-model='"article.state"'>
<md-option in="" ng-repeat='"state' states&quot;="" value='"{{state.id}}"'>
            {{state.name}}
        </md-option>
</md-select>
</md-input-container>

...

<md-input-container class='"md-block"'>
<label>Short version</label>
<textarea columns='"1"' md-maxlength='"150"' ng-model='"article.short"' rows='"5"'></textarea>
</md-input-container>

and few things more, everything you can find on GitHub