File
Implements
Metadata
| selector |
ngx-kitten |
| styleUrls |
kitten.component.scss |
| templateUrl |
./kitten.component.html |
Constructor
constructor(themeService: NbThemeService)
|
|
|
Parameters :
| Name |
Type |
Optional |
| themeService |
NbThemeService
|
no
|
|
Methods
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
themeSubscription
|
themeSubscription: any
|
Type : any
|
|
|
import { Component, OnDestroy } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
@Component({
selector: 'ngx-kitten',
styleUrls: ['./kitten.component.scss'],
templateUrl: './kitten.component.html',
})
export class KittenComponent implements OnDestroy {
currentTheme: string;
themeSubscription: any;
constructor(private themeService: NbThemeService) {
this.themeSubscription = this.themeService.getJsTheme().subscribe(theme => {
this.currentTheme = theme.name;
});
}
ngOnDestroy() {
this.themeSubscription.unsubscribe();
}
}
<nb-card size="medium">
<nb-card-body>
<div class="picture" style.background-image="url('assets/images/kitten-{{currentTheme}}.png')"></div>
<div class="details">
<div class="title">
React Native UI Kitten
</div>
<div class="description">
React Native UI Kitten is a framework that contains a set of commonly used UI components styled in a similar way. The most awesome thing: you can change themes on the fly by just passing a different set of variables. 100% native. Give our kitten a try!
</div>
</div>
</nb-card-body>
<nb-card-footer>
<a href="https://akveo.github.io/react-native-ui-kitten" target="_blank">
<i class="ion-ios-world"></i>
</a>
<a href="https://itunes.apple.com/us/app/kitten-tricks/id1246143230" target="_blank">
<i class="ion-social-apple"></i>
</a>
<a href="https://play.google.com/store/apps/details?id=com.akveo.kittenTricks" target="_blank">
<i class="ion-social-android"></i>
</a>
<a href="https://github.com/akveo/react-native-ui-kitten" target="_blank">
<i class="ion-social-github"></i>
</a>
</nb-card-footer>
</nb-card>
Legend
Html element with directive