You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/core-concepts/cross-platform.md
+3-4Lines changed: 3 additions & 4 deletions
Original file line number
Diff line number
Diff line change
@@ -37,7 +37,6 @@ This bit of code can be incredibly helpful when targeting environments where acc
37
37
38
38
Many native APIs that people use (for example, the File API), are not available in the browser. The APIs are always improving and catching up to native, so it is recommended to research them. Taking the first two points into consideration, it's fairly easy to create a nice experience that will adapt for the platform the app is running on.
39
39
40
-
41
40
## Desktop
42
41
43
42
When planning to deploy an app to desktop, either using <ahref="https://electronjs.org"target="_blank">Electron</a> or as a <strong>Progressive Web App</strong>, it is important to ensure the app works smoothly on larger devices.
@@ -68,7 +67,7 @@ Many people rarely notice the layout of an app, but it can have a massive impact
68
67
69
68
This will render 5 items with a width of 100% each. This may look great on a mobile device, as seen below, but viewing this on a desktop browser is a different story. The items become stretched to fill the entire screen because of the wide screen width, leaving screen space unused.
To improve this experience, we can wrap the items in a [Grid](/docs/layout/grid) component. The view can be easily rewritten into something more usable on larger screens:
74
73
@@ -106,11 +105,11 @@ To improve this experience, we can wrap the items in a [Grid](/docs/layout/grid)
106
105
107
106
By wrapping the items in an `ion-grid` element, the Ionic grid system is added to our layout. Wrapping each item in a column makes the items take up equal-width inside of the grid, along the same row.
We can take this even further by adding the `fixed` attribute to the `<ion-grid>` element. This tells the grid to have a fixed width based on the screen size. This is perfect for larger screens when items will begin to stretch again without a width on the grid.
Copy file name to clipboardExpand all lines: docs/developer-resources/guides/first-app-v3/ios-android-camera.md
+9-9Lines changed: 9 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -5,10 +5,10 @@
5
5
6
6
Previously, we got an Ionic app up and running locally in a web browser. Now, let’s get it onto your iOS or Android device, then start building the photo gallery feature. Fortunately, Ionic provides a way to skip the frustration of dealing with native SDK installations: Ionic DevApp!
7
7
8
-
The Ionic DevApp is a free app that makes it easy to run your Ionic app directly on your iOS or Android device. Download it here, then open on your device:
8
+
The Ionic DevApp is a free app that makes it easy to run your Ionic app directly on your iOS or Android device. Download it here, then open on your device:
Afterwards, open a terminal and navigate to your Ionic project. Execute the following:
14
14
@@ -24,9 +24,9 @@ Back in `about.html`, add the following:
24
24
25
25
```html
26
26
<ion-content>
27
-
<img>
27
+
<img />
28
28
29
-
<ion-fabcenterbottom>
29
+
<ion-fabcenterbottom>
30
30
<buttonion-fab>
31
31
<ion-iconname="camera"></ion-icon>
32
32
</button>
@@ -38,7 +38,7 @@ Save the file and watch - a camera button appears! Tap on it and notice that it
38
38
39
39
## Add the Camera Dependencies via the CLI
40
40
41
-
In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code:
41
+
In order to use the Camera, we need to bring in its JavaScript and native library dependencies. Back over in your Terminal window, run the following command, which adds the JavaScript library to the project, thus exposing the Camera API in TypeScript code:
42
42
43
43
```shell
44
44
$ npm install --save @ionic-native/camera
@@ -95,13 +95,13 @@ It can now be used on any of our App pages.
95
95
Our camera button doesn’t do anything yet. Over in `about.html`, add a click handler to the button:
96
96
97
97
```html
98
-
<buttonion-fab(click)="takePicture()">
98
+
<buttonion-fab(click)="takePicture()"></button>
99
99
```
100
100
101
101
Then, update the image placeholder. The following binds the “currentImage” variable (which we’ll work on next) to the image to display to the user.
102
102
103
103
```html
104
-
<img[src]="currentImage"*ngIf="currentImage">
104
+
<img[src]="currentImage"*ngIf="currentImage" />
105
105
```
106
106
107
107
Open `about.ts` next and import the Camera library:
0 commit comments