Created: 19/12/2019
By: IonicTemplate
Email: ionictemplate@outlook.com
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
If you want to build your own Theme Template app with the latest version of Ionic framework, and allows you to build easily your mobile app both for Android and iOS devices, through this App.It Builds with Angular 8+, Ionic 5+, Typescript and SASS to take advantage of the future web standards.
This Project is a default file & folder structure of ionic framework.
npm install -g ionic cordova mac: sudo npm install -g ionic cordova
npm install -g @angular/cli mac: sudo npm install -g @angular/cli
cd project_path/project_name npm install mac: npm install
cd project_path/project_name ionic serve --run on browser ionic cordova run android --run on android(First you must have an Android environment installed.) ionic cordova run ios --run on ios(First you must have an Ios environment installed.)
extract files fromIonic 6 Fitness UI Theme Template App zip package
npm install
Use ionic serve -l to start a local development and run on browser. Open a new cmd.exe for windows or Terminal for mac and run :
cd project_path/project_name ionic serve
Like running cordova build directly, but also builds web assets with configuration from ionic build and provides friendly checks. To pass additional options to the Cordova CLI, use the -- separator after the Ionic CLI arguments.
cd project_path/project_name ionic cordova build android ionic cordova build ios
Build your app and deploy it to devices and emulators using this command. Optionally specify the --livereload option to use the dev server from ionic serve for livereload functionality.
ionic cordova emulate android ionic cordova emulate ios
Build your app and deploy it to devices and emulators using this command. Optionally specify the --livereload option to use the dev server from ionic serve for livereload functionality.
ionic cordova run android ionic cordova run ios
Generate perfectly sized icons and splash screens from PNG source images for your Cordova platforms with this command.
The source image for icons should ideally be at least 1024×1024px and located at resources/icon.png. The source image for splash screens should ideally be at least 2732×2732px and located at resources/splash.png. If you used ionic start, there should already be default Ionic resources in the resources/ directory, which you can overwrite.
You can also generate platform-specific icons and splash screens by placing them in the respective resources/ platform/ directory. For example, to generate an icon for Android, place your image at resources/android/icon.png.
For best results, the splash screen's artwork should roughly fit within a square (1200×1200px) at the center of the image. You can use https://code.ionicframework.com/resources/splash.psd as a template for your splash screen.
ionic cordova resources will automatically update your config.xml to reflect the changes in the generated images, which Cordova then configures.
This command uses the cordova-res utility to generate resources locally. You can also login to your Ionic account and use Ionic servers to generate icons and splash screens with --no-cordova-res.
ionic cordova resources android ionic cordova resources ios
This command uses the Angular CLI to generate features such as pages, components, directives, services, etc.
ionic generate page ionic generate page contact ionic generate component contact/form ionic generate component login-form --change-detection=OnPush ionic generate directive ripple --skip-import ionic generate service api/user
Ionic Framework provides several different layouts that can be used to structure an app. From single page layouts, to split pane views and modals.
The most simple layout available consists of a header and content. Most pages in an app generally have both of these, but a header is not required in order to use content.
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<h1>Main Content</h1>
</ion-content>
</ion-app>
As you can see, a toolbar in a header appears above the content. Sometimes an app needs to have a toolbar below the content, which is when a footer is used.
<ion-app>
<ion-content padding>
<h1>Main Content</h1>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
A layout consisting of horizontal tabs can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using an ion-router-outlet or ion-nav.
<ion-app>
<ion-tabs>
<ion-tab tab="home">
<h1>Home Content</h1>
</ion-tab>
<ion-tab tab="settings">
<h1>Settings Content</h1>
</ion-tab>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-label>Home</ion-label>
<ion-icon name="home"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="settings">
<ion-label>Settings</ion-label>
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-app>
The grid is a powerful mobile-first flexbox system for building custom layouts. It is composed of three units — a grid, row(s) and column(s). Columns will expand to fill their row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS.
<ion-grid>
<ion-row>
<ion-col size="4">
<div>
1 of 4
</div>
</ion-col>
<ion-col size="2">
<div>
2 of 4
</div>
</ion-col>
<ion-col size="2">
<div>
3 of 4
</div>
</ion-col>
<ion-col size="4">
<div>
4 of 4
</div>
</ion-col>
</ion-row>
</ion-grid>
Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin.
Class | Style Rule | Description |
---|---|---|
.ion-text-left |
text-align: left |
The inline contents are aligned to the left edge of the line box. |
.ion-text-right |
text-align: right |
The inline contents are aligned to the right edge of the line box. |
.ion-text-start |
text-align: start |
The same as text-left if direction is left-to-right and text-right if
direction is right-to-left.
|
.ion-text-end |
text-align: end |
The same as text-right if direction is left-to-right and text-left if
direction is right-to-left.
|
.ion-text-center |
text-align: center |
The inline contents are centered within the line box. |
.ion-text-justify |
text-align: justify |
The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. |
.ion-text-wrap |
white-space: normal |
Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes. |
.ion-text-nowrap |
white-space: nowrap |
Collapses whitespace as for normal , but suppresses line breaks (text wrapping)
within text.
|
<ion-grid>
<ion-row>
<ion-col>
<div class="ion-text-uppercase">
<h3>text-uppercase</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
</ion-col>
<ion-col>
<div class="ion-text-lowercase">
<h3>text-lowercase</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
</ion-col>
<ion-col>
<div class="ion-text-capitalize">
<h3>text-capitalize</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
</ion-col>
</ion-row>
</ion-grid>
Class | Style Rule | Description |
---|---|---|
.ion-text-uppercase |
text-transform: uppercase |
Forces all characters to be converted to uppercase. |
.ion-text-lowercase |
text-transform: lowercase |
Forces all characters to be converted to lowercase. |
.ion-text-capitalize |
text-transform: capitalize |
Forces the first letter of each word to be converted to uppercase. |
<ion-grid>
<ion-row>
<ion-col class="ion-float-left">
<div>
<h3>float-left</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
</ion-col>
<ion-col class="ion-float-right">
<div>
<h3>float-right</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
</div>
</ion-col>
</ion-row>
</ion-grid>
Class | Style Rule | Description |
---|---|---|
.ion-float-left |
float: left |
The element will float on the left side of its containing block. |
.ion-float-right |
float: right |
The element will float on the right side of its containing block. |
.ion-float-start |
float: left / float: right |
The same as float-left if direction is left-to-right and float-right
if direction is right-to-left.
|
.ion-float-end |
float: left / float: right |
The same as float-right if direction is left-to-right and float-left
if direction is right-to-left.
|
Ionic components are built with CSS Variables for easy customization of an application. CSS variables allow a value to be stored in one place, then referenced in multiple other places. They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.
When using the Ionic CLI to start an Angular project, the src/theme/variables.scss file is created where you can override the default Ionic Variables.
/* Set variables for all modes */
:root {
/* Set the background of the entire app */
--ion-background-color: #ff3700;
/* Set the font family of the entire app */
--ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}
/* Set text color of the entire app for iOS only */
.ios {
--ion-text-color: #000;
}
/* Set text color of the entire app for Material Design only */
.md {
--ion-text-color: #222;
}
To set a CSS variable for a specific component, add the variable inside of its selector. See Ionic Variables for more information on the component-level variables Ionic provides.
/* Set the color on all ion-button elements */
ion-button {
--color: #222;
}
/* Set the background on an ion-button with the .fancy-button class */
.fancy-button {
--background: #00ff00;
}
Name | Description |
---|---|
--ion-font-family |
Font family of the app |
--ion-statusbar-padding |
Statusbar padding top of the app |
--ion-safe-area-top |
Adjust the safe area inset top of the app |
--ion-safe-area-right |
Adjust the safe area inset right of the app |
--ion-safe-area-bottom |
Adjust the safe area inset bottom of the app |
--ion-safe-area-left |
Adjust the safe area inset left of the app |
--ion-margin |
Adjust the margin of the
|
--ion-padding |
Adjust the padding of the
|
Name | Description |
---|---|
--ion-grid-columns |
Number of columns in the grid |
--ion-grid-padding-xs |
Padding of the grid for xs breakpoints |
--ion-grid-padding-sm |
Padding of the grid for sm breakpoints |
--ion-grid-padding-md |
Padding of the grid for md breakpoints |
--ion-grid-padding-lg |
Padding of the grid for lg breakpoints |
--ion-grid-padding-xl |
Padding of the grid for xl breakpoints |
--ion-grid-column-padding-xs |
Padding of the grid columns for xs breakpoints |
--ion-grid-column-padding-sm |
Padding of the grid columns for sm breakpoints |
--ion-grid-column-padding-md |
Padding of the grid columns for md breakpoints |
--ion-grid-column-padding-lg |
Padding of the grid columns for lg breakpoints |
--ion-grid-column-padding-xl |
Padding of the grid columns for xl breakpoints |
If you find any errors or bugs, please describe in the comments of the project
Important We can not support the following cases:
I've used the following Icons, Image,Framework,Native plugin or Other files as listed,Also Thank you very much for all the resources I have used to development this project
Once again, thank you so much for purchasing Ionic 6 Fitness UI Theme Template App. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.
IonicTemplate