Customize it
Learn how to customize your Ionic Framework App. Learn Ionic Framework with Ion2FullApp - A super complete Ionic Template.
In Ionic 3 there’s some more boilerplate compared to ionic 1, but don’t panic. The new ionic CLI also has more tools to help you out with this.
Take for example the new generator functions, they provide an easy way to create pages and services for your app. This makes going from a basic app to a full featured app with navigation much easier.
To create a page you can use the following command:
# ionic g page <PageName>
ionic g page myPage
√ Create app/pages/my-page/my-page.html
√ Create app/pages/my-page/my-page.ts
√ Create app/pages/my-page/my-page.scss
We have talked about this above. Believe me, Sass will be your best friend when it comes to styling, it gives superpowers to your css.
The way we structured and build the styling system for this app template will enable you to quickly modify, add and create new styles to match the look and feel and the use cases of your app. There’s much to learn about Sass to get the most out of it. We believe learning by example is the best way, and you will enjoy that benefit with our app template. Also you will find useful documentation about Sass here and here.
If you want to implement new layouts I would highly recommend you to first search within ionic vast list of components to check if there’s one that fit your needs.
If you find none, then try to think the way you do when developing for the web, after all one of the beautiful things and advantages about ionic is that you build stuff using web technologies (html, css, js), and such the web is an open platform you will find tons of solutions for already solved issues.
In particular when I don’t find the component I need, the approach I follow is first think the structure and elements I may need to represent and build the shell of what I want. I constantly rely on ionic grid system. And since I discovered it, I’ve become an expert on Flexbox, and let me tell you, that makes the difference!
An app icon and splash screen (launch image) are important parts of any app, yet making them used to be incredibly tedious. You needed numerous icons for iOS and Android, and then you had to deal with splash screens and all their different sizes.
To save you the stress of dealing with all that, ionic enables you to generate app icons and splash screens via the Ionic CLI.
With the ionic CLI, all you need is a resource directory and two images. These images can be .png files, Photoshop .psd files, or Illustrator .ai files, named icon.png and splash.png.
With the images in a resources directory,
./resources, the ionic resources command will generate the icons and splash screen images for each platform setup in the project, sending them to Ionic's image resizing and cropping server, so you don't have to install extra dependencies.If you only need to update one of the resources, or you only want to generate icons and not both, the ionic resources command has two flags that allow you to target each asset, instead of generating both.
ionic resources --icon
ionic resources --splash
If you need any further assistance with this, please go to ionic cordova resources for more information.
Last modified 4yr ago