Skip to content

Commit 2806083

Browse files
brandyscarneybrandyscarney
committed
docs(theming): update theming to include config defaults per mode
update the description to differentiate more between mode and platform. Closes #585
1 parent 5e23ea5 commit 2806083

File tree

1 file changed

+44
-32
lines changed
  • docs/v2/theming/platform-specific-styles

1 file changed

+44
-32
lines changed

‎docs/v2/theming/platform-specific-styles/index.md

Lines changed: 44 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,43 +16,55 @@ next_page_link: /docs/v2/theming/overriding-ionic-variables/
1616
</a>
1717

1818

19-
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:
19+
Ionic uses **modes** to customize the look of components. Each **platform** has a default **mode**, but this can be overridden. For example, an app being viewed on an Android platform will use the `md` (Material Design) mode. The `<body>` will have `class="md"` added to it by default and all of the components will use Material Design styles:
2020

2121
```html
2222
<body class="md">
2323
```
2424

25-
Here is a chart of the default mode that gets added based on platform:
26-
27-
<table class="table">
28-
<tr>
29-
<th>Platform</th>
30-
<th>Mode</th>
31-
<th>Description</th>
32-
</tr>
33-
<tr>
34-
<td>iOS</td>
35-
<td>ios</td>
36-
<td>Applies iOS styling to all components.</td>
37-
</tr>
38-
<tr>
39-
<td>Android</td>
40-
<td>md</td>
41-
<td>Applies Material Design styling to all components.</td>
42-
</tr>
43-
<tr>
44-
<td>Windows</td>
45-
<td>wp</td>
46-
<td>Applies Windows styling to all components.</td>
47-
</tr>
48-
<tr>
49-
<td>All Other Platforms</td>
50-
<td>md</td>
51-
<td>If you are not on one of the above devices, the app will get Material Design styling by default.</td>
52-
</tr>
53-
</table>
54-
55-
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.
25+
The following chart displays the default **mode** that is added to each **platform**:
26+
27+
| Platform | Mode | Details |
28+
|-----------------|------------|------------------------------------------------------------------------------------------------|
29+
| `ios` | `ios` | Viewing on an `iphone`, `ipad`, or `ipod` will use the iOS styles. |
30+
| `android` | `md` | Viewing on any android device will use the Material Design styles. |
31+
| `windows` | `wp` | Viewing on any windows device inside cordova or electron uses the Windows styles. |
32+
| `core` | `md` | Any platform that doesn't fit any of the above platforms will use the Material Design styles. |
33+
34+
35+
It is important to note that the **platform** and the **mode** are not the same thing. The platform can be set to use any mode in the [config](../../api/config/Config) of an app. See the following section for the default config values for each mode.
36+
37+
## Default Mode Configuration
38+
39+
Each mode has a default configuration. The [configuration properties](../../api/config/Config) can be changed per platform or for all platforms. The following chart displays the default configuration value for each configuration property. See the [Config API Docs](../../api/config/Config) for a description of each property and more information on overriding these values.
40+
41+
| Config Property | Default `ios` Value | Default `md` Value | Default `wp` Value |
42+
|-----------------------|----------------------------|-------------------------------|-------------------------------|
43+
| `activator` | `"highlight"` | `"ripple"` | `"highlight"` |
44+
| `actionSheetEnter` | `"action-sheet-slide-in"` | `"action-sheet-md-slide-in"` | `"action-sheet-wp-slide-in"` |
45+
| `actionSheetLeave` | `"action-sheet-slide-out"` | `"action-sheet-md-slide-out"` | `"action-sheet-wp-slide-out"` |
46+
| `alertEnter` | `"alert-pop-in"` | `"alert-md-pop-in"` | `"alert-wp-pop-in"` |
47+
| `alertLeave` | `"alert-pop-out"` | `"alert-md-pop-out"` | `"alert-wp-pop-out"` |
48+
| `backButtonText` | `"Back"` | `""` | `""` |
49+
| `backButtonIcon` | `"ios-arrow-back"` | `"md-arrow-back"` | `"ios-arrow-back"` |
50+
| `iconMode` | `"ios"` | `"md"` | `"ios"` |
51+
| `loadingEnter` | `"loading-pop-in"` | `"loading-md-pop-in"` | `"loading-wp-pop-in"` |
52+
| `loadingLeave` | `"loading-pop-out"` | `"loading-md-pop-out"` | `"loading-wp-pop-out"` |
53+
| `menuType` | `"reveal"` | `"overlay"` | `"overlay"` |
54+
| `modalEnter` | `"modal-slide-in"` | `"modal-md-slide-in"` | `"modal-md-slide-in"` |
55+
| `modalLeave` | `"modal-slide-out"` | `"modal-md-slide-out"` | `"modal-md-slide-out"` |
56+
| `pageTransition` | `"ios-transition"` | `"md-transition"` | `"wp-transition"` |
57+
| `pageTransitionDelay` | `16` | `96` | `96` |
58+
| `pickerEnter` | `"picker-slide-in"` | `"picker-slide-in"` | `"picker-slide-in"` |
59+
| `pickerLeave` | `"picker-slide-out"` | `"picker-slide-out"` | `"picker-slide-out"` |
60+
| `spinner` | `"ios"` | `"crescent"` | `"circles"` |
61+
| `tabbarHighlight` | `false` | `true` | `false` |
62+
| `tabbarLayout` | `"icon-top"` | `"icon-top"` | `"icon-top"` |
63+
| `tabbarPlacement` | `"bottom"` | `"top"` | `"top"` |
64+
| `tabSubPages` | `false` | `true` | `true` |
65+
| `toastEnter` | `"toast-slide-in"` | `"toast-md-slide-in"` | `"toast-wp-slide-in"` |
66+
| `toastLeave` | `"toast-slide-out"` | `"toast-md-slide-out"` | `"toast-wp-slide-out"` |
67+
5668

5769
## Overriding the Mode Styles
5870

0 commit comments

Comments
 (0)