Skip to content

Commit 7b3b3b9

Browse files
committed
docs(config): fixed spell check
1 parent 67c3ac9 commit 7b3b3b9

File tree

1 file changed

+29
-148
lines changed

1 file changed

+29
-148
lines changed

docs/developing/config.md

Lines changed: 29 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,7 @@ import IonicMode from '@site/static/usage/v8/config/mode/index.md';
6161

6262
## Reading the Config (Angular)
6363

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.
6665

6766
### get
6867

@@ -77,93 +76,38 @@ In some cases, you may need to access the current Ionic mode programmatically wi
7776
groupId="framework"
7877
defaultValue="angular"
7978
values={[
80-
{ value: 'javascript', label: 'JavaScript' },
8179
{ value: 'angular', label: 'Angular' },
8280
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
83-
{ value: 'react', label: 'React' },
84-
{ value: 'vue', label: 'Vue' },
8581
]}
8682
>
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>
167111
</Tabs>
168112

169113
### getBoolean
@@ -179,24 +123,10 @@ In some cases, you may need to access the current Ionic mode programmatically wi
179123
groupId="framework"
180124
defaultValue="angular"
181125
values={[
182-
{ value: 'javascript', label: 'JavaScript' },
183126
{ value: 'angular', label: 'Angular' },
184127
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
185-
{ value: 'react', label: 'React' },
186-
{ value: 'vue', label: 'Vue' },
187128
]}
188129
>
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>
200130
<TabItem value="angular">
201131
202132
```ts
@@ -224,55 +154,6 @@ class AppComponent {
224154
}
225155
```
226156

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-
276157
</TabItem>
277158
</Tabs>
278159

0 commit comments

Comments
 (0)