Skip to content

docs(config): added ionic-mode docs to Reading the Config" #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 11, 2025
Merged

docs(config): added ionic-mode docs to Reading the Config" #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
179 changes: 149 additions & 30 deletions docs/developing/config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,9 +51,10 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo

<PerPlatformOverridesExample />

## Reading the Config (Angular)
## Reading the Config

Ionic Angular provides a `Config` provider for accessing the Ionic Config.
### Acccessing the Current Mode Programmatically
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.

### get

Expand All @@ -68,38 +69,93 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config.
groupId="framework"
defaultValue="angular"
values={[
{ value: 'javascript', label: 'JavaScript' },
{ value: 'angular', label: 'Angular' },
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
]}
>
<TabItem value="angular">

```ts
import { Config } from '@ionic/angular';

@Component(...)
class AppComponent {
constructor(config: Config) {
const mode = config.get('mode');
}
}
```

</TabItem>
<TabItem value="angular-standalone">

```ts
import { Config } from '@ionic/angular/standalone';

@Component(...)
class AppComponent {
constructor(config: Config) {
const mode = config.get('mode');
}
}
```

</TabItem>
<TabItem value="javascript">
```javascript
const mode = Ionic.mode;
console.log('Current Ionic Mode: ', mode); // e.g., 'ios' or 'md'
```
</TabItem>

<TabItem value="angular">
```ts
import { Config } from '@ionic/angular';

@Component(...)
class AppComponent {
constructor(config: Config) {
const mode = config.get('mode');
}
}
```
</TabItem>

<TabItem value="angular-standalone">
```ts
import { Config } from '@ionic/angular/standalone';

@Component(...)
class AppComponent {
constructor(config: Config) {
const mode = config.get('mode');
}
}
```
</TabItem>


<TabItem value="react">
```jsx
import React from 'react';
import { IonButton, IonContent, IonPage } from '@ionic/react';
import { getMode } from '@ionic/core';

function ModeDisplayExample() {
const mode = getMode();

return (
<IonPage>
<IonContent className="ion-padding">
<p>The current Ionic mode is: <strong>{mode}</strong></p>
<IonButton color={mode === 'ios' ? 'secondary' : 'tertiary'}>
Mode-Dependent Button
</IonButton>
</IonContent>
</IonPage>
);
}

export default ModeDisplayExample;
```
</TabItem>

<TabItem value="vue">
```javascript
<template>
<ion-page>
<ion-content class="ion-padding">
<p>The current Ionic mode is: <strong>{{ mode }}</strong></p>
<ion-button :color="mode === 'ios' ? 'secondary' : 'tertiary'">
Mode-Dependent Button
</ion-button>
</ion-content>
</ion-page>
</template>

<script setup lang="ts">
import { IonButton, IonContent, IonPage } from '@ionic/vue';
import { getMode } from '@ionic/core';

const mode = getMode();
</script>
```
</TabItem>
</Tabs>

### getBoolean
Expand All @@ -115,10 +171,24 @@ class AppComponent {
groupId="framework"
defaultValue="angular"
values={[
{ value: 'javascript', label: 'JavaScript' },
{ value: 'angular', label: 'Angular' },
{ value: 'angular-standalone', label: 'Angular (Standalone)' },
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
]}
>

<TabItem value="javascript">

```js
import { config } from '@ionic/core';

const swipeBackEnabled = config.getBoolean('swipeBackEnabled');

console.log('Swipe back enabled:', swipeBackEnabled);
```
</TabItem>
<TabItem value="angular">

```ts
Expand Down Expand Up @@ -146,6 +216,55 @@ class AppComponent {
}
```

</TabItem>
<TabItem value="react">

```jsx
import React from 'react';
import { IonButton, IonContent, IonPage } from '@ionic/react';
import { config } from '@ionic/core';

function SwipeBackExample() {
const swipeBackEnabled = config.getBoolean('swipeBackEnabled');

return (
<IonPage>
<IonContent className="ion-padding">
<p>Swipe back is <strong>{swipeBackEnabled ? 'enabled' : 'disabled'}</strong>.</p>
<IonButton disabled={!swipeBackEnabled}>
Try Swipe Back
</IonButton>
</IonContent>
</IonPage>
);
}

export default SwipeBackExample;
```

</TabItem>
<TabItem value="vue">

```javascript
<template>
<ion-page>
<ion-content class="ion-padding">
<p>Swipe back is <strong>{{ swipeBackEnabled ? 'enabled' : 'disabled' }}</strong>.</p>
<ion-button :disabled="!swipeBackEnabled">
Try Swipe Back
</ion-button>
</ion-content>
</ion-page>
</template>

<script setup lang="ts">
import { IonButton, IonContent, IonPage } from '@ionic/vue';
import { config } from '@ionic/core';

const swipeBackEnabled = config.getBoolean('swipeBackEnabled');
</script>
```

</TabItem>
</Tabs>

Expand Down