Skip to content

Commit 7f22554

Browse files
joesphchangjoesphchang
committed
docs(config): added the ionic mode to config docs v7
1 parent f3e8fb9 commit 7f22554

File tree

9 files changed

+273
-1
lines changed

9 files changed

+273
-1
lines changed

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
```html
2+
<ion-app>
3+
<ion-content>
4+
<div class="container">
5+
<ion-button
6+
[color]="modeValue === 'ios' ? 'secondary' : 'tertiary'"
7+
[fill]="modeValue === 'ios' ? 'outline' : 'solid'"
8+
(click)="showMode()"
9+
>
10+
{{ modeValue }}
11+
</ion-button>
12+
<div class="mode-value" *ngIf="modeValue">
13+
Current mode: {{ modeValue }}
14+
</div>
15+
</div>
16+
</ion-content>
17+
</ion-app>
18+
<style>
19+
.container {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
justify-content: center;
24+
}
25+
.mode-value {
26+
margin-top: 16px;
27+
font-weight: bold;
28+
}
29+
</style>
30+
```

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

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

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Ionic Config Mode</title>
8+
<link rel="stylesheet" href="../../common.css" />
9+
<script src="../../common.js"></script>
10+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
12+
<style>
13+
.mode-value {
14+
margin-top: 16px;
15+
font-weight: bold;
16+
}
17+
.container {
18+
display: flex;
19+
flex-direction: column;
20+
align-items: center;
21+
gap: 0;
22+
}
23+
</style>
24+
</head>
25+
26+
<body>
27+
<ion-app>
28+
<ion-content>
29+
<div class="container">
30+
<ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
31+
<div class="mode-value" id="modeValue"></div>
32+
</div>
33+
</ion-content>
34+
</ion-app>
35+
<script type="module">
36+
function getMode() {
37+
if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
38+
return window.Ionic.config.get('mode');
39+
} else {
40+
return document.documentElement.getAttribute('mode') || 'md';
41+
}
42+
}
43+
44+
function updateButton(mode) {
45+
const btn = document.getElementById('showModeBtn');
46+
btn.innerText = mode;
47+
btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
48+
btn.fill = mode === 'ios' ? 'outline' : 'solid';
49+
}
50+
51+
document.getElementById('showModeBtn').addEventListener('click', () => {
52+
const mode = getMode();
53+
document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
54+
updateButton(mode);
55+
});
56+
57+
// Optionally, set initial state on load
58+
document.addEventListener('DOMContentLoaded', () => {
59+
const mode = getMode();
60+
updateButton(mode);
61+
});
62+
</script>
63+
</body>
64+
65+
</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="8"
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/v8/config/mode/demo.html"
24+
/>

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
```html
2+
<div class="container">
3+
<ion-button id="showModeBtn" color="primary" fill="solid">Show Current Mode</ion-button>
4+
<div class="mode-value" id="modeValue"></div>
5+
</div>
6+
<script>
7+
function getMode() {
8+
if (window.Ionic && window.Ionic.config && window.Ionic.config.get) {
9+
return window.Ionic.config.get('mode');
10+
} else {
11+
return document.documentElement.getAttribute('mode') || 'md';
12+
}
13+
}
14+
15+
function updateButton(mode) {
16+
const btn = document.getElementById('showModeBtn');
17+
btn.innerText = mode;
18+
btn.color = mode === 'ios' ? 'secondary' : 'tertiary';
19+
btn.fill = mode === 'ios' ? 'outline' : 'solid';
20+
}
21+
22+
document.getElementById('showModeBtn').addEventListener('click', () => {
23+
const mode = getMode();
24+
document.getElementById('modeValue').textContent = `Current mode: ${mode}`;
25+
updateButton(mode);
26+
});
27+
28+
// Optionally, set initial state on load
29+
document.addEventListener('DOMContentLoaded', () => {
30+
const mode = getMode();
31+
updateButton(mode);
32+
});
33+
</script>
34+
<style>
35+
.container {
36+
display: flex;
37+
flex-direction: column;
38+
align-items: center;
39+
}
40+
.mode-value {
41+
margin-top: 16px;
42+
font-weight: bold;
43+
}
44+
</style>
45+
```

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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 [modeValue, setModeValue] = useState('');
8+
9+
useEffect(() => {
10+
setModeValue(getMode());
11+
}, []);
12+
13+
const showMode = () => {
14+
setModeValue(getMode());
15+
};
16+
17+
const color = modeValue === 'ios' ? 'secondary' : 'tertiary';
18+
const fill = modeValue === 'ios' ? 'outline' : 'solid';
19+
20+
return (
21+
<div className="container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
22+
<IonButton color={color} fill={fill} onClick={showMode}>
23+
{modeValue}
24+
</IonButton>
25+
<div className="mode-value" style={{ marginTop: 16, fontWeight: 'bold' }}>
26+
{modeValue && `Current mode: ${modeValue}`}
27+
</div>
28+
</div>
29+
);
30+
}
31+
export default Example;
32+
```

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
```html
2+
<template>
3+
<div class="container">
4+
<ion-button
5+
:color="color"
6+
:fill="fill"
7+
@click="showMode"
8+
>
9+
{{ modeValue }}
10+
</ion-button>
11+
<div class="mode-value" v-if="modeValue">
12+
Current mode: {{ modeValue }}
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script setup>
18+
import { ref, computed, onMounted } from 'vue';
19+
import { getMode } from '@ionic/core';
20+
21+
const modeValue = ref('');
22+
23+
function showMode() {
24+
modeValue.value = getMode();
25+
}
26+
27+
const color = computed(() => modeValue.value === 'ios' ? 'secondary' : 'tertiary');
28+
const fill = computed(() => modeValue.value === 'ios' ? 'outline' : 'solid');
29+
30+
onMounted(() => {
31+
modeValue.value = getMode();
32+
});
33+
</script>
34+
35+
<style scoped>
36+
.container {
37+
display: flex;
38+
flex-direction: column;
39+
align-items: center;
40+
}
41+
.mode-value {
42+
margin-top: 16px;
43+
font-weight: bold;
44+
}
45+
</style>
46+
```

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import angular_example_component_html from './angular/example_component_html.md'
88
import angular_example_component_ts from './angular/example_component_ts.md';
99

1010
<Playground
11-
version="8"
11+
version="7"
1212
code={{
1313
javascript,
1414
react,

‎versioned_docs/version-v7/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/v7/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.

0 commit comments

Comments
 (0)