Skip to content

Commit a116ade

Browse files
rdlabordlabo
committed
Merge branch 'main' of github.com:ionic-team/ionic-docs
# Conflicts: # cspell-wordlist.txt # docs/api/checkbox.md # docs/api/input.md # docs/api/radio.md # docs/api/range.md # docs/api/reorder-group.md # docs/api/reorder.md # docs/api/select.md # docs/api/textarea.md # docs/api/toggle.md # docs/components.md # docs/core-concepts/webview.md # docs/intro/vscode-extension.md # docs/layout/css-utilities.md # docs/updating/8-0.md # sidebars.js
2 parents 94f0506 + 2cce47b commit a116ade

File tree

259 files changed

+4057
-2476
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

259 files changed

+4057
-2476
lines changed

‎CONTRIBUTING.md

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,24 @@
22

33
Thanks for your interest in contributing to Ionic's documentation! :tada: Check the guidelines below for suggestions and requirements before submitting your contribution.
44

5-
- [Contributing Guide](#contributing-guide)
6-
- [Development Workflow](#development-workflow)
7-
- [Previewing Changes](#previewing-changes)
8-
- [Linting Documentation](#linting-documentation)
9-
- [Spell Check](#spell-check)
10-
- [Using VS Code on Windows](#using-vs-code-on-windows)
11-
- [Project Structure](#project-structure)
12-
- [Directories](#directories)
13-
- [Authoring Content](#authoring-content)
14-
- [Authoring Locally](#authoring-locally)
15-
- [Translation](#translation)
16-
- [Reporting Issues](#reporting-issues)
17-
- [Pull Request Guidelines](#pull-request-guidelines)
18-
- [Deploying](#deploying)
19-
- [License](#license)
5+
<sub>
6+
<b>TABLE OF CONTENTS</b>
7+
</sub>
8+
9+
- [Development Workflow](#development-workflow)
10+
- [Previewing Changes](#previewing-changes)
11+
- [Linting Documentation](#linting-documentation)
12+
- [Spell Check](#spell-check)
13+
- [Using VS Code on Windows](#using-vs-code-on-windows)
14+
- [Project Structure](#project-structure)
15+
- [Directories](#directories)
16+
- [Authoring Content](#authoring-content)
17+
- [Reference Content](#reference-content)
18+
- [Translation](#translation)
19+
- [Reporting Issues](#reporting-issues)
20+
- [Pull Request Guidelines](#pull-request-guidelines)
21+
- [Deploying](#deploying)
22+
- [License](#license)
2023

2124
---
2225

‎cspell-wordlist.txt

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,4 @@ mozallowfullscreen
8080
msallowfullscreen
8181
oallowfullscreen
8282
webkitallowfullscreen
83-
84-
ionicframework
85-
browserslistrc
83+
webnative

‎docs/angular/injection-tokens.md

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
---
2+
title: Angular Injection Tokens
3+
sidebar_label: Injection Tokens
4+
---
5+
6+
<head>
7+
<title>Angular Injection Tokens | Access Ionic Elements via Dependency Injection</title>
8+
<meta
9+
name="description"
10+
content="Learn how to use Ionic's Angular injection tokens to access Ionic elements through Angular's dependency injection system for more streamlined component interactions."
11+
/>
12+
</head>
13+
14+
Ionic provides Angular injection tokens that allow you to access Ionic elements through Angular's dependency injection system. This provides a more Angular-idiomatic way to interact with Ionic components programmatically.
15+
16+
## Benefits
17+
18+
Using injection tokens provides several advantages:
19+
20+
- **Type Safety**: Full TypeScript support with proper typing for the modal element
21+
- **Angular Integration**: Works seamlessly with Angular's dependency injection system
22+
- **Simplified Code**: Eliminates the need for `ViewChild` queries or manual element references
23+
- **Better Testing**: Easier to mock and test components that use injection tokens
24+
25+
## IonModalToken
26+
27+
The `IonModalToken` injection token allows you to inject a reference to the current modal element directly into your Angular components. This is particularly useful when you need to programmatically control modal behavior, listen to modal events, or access modal properties.
28+
29+
Starting in `@ionic/angular` v8.7.0, you can use this injection token to streamline modal interactions in your Angular applications.
30+
31+
### Basic Usage
32+
33+
To use the `IonModalToken`, inject it into your component's constructor:
34+
35+
```tsx
36+
import { Component, inject } from '@angular/core';
37+
import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
38+
39+
@Component({
40+
selector: 'app-modal',
41+
template: `
42+
<ion-header>
43+
<ion-toolbar>
44+
<ion-title>Modal Content</ion-title>
45+
</ion-toolbar>
46+
</ion-header>
47+
<ion-content>
48+
<p>This is modal content</p>
49+
<ion-button (click)="closeModal()">Close Modal</ion-button>
50+
</ion-content>
51+
`,
52+
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
53+
})
54+
export class ModalComponent {
55+
private modalToken = inject(IonModalToken);
56+
57+
closeModal() {
58+
this.modalToken.dismiss();
59+
}
60+
}
61+
```
62+
63+
### Listening to Modal Events
64+
65+
You can use the injected modal reference to listen to modal lifecycle events:
66+
67+
```tsx
68+
import { Component, inject, OnInit } from '@angular/core';
69+
import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
70+
71+
@Component({
72+
selector: 'app-modal',
73+
template: `
74+
<ion-header>
75+
<ion-toolbar>
76+
<ion-title>Modal with Events</ion-title>
77+
</ion-toolbar>
78+
</ion-header>
79+
<ion-content>
80+
<p>Check the console for modal events</p>
81+
<ion-button (click)="closeModal()">Close</ion-button>
82+
</ion-content>
83+
`,
84+
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
85+
})
86+
export class ModalComponent implements OnInit {
87+
private modalToken = inject(IonModalToken);
88+
89+
ngOnInit() {
90+
this.modalToken.addEventListener('ionModalWillDismiss', (event) => {
91+
console.log('Modal will dismiss:', event.detail);
92+
});
93+
94+
this.modalToken.addEventListener('ionModalDidDismiss', (event) => {
95+
console.log('Modal did dismiss:', event.detail);
96+
});
97+
}
98+
99+
closeModal() {
100+
this.modalToken.dismiss({ result: 'closed by button' });
101+
}
102+
}
103+
```
104+
105+
### Accessing Modal Properties
106+
107+
The injected modal reference provides access to all modal properties and methods:
108+
109+
```tsx
110+
import { Component, inject, OnInit } from '@angular/core';
111+
import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
112+
113+
@Component({
114+
selector: 'app-modal',
115+
template: `
116+
<ion-header>
117+
<ion-toolbar>
118+
<ion-title>Modal Properties</ion-title>
119+
</ion-toolbar>
120+
</ion-header>
121+
<ion-content>
122+
<p>Modal ID: {{ modalId }}</p>
123+
<ion-button (click)="toggleBackdropDismiss()"> Toggle Backdrop Dismiss: {{ backdropDismiss }} </ion-button>
124+
</ion-content>
125+
`,
126+
imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
127+
})
128+
export class ModalComponent implements OnInit {
129+
private modalToken = inject(IonModalToken);
130+
131+
modalId = '';
132+
backdropDismiss = true;
133+
134+
ngOnInit() {
135+
this.modalId = this.modalToken.id || 'No ID';
136+
this.backdropDismiss = this.modalToken.backdropDismiss;
137+
}
138+
139+
toggleBackdropDismiss() {
140+
this.backdropDismiss = !this.backdropDismiss;
141+
this.modalToken.backdropDismiss = this.backdropDismiss;
142+
}
143+
}
144+
```
145+
146+
### Opening a Modal with Injection Token Content
147+
148+
When opening a modal that uses the injection token, you can pass the component directly to the modal controller:
149+
150+
```tsx
151+
import { Component, inject } from '@angular/core';
152+
import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone';
153+
import { ModalComponent } from './modal.component';
154+
155+
@Component({
156+
selector: 'app-home',
157+
template: `
158+
<ion-content>
159+
<ion-button (click)="openModal()">Open Modal</ion-button>
160+
</ion-content>
161+
`,
162+
})
163+
export class HomePage {
164+
private modalController = inject(ModalController);
165+
166+
async openModal() {
167+
const myModal = await this.modalController.create({
168+
component: ModalComponent,
169+
componentProps: {
170+
// Any props you want to pass to the modal content
171+
},
172+
});
173+
174+
await myModal.present();
175+
}
176+
}
177+
```

‎docs/api/checkbox.md

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md';
6565
import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md';
6666

6767
<Indeterminate />
68-
68+
6969
## Links inside of Labels
7070

7171
Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
@@ -114,31 +114,7 @@ interface CheckboxCustomEvent<T = any> extends CustomEvent {
114114
}
115115
```
116116

117-
## レガシーなチェックボックス構文からのマイグレーション
118-
119-
Ionic 7.0では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
120-
121-
開発者は、この移行を一度に1つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
122-
123-
### 最新の構文の使い方
124-
125-
最新の構文を使用するには、`ion-label` を削除して、 `ion-checkbox` の中に直接ラベルを渡す必要があります。ラベルの配置は `ion-checkbox` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-checkbox` の `justify` プロパティを使用して制御することができます。
126-
127-
import Migration from '@site/static/usage/v8/checkbox/migration/index.md';
128-
129-
<Migration />
130-
131-
132-
:::note
133-
Ionic の過去のバージョンでは、`ion-checkbox` が正しく機能するために `ion-item` が必要でした。Ionic 7.0 からは、`ion-checkbox` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-checkbox`が正しく機能するためには、`ion-item`はもはや必須ではありません。
134-
:::
135-
136-
### レガシーな構文の使い方
137-
138-
Ionicは、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は `ion-checkbox` の `legacy` プロパティを `true` に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。
139-
140-
141-
## プロパティ
117+
## Properties
142118
<Props />
143119

144120
## イベント

‎docs/api/input.md

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -188,28 +188,6 @@ import CSSProps from '@site/static/usage/v8/input/theming/css-properties/index.m
188188

189189
<CSSProps />
190190

191-
## レガシーな Input 構文からの移行
192-
193-
Ionic 7.0では、よりシンプルなInput構文が導入されました。この新しい構文は、Inputのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
194-
195-
開発者は、この移行を一度に1つのInputで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
196-
197-
### 最新の構文の使い方
198-
199-
最新の構文を使うには、3つのステップがあります。
200-
201-
1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用します。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
202-
2. Input固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
203-
3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-input` の `helperText` と `errorText` プロパティを使用します。
204-
205-
import Migration from '@site/static/usage/v8/input/migration/index.md';
206-
207-
<Migration />
208-
209-
### レガシー構文の使用
210-
211-
Ionicは、アプリが最新のInput構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、そのInputのインスタンスにレガシー構文を使用するように強制できます。
212-
213191
## Interfaces
214192

215193
### InputChangeEventDetail

‎docs/api/radio.md

Lines changed: 1 addition & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -107,32 +107,7 @@ import CSSParts from '@site/static/usage/v8/radio/theming/css-shadow-parts/index
107107

108108
<CSSParts />
109109

110-
## Legacy Radio Syntaxからの移行
111-
112-
Ionic 7.0では、よりシンプルなラジオ構文が導入されました。この新しい構文は、ラジオを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
113-
114-
開発者は、この移行を一度に1つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
115-
116-
### 最新の構文の使い方
117-
118-
最新の構文を使用するには、`ion-label`を削除して、`ion-radio`の内部にラベルを直接渡します。ラベルの配置は `ion-radio` の `labelPlacement` プロパティを使用して設定することができます。ラベルとコントロールの行の詰め方は、`ion-radio` の `justify` プロパティを使用して制御することができます。
119-
120-
import Migration from '@site/static/usage/v8/radio/migration/index.md';
121-
122-
<Migration />
123-
124-
125-
:::note
126-
Ionic の過去のバージョンでは、`ion-radio` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-radio` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-radio`が正しく機能するためには、`ion-item`はもはや必須ではありません。
127-
:::
128-
129-
### レガシー構文の使用
130-
131-
Ionicは、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-radio` の `legacy` プロパティを `true` に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
132-
133-
134-
135-
## プロパティ
110+
## Properties
136111
<Props />
137112

138113
## イベント

‎docs/api/range.md

Lines changed: 0 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -128,32 +128,6 @@ import CSSParts from '@site/static/usage/v8/range/theming/css-shadow-parts/index
128128

129129
<CSSParts />
130130

131-
## レガシーな範囲構文からの移行
132-
133-
Ionic 7.0では、よりシンプルな範囲構文が導入されました。この新しい構文は、範囲を設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
134-
135-
開発者はこの移行を範囲ごとに実行できます。開発者は従来の構文を使い続けることもできますが、できるだけ早く移行することをお勧めします。
136-
137-
### 最新の構文の使い方
138-
139-
最新の構文を使用するには、`ion-label` を削除し、`label` プロパティを使用して `ion-range` にラベルを渡します。ラベルの配置は `labelPlacement` プロパティを使用して設定することができます。
140-
141-
ラベルにカスタム HTML が必要な場合は、代わりに `label` スロットを使用して `ion-range` 内に直接渡すことができる。
142-
143-
import Migration from '@site/static/usage/v8/range/migration/index.md';
144-
145-
<Migration />
146-
147-
148-
:::note
149-
Ionic の過去のバージョンでは、`ion-range` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 以降では、`ion-range` は `ion-item` 内でアイテムを `ion-list` に配置する場合にのみ使用します。また、`ion-range` が正しく機能するためには、`ion-item` は不要になりました。
150-
:::
151-
152-
### レガシー構文の使用
153-
154-
Ionicは、アプリが最新の範囲構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けた方が望ましいこともあります。開発者は `ion-range` の `legacy` プロパティを `true` に設定することで、そのインスタンスにレガシー構文を使用させることができます。
155-
156-
157131
## Interfaces
158132

159133
### RangeChangeEventDetail

0 commit comments

Comments
 (0)