Skip to content

Commit ef6713a

Browse files
NickIlievNickIliev
authored
Merge pull request #143 from NativeScript/img_ab_icon_fonts
icon fonts examples
2 parents 4befe9f + a1dfba4 commit ef6713a

15 files changed

+226
-88
lines changed

‎app/app.js

Lines changed: 0 additions & 34 deletions
This file was deleted.

‎app/ns-ui-widgets-category/action-bar/action-bar-page.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ const navigationLinks = [
3030
"Hiding ActionItems",
3131
"ns-ui-widgets-category/action-bar/hiding-action-items/hiding-action-items-page"
3232
),
33+
new link("Icon Fonts", "ns-ui-widgets-category/action-bar/icon-fonts/icon-fonts-page"),
3334
new link("Styling", "ns-ui-widgets-category/action-bar/styling/styling-page"),
3435
new link(
3536
"Creating SideDrawer button",

‎app/ns-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-xml'/>
6+
<snippet id='actionbar-icon-fonts-css'/>

‎app/ns-ui-widgets-category/action-bar/icon-fonts/icon-fonts-page.css

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

‎app/ns-ui-widgets-category/action-bar/icon-fonts/icon-fonts-page.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const Observable = require("tns-core-modules/data/observable").Observable;
2+
const frameModule = require("tns-core-modules/ui/frame");
3+
function onNavigatingTo(args) {
4+
const page = args.object;
5+
const vm = new Observable();
6+
vm.set("title", "Icon Fonts \nAction Bar Example");
7+
vm.set("snippet", "<ActionBar title=\"Icon Fonts\" class=\"action-bar\"/>");
8+
page.bindingContext = vm;
9+
}
10+
function navigateBack() {
11+
frameModule.goBack();
12+
}
13+
exports.onNavigatingTo = onNavigatingTo;
14+
exports.navigateBack = navigateBack;

‎app/ns-ui-widgets-category/action-bar/icon-fonts/icon-fonts-page.xml

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
2+
<!-- >> actionbar-icon-fonts-xml -->
3+
<Page.actionBar>
4+
<ActionBar>
5+
<!-- >> (hide) -->
6+
<NavigationButton text="Back" visibility="collapsed" />
7+
<!-- << (hide) -->
8+
<ActionBar.actionItems>
9+
10+
<ActionItem icon="font://&#xF359;" class="font-awesome font-size color" ios.position="left" tap="navigateBack"/>
11+
12+
<ActionItem icon="font://&#xF2b9;" style="font-family:'Font Awesome 5 Free', 'fa-regular-400';" class="font-size color" ios.position="right"/>
13+
</ActionBar.actionItems>
14+
</ActionBar>
15+
</Page.actionBar>
16+
<!-- << actionbar-icon-fonts-xml -->
17+
18+
<StackLayout verticalAlignment="middle">
19+
<Label text="{{ '&#xff05a; ' + title }}" textWrap="true" class="fa"/>
20+
</StackLayout>
21+
</Page>

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
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-xml'/>
6+
<snippet id='image-icon-fonts-css'/>
7+
<snippet id='image-icon-fonts-js'/>
8+
<snippet id='image-icon-fonts-ts'/>

‎app/ns-ui-widgets-category/image/icon-fonts/icon-fonts-page.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 */
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 */
15+
.color {
16+
color: blue;
17+
}

‎app/ns-ui-widgets-category/image/icon-fonts/icon-fonts-page.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const Image = require("tns-core-modules/ui/image").Image;
2+
const GridLayout = require("tns-core-modules/ui/layouts/grid-layout").GridLayout;
3+
function containerLoaded(args) {
4+
const container = args.object;
5+
// >> image-icon-fonts-js
6+
const newImage = new Image();
7+
const imageString = String.fromCharCode(0xF2b9);
8+
newImage.src = `font://${imageString}`;
9+
newImage.className = "font-awesome font-size";
10+
newImage.width = 49;
11+
newImage.height = 49;
12+
// << image-icon-fonts-js
13+
container.addChild(newImage);
14+
GridLayout.setRow(newImage, 1);
15+
GridLayout.setColumn(newImage, 0);
16+
GridLayout.setColumnSpan(newImage, 2);
17+
}
18+
exports.containerLoaded = containerLoaded;

‎app/ns-ui-widgets-category/image/icon-fonts/icon-fonts-page.xml

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<Page xmlns="http://www.nativescript.org/tns.xsd">
2+
<Page.actionBar>
3+
<ActionBar title="Icon fonts"/>
4+
</Page.actionBar>
5+
6+
<ScrollView>
7+
<!-- >> image-icon-fonts-xml -->
8+
<GridLayout rows="*, *" columns="*, *" height="300" loaded="containerLoaded" verticalAlignment="middle">
9+
10+
<Image row="0" col="0" src="font://&#xF2b9;" class="font-awesome"/>
11+
12+
<Image row="0" col="1" src="font://&#xF359;" style="font-family: 'Font Awesome 5 Free', 'fa-regular-400';" class="font-awesome color"/>
13+
14+
</GridLayout>
15+
<!-- << image-icon-fonts-xml -->
16+
</ScrollView>
17+
</Page>

‎app/ns-ui-widgets-category/image/icon-fonts/icon-fonts-ts-page.css

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

‎app/ns-ui-widgets-category/image/icon-fonts/icon-fonts-ts-page.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { EventData } from "tns-core-modules/data/observable";
2+
import { Image } from "tns-core-modules/ui/image";
3+
import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
4+
5+
export function containerLoaded(args: EventData) {
6+
const container = <GridLayout>args.object;
7+
// >> image-icon-fonts-ts
8+
const newImage = new Image();
9+
const imageString = String.fromCharCode(0xF2b9);
10+
newImage.src = "font://" + imageString;
11+
newImage.className = "font-awesome font-size";
12+
newImage.width = 49;
13+
newImage.height = 49;
14+
// << image-icon-fonts-ts
15+
container.addChild(newImage);
16+
GridLayout.setRow(newImage, 1);
17+
GridLayout.setColumn(newImage, 0);
18+
GridLayout.setColumnSpan(newImage, 2);
19+
}

‎app/ns-ui-widgets-category/image/icon-fonts/icon-fonts-ts-page.xml

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<Page xmlns="http://www.nativescript.org/tns.xsd">
2+
<Page.actionBar>
3+
<ActionBar title="Icon fonts"/>
4+
</Page.actionBar>
5+
<ScrollView>
6+
<GridLayout rows="*, *" columns="*, *" height="300" loaded="containerLoaded" verticalAlignment="middle">
7+
8+
<Image row="0" col="0" src="font://&#xF2b9;" class="font-awesome"/>
9+
10+
<Image row="0" col="1" src="font://&#xF359;" style="font-family: 'Font Awesome 5 Free', 'fa-regular-400';" class="font-awesome color"/>
11+
12+
</GridLayout>
13+
</ScrollView>
14+
</Page>

‎app/ns-ui-widgets-category/image/image-page.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ const navigationLinks = [
44
new link("Basics", "ns-ui-widgets-category/image/basics/basics-page"),
55
new link("Binding", "ns-ui-widgets-category/image/binding/binding-page"),
66
new link("Image Source", "ns-ui-widgets-category/image/image-source/image-source-page"),
7-
new link("Stretching", "ns-ui-widgets-category/image/stretching/stretching-page")
7+
new link("Stretching", "ns-ui-widgets-category/image/stretching/stretching-page"),
8+
new link("Icon Fonts", "ns-ui-widgets-category/image/icon-fonts/icon-fonts-page")
89
];
910
const navigationLinksTsc = [
1011
new link("Basics", "ns-ui-widgets-category/image/basics/basics-ts-page"),
1112
new link("Binding", "ns-ui-widgets-category/image/binding/binding-ts-page"),
12-
new link("Image Source", "ns-ui-widgets-category/image/image-source/image-source-ts-page")
13+
new link("Image Source", "ns-ui-widgets-category/image/image-source/image-source-ts-page"),
14+
new link("Icon Fonts", "ns-ui-widgets-category/image/icon-fonts/icon-fonts-ts-page")
1315
];
1416
function onNavigatingTo(args) {
1517
const page = args.object;

0 commit comments

Comments
 (0)