Skip to content

Commit a796d68

Browse files
joesphchangjoesphchang
authored
docs(config): add playground examples of how to access the mode per framework (#4172)
1 parent 9f63609 commit a796d68

File tree

16 files changed

+301
-0
lines changed

16 files changed

+301
-0
lines changed

‎docs/developing/config.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,14 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo
5151

5252
<PerPlatformOverridesExample />
5353

54+
## Accessing the Mode
55+
56+
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.
57+
58+
import IonicMode from '@site/static/usage/v8/config/mode/index.md';
59+
60+
<IonicMode />
61+
5462
## Reading the Config (Angular)
5563

5664
Ionic Angular provides a `Config` provider for accessing the Ionic Config.

‎static/usage/v7/config/mode/angular/example_component_html.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-button [color]="mode === 'ios' ? 'secondary' : 'tertiary'" [fill]="mode === 'ios' ? 'outline' : 'solid'">
3+
Current mode: {{ mode }}
4+
</ion-button>
5+
```

‎static/usage/v7/config/mode/angular/example_component_ts.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { Config, IonButton } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: './example.component.html',
8+
imports: [IonButton],
9+
})
10+
export class ExampleComponent {
11+
mode: string;
12+
constructor(public config: Config) {
13+
this.mode = this.config.get('mode');
14+
}
15+
}
16+
```

‎static/usage/v7/config/mode/demo.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Ionic Config Mode</title>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
<style>
12+
.mode-value {
13+
margin-top: 16px;
14+
font-weight: bold;
15+
}
16+
.container {
17+
display: flex;
18+
flex-direction: column;
19+
align-items: center;
20+
gap: 0;
21+
}
22+
</style>
23+
</head>
24+
<body>
25+
<ion-app>
26+
<ion-content>
27+
<div class="container">
28+
<ion-button id="modeButton"></ion-button>
29+
</div>
30+
</ion-content>
31+
</ion-app>
32+
<script type="module">
33+
const modeButton = document.querySelector('#modeButton');
34+
const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
35+
36+
modeButton.innerHTML = `Current mode: ${mode}`;
37+
modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
38+
modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
39+
</script>
40+
</body>
41+
</html>

‎static/usage/v7/config/mode/index.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
version="7"
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
23+
src="usage/v7/config/mode/demo.html"
24+
/>

‎static/usage/v7/config/mode/javascript.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```html
2+
<ion-button id="modeButton"></ion-button>
3+
4+
<script>
5+
const modeButton = document.querySelector('#modeButton');
6+
const mode = window.Ionic.config.get('mode') || document.documentElement.getAttribute('mode') || 'md';
7+
8+
modeButton.innerHTML = `Current mode: ${mode}`;
9+
modeButton.setAttribute('color', mode === 'ios' ? 'secondary' : 'tertiary');
10+
modeButton.setAttribute('fill', mode === 'ios' ? 'outline' : 'solid');
11+
</script>
12+
```

‎static/usage/v7/config/mode/react.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
```tsx
2+
import React, { useState, useEffect } from 'react';
3+
import { IonButton } from '@ionic/react';
4+
import { getMode } from '@ionic/core';
5+
6+
function Example() {
7+
const [mode, setMode] = useState('');
8+
9+
useEffect(() => {
10+
const mode = getMode() || 'md';
11+
setMode(mode);
12+
}, []);
13+
14+
const color = mode === 'ios' ? 'secondary' : 'tertiary';
15+
const fill = mode === 'ios' ? 'outline' : 'solid';
16+
17+
return (
18+
<IonButton color={color} fill={fill}>
19+
Current mode: {mode}
20+
</IonButton>
21+
);
22+
}
23+
24+
export default Example;
25+
```

‎static/usage/v7/config/mode/vue.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
```html
2+
<template>
3+
<ion-button :color="color" :fill="fill"> Current mode: {{ mode }} </ion-button>
4+
</template>
5+
6+
<script setup>
7+
import { ref, computed, onMounted } from 'vue';
8+
import { IonButton } from '@ionic/vue';
9+
import { getMode } from '@ionic/core';
10+
11+
const mode = ref('');
12+
13+
const color = computed(() => (mode.value === 'ios' ? 'secondary' : 'tertiary'));
14+
const fill = computed(() => (mode.value === 'ios' ? 'outline' : 'solid'));
15+
16+
onMounted(() => {
17+
mode.value = getMode() || 'md';
18+
});
19+
</script>
20+
```

‎static/usage/v8/config/mode/angular/example_component_html.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
```html
2+
<ion-button [color]="mode === 'ios' ? 'secondary' : 'tertiary'" [fill]="mode === 'ios' ? 'outline' : 'solid'">
3+
Current mode: {{ mode }}
4+
</ion-button>
5+
```

‎static/usage/v8/config/mode/angular/example_component_ts.md

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { Config, IonButton } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: './example.component.html',
8+
imports: [IonButton],
9+
})
10+
export class ExampleComponent {
11+
mode: string;
12+
constructor(public config: Config) {
13+
this.mode = this.config.get('mode');
14+
}
15+
}
16+
```

0 commit comments

Comments
 (0)