Skip to content

Commit 67b90f2

Browse files
NickIlievNickIliev
authored
Merge pull request #392 from NativeScript/img_ab_icon_fonts
icon fonts examples
2 parents 3e04e0a + 01ace5b commit 67b90f2

15 files changed

+119
-8
lines changed

‎app/ng-ui-widgets-category/action-bar/action-bar-examples.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { Link } from "./../../link";
44
let menuLinks = [
55
new Link("Action items", "/action-bar/action-items"),
66
new Link("Navigation button", "/action-bar/navigation-button"),
7-
new Link("Title", "/action-bar/title")
7+
new Link("Title", "/action-bar/title"),
8+
new Link("Icon fonts", "/action-bar/icon-fonts")
89
];
910

1011
@Component({

‎app/ng-ui-widgets-category/action-bar/action-bar-examples.module.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ActionItemsComponent } from "./action-items/action-items.component";
66
import { NavigationButtonComponent } from "./navigation-button/navigation-button.component";
77
import { TitleComponent } from "./title/title.component";
88
import { TitleAndNavButtonModule } from "../../directives/title-and-nav-button.module";
9-
9+
import { IconFontsComponent } from "./icon-fonts/icon-fonts.component";
1010
export const routerConfig = [
1111
{
1212
path: "",
@@ -26,6 +26,11 @@ export const routerConfig = [
2626
path: "title",
2727
component: TitleComponent,
2828
data: { title: "ActionBar title" }
29+
},
30+
{
31+
path: "icon-fonts",
32+
component: IconFontsComponent,
33+
data: { title: "Icon fonts" }
2934
}
3035
];
3136

@@ -41,7 +46,8 @@ export const routerConfig = [
4146
ActionBarExamplesComponent,
4247
ActionItemsComponent,
4348
NavigationButtonComponent,
44-
TitleComponent
49+
TitleComponent,
50+
IconFontsComponent
4551
]
4652
})
4753

‎app/ng-ui-widgets-category/action-bar/action-items/action-items.component.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { RouterExtensions } from "nativescript-angular/router";
44
@Component({
55
moduleId: module.id,
66
templateUrl: "./action-items.component.html"
7+
78
})
89
export class ActionItemsComponent {
910

‎app/ng-ui-widgets-category/action-bar/icon-fonts/article.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
### Icon Fonts in ActionBar
2+
3+
Using the `font://` prefix, you can load a resource in the ActionItem while setting up an icon code provided by an icon font. By setting up this prefix, a new image will be generated, which will be set as an ActionItem's `icon` resource. While using this functionality, we need to specify the `font-size`, which will calculate the size of the generated image base on the device's dpi.
4+
5+
<snippet id='actionbar-icon-fonts-html'/>
6+
<snippet id='actionbar-icon-fonts-css-ng'/>

‎app/ng-ui-widgets-category/action-bar/icon-fonts/icon-fonts.component.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* >> actionbar-icon-fonts-css-ng */
2+
.font-awesome {
3+
font-family: "Font Awesome 5 Free", "fa-regular-400";
4+
}
5+
6+
.font-size {
7+
font-size: 48;
8+
}
9+
/* << actionbar-icon-fonts-css-ng */
10+
.color {
11+
color: blue;
12+
}

‎app/ng-ui-widgets-category/action-bar/icon-fonts/icon-fonts.component.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<StackLayout sdkToggleNavButton>
2+
<!-- >> actionbar-icon-fonts-html -->
3+
<ActionBar title=" NativeScript" android.icon="res://icon" android.iconVisibility="always">
4+
<!-- >> (hide) -->
5+
<NavigationButton text="Back" visibility="collapsed" ></NavigationButton>
6+
<!-- << (hide) -->
7+
<ActionItem icon="font://&#xF359;" class="font-awesome font-size color" ios.position="left" (tap)="goBack()"></ActionItem>
8+
9+
<ActionItem icon="font://&#xF2b9;" style="font-family:'Font Awesome 5 Free', 'fa-regular-400';" class="font-size color" ios.position="right"></ActionItem>
10+
</ActionBar>
11+
<!-- << actionbar-icon-fonts-html -->
12+
</StackLayout>

‎app/ng-ui-widgets-category/action-bar/icon-fonts/icon-fonts.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component } from "@angular/core";
2+
import { RouterExtensions } from "nativescript-angular/router";
3+
4+
@Component({
5+
moduleId: module.id,
6+
templateUrl: "./icon-fonts.component.html",
7+
styleUrls: ["./icon-fonts.component.css"]
8+
9+
})
10+
export class IconFontsComponent {
11+
12+
constructor(private routerExtensions: RouterExtensions) { }
13+
14+
public goBack() {
15+
this.routerExtensions.backToPreviousPage();
16+
}
17+
}

‎app/ng-ui-widgets-category/animations/metadata.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ description: Animation module provides the needed functionality for animating UI
44
position: 18
55
slug: animations-ng
66
---
7+
example-order: title, action-items, navigation-button, icon-fonts

‎app/ng-ui-widgets-category/image/icon-fonts/article.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
### Icon Fonts in Image
2+
3+
Using the `font://` prefix, you can load a resource image while setting up an icon code provided by an icon font. By setting up this prefix, a new image will be generated, which will be set as an ImageView resource. While using this functionality, we need to specify the `font-size`, which will calculate the size of the generated image base on the device's dpi. For further configuration on size of the displayed image, we can config the view's `width` and `height` properties.
4+
5+
<snippet id='image-icon-fonts-html'/>
6+
<snippet id='image-icon-fonts-css-ng'/>

‎app/ng-ui-widgets-category/image/icon-fonts/icon-fonts.component.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
Image {
2+
height: 60;
3+
margin: 16;
4+
width: 60;
5+
}
6+
/* >> image-icon-fonts-css-ng */
7+
.font-awesome {
8+
font-family: "Font Awesome 5 Free", "fa-regular-400";
9+
}
10+
11+
.font-size {
12+
font-size: 96;
13+
}
14+
/* << image-icon-fonts-css-ng */
15+
.color {
16+
color: blue;
17+
}

0 commit comments

Comments
 (0)