@@ -61,8 +61,7 @@ import IonicMode from '@site/static/usage/v8/config/mode/index.md';
61
61
62
62
## Reading the Config (Angular)
63
63
64
- ### Acccessing the Current Mode Programmatically
65
- In some cases, you may need to access the current Ionic mode programmatically within your application logic. This can be useful for applying conditional behavior, fetching specific assets, or performing other actions based on the active styling mode.
64
+ Ionic Angular provides a ` Config ` provider for accessing the Ionic Config.
66
65
67
66
### get
68
67
@@ -77,93 +76,38 @@ In some cases, you may need to access the current Ionic mode programmatically wi
77
76
groupId="framework"
78
77
defaultValue="angular"
79
78
values={[
80
- { value: 'javascript', label: 'JavaScript' },
81
79
{ value: 'angular', label: 'Angular' },
82
80
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
83
- { value: 'react', label: 'React' },
84
- { value: 'vue', label: 'Vue' },
85
81
] }
86
82
>
87
- <TabItem value="javascript">
88
- ```javascript
89
- const mode = Ionic.mode;
90
- console.log('Current Ionic Mode: ', mode); // e.g., 'ios' or 'md'
91
- ```
92
- </TabItem >
93
-
94
- <TabItem value =" angular " >
95
- ```ts
96
- import { Config } from '@ionic/angular';
97
-
98
- @Component(...)
99
- class AppComponent {
100
- constructor(config: Config) {
101
- const mode = config.get('mode');
102
- }
103
- }
104
- ```
105
- </TabItem >
106
-
107
- <TabItem value =" angular-standalone " >
108
- ```ts
109
- import { Config } from '@ionic/angular/standalone';
110
-
111
- @Component(...)
112
- class AppComponent {
113
- constructor(config: Config) {
114
- const mode = config.get('mode');
115
- }
116
- }
117
- ```
118
- </TabItem >
119
-
120
-
121
- <TabItem value =" react " >
122
- ```jsx
123
- import React from 'react';
124
- import { IonButton, IonContent, IonPage } from '@ionic/react';
125
- import { getMode } from '@ionic/core';
126
-
127
- function ModeDisplayExample() {
128
- const mode = getMode();
129
-
130
- return (
131
- <IonPage>
132
- <IonContent className="ion-padding">
133
- <p>The current Ionic mode is: <strong>{mode}</strong></p>
134
- <IonButton color={mode === 'ios' ? 'secondary' : 'tertiary'}>
135
- Mode-Dependent Button
136
- </IonButton>
137
- </IonContent>
138
- </IonPage>
139
- );
140
- }
141
-
142
- export default ModeDisplayExample;
143
- ```
144
- </TabItem >
145
-
146
- <TabItem value =" vue " >
147
- ```javascript
148
- <template>
149
- <ion-page>
150
- <ion-content class="ion-padding">
151
- <p>The current Ionic mode is: <strong>{{ mode }}</strong></p>
152
- <ion-button :color="mode === 'ios' ? 'secondary' : 'tertiary'">
153
- Mode-Dependent Button
154
- </ion-button>
155
- </ion-content>
156
- </ion-page>
157
- </template>
158
-
159
- <script setup lang="ts">
160
- import { IonButton, IonContent, IonPage } from '@ionic/vue';
161
- import { getMode } from '@ionic/core';
162
-
163
- const mode = getMode();
164
- </script>
165
- ```
166
- </TabItem >
83
+ <TabItem value="angular">
84
+
85
+ ``` ts
86
+ import { Config } from ' @ionic/angular' ;
87
+
88
+ @Component (... )
89
+ class AppComponent {
90
+ constructor (config : Config ) {
91
+ const mode = config .get (' mode' );
92
+ }
93
+ }
94
+ ```
95
+
96
+ </TabItem >
97
+ <TabItem value =" angular-standalone " >
98
+
99
+ ``` ts
100
+ import { Config } from ' @ionic/angular/standalone' ;
101
+
102
+ @Component (... )
103
+ class AppComponent {
104
+ constructor (config : Config ) {
105
+ const mode = config .get (' mode' );
106
+ }
107
+ }
108
+ ```
109
+
110
+ </TabItem >
167
111
</Tabs >
168
112
169
113
### getBoolean
@@ -179,24 +123,10 @@ In some cases, you may need to access the current Ionic mode programmatically wi
179
123
groupId="framework"
180
124
defaultValue="angular"
181
125
values={[
182
- { value: 'javascript', label: 'JavaScript' },
183
126
{ value: 'angular', label: 'Angular' },
184
127
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
185
- { value: 'react', label: 'React' },
186
- { value: 'vue', label: 'Vue' },
187
128
] }
188
129
>
189
-
190
- <TabItem value =" javascript " >
191
-
192
- ``` js
193
- import { config } from ' @ionic/core' ;
194
-
195
- const swipeBackEnabled = config .getBoolean (' swipeBackEnabled' );
196
-
197
- console .log (' Swipe back enabled:' , swipeBackEnabled);
198
- ```
199
- </TabItem >
200
130
<TabItem value="angular">
201
131
202
132
``` ts
@@ -224,55 +154,6 @@ class AppComponent {
224
154
}
225
155
```
226
156
227
- </TabItem >
228
- <TabItem value =" react " >
229
-
230
- ``` jsx
231
- import React from ' react' ;
232
- import { IonButton , IonContent , IonPage } from ' @ionic/react' ;
233
- import { config } from ' @ionic/core' ;
234
-
235
- function SwipeBackExample () {
236
- const swipeBackEnabled = config .getBoolean (' swipeBackEnabled' );
237
-
238
- return (
239
- < IonPage>
240
- < IonContent className= " ion-padding" >
241
- < p> Swipe back is < strong> {swipeBackEnabled ? ' enabled' : ' disabled' }< / strong> .< / p>
242
- < IonButton disabled= {! swipeBackEnabled}>
243
- Try Swipe Back
244
- < / IonButton>
245
- < / IonContent>
246
- < / IonPage>
247
- );
248
- }
249
-
250
- export default SwipeBackExample ;
251
- ```
252
-
253
- </TabItem >
254
- <TabItem value =" vue " >
255
-
256
- ``` javascript
257
- < template>
258
- < ion- page>
259
- < ion- content class = " ion-padding" >
260
- < p> Swipe back is < strong> {{ swipeBackEnabled ? ' enabled' : ' disabled' }}< / strong> .< / p>
261
- < ion- button : disabled= " !swipeBackEnabled" >
262
- Try Swipe Back
263
- < / ion- button>
264
- < / ion- content>
265
- < / ion- page>
266
- < / template>
267
-
268
- < script setup lang= " ts" >
269
- import { IonButton , IonContent , IonPage } from ' @ionic/vue' ;
270
- import { config } from ' @ionic/core' ;
271
-
272
- const swipeBackEnabled = config .getBoolean (' swipeBackEnabled' );
273
- < / script>
274
- ```
275
-
276
157
</TabItem >
277
158
</Tabs >
278
159
0 commit comments