Course Overview: Style and Theme Ionic v3 Applications

Customize Ionic v3 Default Theme Colors

Override Global SASS Variables in Ionic v3 Applications

Set Ionic v3 Config Parameters

Style an Ionic v3 Component on a Single Page

Align and Size Text with Ionic v3 CSS Utilities

Structure an Application UI with Ionic v3 Grid

Lay Out Content with Ionic v3 CSS Utilities

Align Elements with Ionic v3 Grid

First Look: Theming Ionic 4 applications

Style and Theme Ionic v3 Applications

In addition to the various SASS variables that can be adjusted to apply your theme to your Ionic application, there are several other properties that can be set to further define your app’s look and feel. By leveraging the config properties, you can quickly adjust many global parameters that define the theming and user experience of your Ionic application.

Instructor: [00:01] I have already created an Ionic application based on the tabs template. I'm running Ionic serve with the --lab flagged. This flag allows us to see how our application will look on various platforms, in this case, iOS and Android.

[00:18] Switching back to our code, we can change several of the properties of our tabs by changing the config properties. In the App.modules.ts file, we'll find the Ionic module reference in the imports array. Now we can extend this by passing in an object to find the changes we want to make.

[00:40] By default, Ionic will use material design for its styling and icon selection. We can change that by adding an icon mode and setting its value to iOS. This will tell our application to use the iOS style of icons regardless of the platform our app is running on.

[01:01] Saving the file, we see the three icons in the tabs are now different. Let's add two more properties. First, we'll add the tabs layout and set its value to icon left. This will tell our app to place any icons in our tabs to be on the left side of the label.

[01:21] Finally, we'll add tabs placement and set its value to top. This will relocate the tabs to the top of the application. Saving again, we can see the changes to our design. The icons are now on the left, and the tab is now positioned at the top.

[01:41] If we want to override a property for a specific platform, we can do that as well. For example, the material design guidelines used to recommend that the tabs be located at the top of the application, like we just changed, but the iOS guidelines state the tabs should be placed at the bottom of the app.

[02:00] To handle that, we can add a platform key and then add platform and then the specific property we want changed. Platforms, add the object, iOS, and then set the tabs placement to be top. Saving again, switching back to the browser, we can see the tabs are placed differently for each of the two platforms.

Course

Style and Theme Ionic v3 Applications

Set Ionic v3 Config Parameters

Share this video with your friends