Skip to content

Commit ea35bbe

Browse files
tsonevntsonevn
committed
add md info
1 parent 5a925ae commit ea35bbe

File tree

10 files changed

+32
-62
lines changed

10 files changed

+32
-62
lines changed

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
The title of the ActionBar can be easily set by its corresponding property - `title`.
2-
We can additionally set an icon to use in your ActionBar on Android with the `icon` property.
1+
### Icon Fonts in ActionBar
32

4-
Here’s what a basic usage of the `title` and `icon` properties looks like:
5-
<snippet id='action-bar-gettings-started'/>
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.
64

7-
> Note: The icon can only be set in Android platform. It is hidden by default, but you can explicitly control its visibility with the `android.iconVisibility' property.
8-
9-
Furthermore, the title can be customized by placing a content component (button, label, layout-components, etc.) directly in the ActionBar.
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: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,15 @@ Label {
44
margin:8;
55
padding: 16;
66
}
7-
/* >> action-bar-icon-fonts-css */
7+
/* >> actionbar-icon-fonts-css */
88
.font-awesome {
99
font-family: "Font Awesome 5 Free", "fa-regular-400";
1010
}
11-
/* << action-bar-icon-fonts-css */
11+
1212
.font-size {
1313
font-size: 48;
14-
width: 48;
15-
height: 48;
1614
}
17-
15+
/* << actionbar-icon-fonts-css */
1816
.color {
1917
color: blue;
2018
}

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

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
11
const Observable = require("tns-core-modules/data/observable").Observable;
2-
const platformModule = require("tns-core-modules/platform");
32
const frameModule = require("tns-core-modules/ui/frame")
43
function onNavigatingTo(args) {
54
const page = args.object;
65
const vm = new Observable();
76
vm.set("title", "Icon Fonts \nAction Bar Example");
8-
vm.set("snippet", "<ActionBar title=\"Icon Fonts\" class=\"action-bar\"/>");
9-
if(platformModule.isIOS){
10-
let navigationBar = page.actionBar.ios;
11-
console.log("navigationBar");
12-
console.log(navigationBar)
13-
// navigationBar.topItem.hidesBackButton = true;
14-
}
7+
vm.set("snippet", "<ActionBar title=\"Icon Fonts\" class=\"action-bar\"/>");
158
page.bindingContext = vm;
169
}
1710
function navigateBack() {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<Page xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
2-
<!-- >> action-bar-icon-fonts -->
2+
<!-- >> actionbar-icon-fonts-xml -->
33
<Page.actionBar>
44
<ActionBar>
55
<!-- >> (hide) -->
@@ -13,7 +13,7 @@
1313
</ActionBar.actionItems>
1414
</ActionBar>
1515
</Page.actionBar>
16-
<!-- << action-bar-icon-fonts -->
16+
<!-- << actionbar-icon-fonts-xml -->
1717

1818
<StackLayout verticalAlignment="middle">
1919
<Label text="{{ '&#xff05a; ' + title }}" textWrap="true" class="fa"/>

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

Lines changed: 6 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,8 @@
1-
The prefix of the `src` value specifies where the image will be loaded form.
2-
The possible options are:
1+
### Icon Fonts in Image
32

4-
### Using Resources
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.
54

6-
Using the `res://` prefix you can load a resource image. This is the suggested approach, as it uses the native methods for loading the best image for the current device screen density and resolution.
7-
8-
Loading an image from application resources (in `App_Resources/<platform>`).
9-
<snippet id='image-resource'/>
10-
11-
Loading an image from application resources (in `App_Resources/<platform>`) via code-behind.
12-
<snippet id='image-code-behdnd'/>
13-
<snippet id='image-code-behdnd-ts'/>
14-
15-
### Using Local Files
16-
17-
Using the `~/` prefix, you can load images relative to the App folder inside your project.
18-
19-
Loading an image from the local file system. In the example below the full path of the image is `<project-folder>/app/images/logo.png`
20-
<snippet id='image-app-folder'/>
21-
22-
### Using Online Resources
23-
24-
Web images have an http:// or https:// prefix. When such an image is loaded, an asynchronous http request will be sent and the image will be shown if the request is successful.
25-
26-
Loading an image from URL. For large images use `loadMode` property to avoid blocking of the UI (see the [best practices](https://docs.nativescript.org/best-practices/images-optimisations) article for more information)
27-
<snippet id='image-online-url'/>
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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,15 @@ Image {
33
margin: 16;
44
width: 60;
55
}
6+
/* >> image-icon-fonts-css */
67
.font-awesome {
78
font-family: "Font Awesome 5 Free", "fa-regular-400";
89
}
910

1011
.font-size {
1112
font-size: 96;
1213
}
13-
14+
/* << image-icon-fonts-css */
1415
.color {
1516
color: blue;
1617
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@ const Image = require("tns-core-modules/ui/image").Image;
22
const GridLayout = require("tns-core-modules/ui/layouts/grid-layout").GridLayout;
33
function containerLoaded(args) {
44
const container = args.object;
5-
// >> image-code-behdnd-js
5+
// >> image-icon-fonts-js
66
const newImage = new Image();
77
const imageString = String.fromCharCode(0xF10B)
88
newImage.src = "font://"+imageString;
9-
// newImage.stretch = "aspectFill";
109
newImage.className = "font-awesome font-size";
1110
newImage.width = 49;
1211
newImage.height = 49;
13-
// << image-code-behdnd-js
12+
// << image-icon-fonts-js
1413
container.addChild(newImage);
1514
GridLayout.setRow(newImage, 3);
1615
GridLayout.setColumn(newImage, 0);

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,17 @@
44
</Page.actionBar>
55

66
<ScrollView>
7+
<!-- >> image-icon-fonts-xml -->
78
<GridLayout rows="*, *, *, *" columns="*, *" height="300" loaded="containerLoaded" verticalAlignment="middle">
8-
<!-- font family only -->
9+
910
<Image row="0" col="0" src="font://&#xF2b9;" class="font-awesome"/>
10-
<!-- font family + font size -->
11+
1112
<Image row="0" col="1" src="font://&#xF557;" class="font-awesome font-size"/>
12-
<!-- font family + color -->
13+
1314
<Image row="1" col="0" src="font://&#xF433;" style="font-family: 'Font Awesome 5 Free', 'fa-regular-400';" class="font-awesome color"/>
14-
<!-- font family + font size + color -->
15+
1516
<Image row="1" col="1" src="font://&#xF240;" class="font-awesome font-size color"/>
1617
</GridLayout>
18+
<!-- << image-icon-fonts-xml -->
1719
</ScrollView>
1820
</Page>

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import { GridLayout } from "tns-core-modules/ui/layouts/grid-layout";
44

55
export function containerLoaded(args: EventData) {
66
const container = <GridLayout>args.object;
7-
// >> image-code-behdnd-ts
7+
// >> image-icon-fonts-ts
88
const newImage = new Image();
99
const imageString = String.fromCharCode(0xF10B)
1010
newImage.src = "font://"+imageString;
11-
// newImage.stretch = "aspectFill";
1211
newImage.className = "font-awesome font-size";
1312
newImage.width = 49;
1413
newImage.height = 49;
15-
// << image-code-behdnd-ts
14+
// << image-icon-fonts-ts
1615
container.addChild(newImage);
1716
GridLayout.setRow(newImage, 3);
1817
GridLayout.setColumn(newImage, 0);

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44
</Page.actionBar>
55
<ScrollView>
66
<GridLayout rows="*, *, *, *" columns="*, *" height="300" loaded="containerLoaded" verticalAlignment="middle">
7-
<!-- font family only -->
7+
88
<Image row="0" col="0" src="font://&#xF2b9;" class="font-awesome"/>
9-
<!-- font family + font size -->
9+
1010
<Image row="0" col="1" src="font://&#xF557;" class="font-awesome font-size"/>
11-
<!-- font family + color -->
11+
1212
<Image row="1" col="0" src="font://&#xF433;" style="font-family: 'Font Awesome 5 Free', 'fa-regular-400';" class="font-awesome color"/>
13-
<!-- font family + font size + color -->
13+
1414
<Image row="1" col="1" src="font://&#xF240;" class="font-awesome font-size color"/>
1515
</GridLayout>
1616
</ScrollView>

0 commit comments

Comments
 (0)