Platform Specific Styles
Ionic uses modes to customize the look of components to match the platform you are using. For example, when you are viewing the app on an Android device, the <body> will have class="md" added to it by default:
<body class="md">
Here is a chart of the default mode that gets added based on platform:
| Platform | Mode | Description |
|---|---|---|
| iOS | ios | Applies iOS styling to all components. |
| Android | md | Applies Material Design styling to all components. |
| Windows Phone | md | Applies Material Design styling to all components. |
| All Other Platforms | ios | If you are not on one of the above devices, the app will get iOS styling by default. |
You can change the mode that gets assigned in the configuration of your app. Therefore, if you wanted the Material Design md mode on iOS, you could do it.
Overriding the Mode Styles
Each Ionic component has up to three stylesheets used to style it. For example, the tabs component has a core stylesheet that consists of styles shared between all modes, a Material stylesheet which contains the styles for the md mode, and an iOS stylesheet for, you guessed it, the ios mode. Not all components are styled differently for each mode, so some of them will only have the core stylesheet, or the core stylesheet and one of the modes.
You can use the class that is applied to the body to override specific properties in mode components. For example, if you wanted to override all Material Design (md) mode buttons to have capitalized text:
.md button {
text-transform: capitalize;
}
The Sass files for these modes also have unique variables that can be used to override the styles. Using the same example above, we could change the md button’s border-radius by changing the value of the $button-md-border-radius variable. You can do this in your own custom Sass file or in our main Sass file, before Ionic is imported:
$button-md-border-radius: 8px;
// Ionic Sass
// ---------------------------------
@import "ionic";
Setting Attributes Dynamically
By setting an attribute dynamically, you can add or remove functionality from a component based on a certain condition. To set an attribute dynamically, use the following syntax:
<ion-list [attr.no-lines]="isMD ? '' : null">
This will set the no-lines attribute on the list component if isMD evaluates to true.