Skip to content

Commit d5a2eff

Browse files
rdlabordlabo
committed
Merge branch 'main' of github.com:ionic-team/ionic-docs
# Conflicts: # docs/api/accordion.md # docs/api/datetime-button.md # docs/api/datetime.md # docs/api/infinite-scroll.md # docs/api/modal.md # docs/api/picker.md # docs/api/title.md # docs/layout/css-utilities.md # docs/layout/global-stylesheets.md # docs/layout/structure.md # docs/theming/advanced.md # docs/theming/colors.md # docs/theming/css-variables.md # docs/theming/dark-mode.md # docs/theming/themes.md # docs/updating/6-0.md
2 parents b27a1ee + f8b9bea commit d5a2eff

File tree

3,983 files changed

+137078
-4732
lines changed

Some content is hidden

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

3,983 files changed

+137078
-4732
lines changed

‎.github/CODEOWNERS

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,3 @@
1212
# This should make it easy to add new rules without breaking existing ones.
1313

1414
* @ionic-team/framework
15-
16-
/_templates/ @mapsandapps

‎_templates/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Once you've generated your playground, you need to add it to the main markdown f
2626
```
2727
## Feature
2828
29-
import Feature from '@site/static/usage/v7/button/feature/index.md';
29+
import Feature from '@site/static/usage/v8/button/feature/index.md';
3030
3131
<Feature />
3232
```

‎_templates/playground/new/demo.html.ejs.t

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ to: "<%= `static/usage/v${version}/${name}/${path}/demo.html` %>"
88
<meta charset="UTF-8" />
99
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1010
<title><%= h.changeCase.titleCase(name) %></title>
11-
<link rel="stylesheet" href="<%= directoryChanges %>../../../common.css" />
12-
<script src="<%= directoryChanges %>../../../common.js"></script>
11+
<link rel="stylesheet" href="<%= directoryChanges %>../../common.css" />
12+
<script src="<%= directoryChanges %>../../common.js"></script>
1313
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/dist/ionic/ionic.esm.js"></script>
1414
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@<%= version %>/css/ionic.bundle.css" /><% if (css){ %>
1515

‎_templates/playground/new/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ module.exports = {
5454
type: 'select',
5555
name: 'version',
5656
message: 'Select the Ionic Framework version for the playground',
57-
initial: '7',
58-
choices: ['6', '7'],
57+
initial: '8',
58+
choices: ['6', '7', '8'],
5959
},
6060
{
6161
type: 'toggle',
@@ -77,7 +77,7 @@ module.exports = {
7777

7878
const playgroundName = changeCase.pascal(answers.path.split('/').pop());
7979
console.log(
80-
`\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v7/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
80+
`\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n`
8181
);
8282

8383
return answers;

‎cspell-wordlist.txt

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ Swiper
1212
Udemy
1313
Vetur
1414
Wistia
15+
WCAG
1516

1617
actionsheet
1718
fabs

‎docs/angular/slides.md

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ The `ion-slides` component had additional styling that helped create a native lo
102102
```css
103103
swiper-container {
104104
--swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
105-
--swiper-pagination-color: var(--ion-color-primary, #3880ff);
105+
--swiper-pagination-color: var(--ion-color-primary, #0054e9);
106106
--swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
107107
--swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
108108
--swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
@@ -244,10 +244,10 @@ Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
244244
</ion-slides>
245245
```
246246

247-
To migrate, we would change the name of the event to `slidechange`:
247+
To migrate, we would change the name of the event to `swiperslidechange`:
248248

249249
```html
250-
<swiper-container (slidechange)="onSlideChange()">
250+
<swiper-container (swiperslidechange)="onSlideChange()">
251251
<swiper-slide>Slide 1</swiper-slide>
252252
<swiper-slide>Slide 2</swiper-slide>
253253
<swiper-slide>Slide 3</swiper-slide>
@@ -256,27 +256,27 @@ To migrate, we would change the name of the event to `slidechange`:
256256

257257
Below is a full list of event name changes when going from `ion-slides` to Swiper Angular:
258258

259-
| ion-slides Event | Swiper Event |
260-
| ------------------------- | ---------------------------- |
261-
| `ionSlideWillChange` | `slidechangetransitionstart` |
262-
| `ionSlideDidChange` | `slidechangetransitionend` |
263-
| `ionSlideDoubleTap` | `doubletap` |
264-
| `ionSlideDrag` | `slidermove` |
265-
| `ionSlideNextStart` | `slidenexttransitionstart` |
266-
| `ionSlideNextEnd` | `slidenexttransitionend` |
267-
| `ionSlidePrevStart` | `slideprevtransitionstart` |
268-
| `ionSlidePrevEnd` | `slideprevtransitionend` |
269-
| `ionSlideReachStart` | `reachbeginning` |
270-
| `ionSlideReachEnd` | `reachend` |
271-
| `ionSlideTap` | `tap` |
272-
| `ionSlideTouchStart` | `touchstart` |
273-
| `ionSlideTouchEnd` | `touchend` |
274-
| `ionSlideTransitionStart` | `transitionstart` |
275-
| `ionSlideTransitionEnd` | `transitionend` |
276-
| `ionSlidesDidLoad` | `init` |
259+
| ion-slides Event | Swiper Event |
260+
| ------------------------- | ---------------------------------- |
261+
| `ionSlideWillChange` | `swiperslidechangetransitionstart` |
262+
| `ionSlideDidChange` | `swiperslidechange` |
263+
| `ionSlideDoubleTap` | `swiperdoubletap` |
264+
| `ionSlideDrag` | `swiperslidermove` |
265+
| `ionSlideNextStart` | `swiperslidenexttransitionstart` |
266+
| `ionSlideNextEnd` | `swiperslidenexttransitionend` |
267+
| `ionSlidePrevStart` | `swiperslideprevtransitionstart` |
268+
| `ionSlidePrevEnd` | `swiperslideprevtransitionend` |
269+
| `ionSlideReachStart` | `swiperreachbeginning` |
270+
| `ionSlideReachEnd` | `swiperreachend` |
271+
| `ionSlideTap` | `swipertap` |
272+
| `ionSlideTouchStart` | `swipertouchstart` |
273+
| `ionSlideTouchEnd` | `swipertouchend` |
274+
| `ionSlideTransitionStart` | `swipertransitionstart` |
275+
| `ionSlideTransitionEnd` | `swipertransitionend` |
276+
| `ionSlidesDidLoad` | `swiperinit` |
277277

278278
:::note
279-
All events available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
279+
All events available in Swiper Element can be found at <a href="https://swiperjs.com/swiper-api#events" target="_blank" rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a> and should be lowercased and prefixed with the word `swiper`.
280280
:::
281281

282282
## Methods

‎docs/api/accordion-group.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
22
title: "ion-accordion-group"
33
---
4-
import Props from '@ionic-internal/component-api/v7/accordion-group/props.md';
5-
import Events from '@ionic-internal/component-api/v7/accordion-group/events.md';
6-
import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md';
7-
import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md';
8-
import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md';
9-
import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md';
4+
import Props from '@ionic-internal/component-api/v8/accordion-group/props.md';
5+
import Events from '@ionic-internal/component-api/v8/accordion-group/events.md';
6+
import Methods from '@ionic-internal/component-api/v8/accordion-group/methods.md';
7+
import Parts from '@ionic-internal/component-api/v8/accordion-group/parts.md';
8+
import CustomProps from '@ionic-internal/component-api/v8/accordion-group/custom-props.md';
9+
import Slots from '@ionic-internal/component-api/v8/accordion-group/slots.md';
1010

1111
import EncapsulationPill from '@components/page/api/EncapsulationPill';
1212

‎docs/api/accordion.md

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
22
title: "ion-accordion"
33
---
4-
import Props from '@ionic-internal/component-api/v7/accordion/props.md';
5-
import Events from '@ionic-internal/component-api/v7/accordion/events.md';
6-
import Methods from '@ionic-internal/component-api/v7/accordion/methods.md';
7-
import Parts from '@ionic-internal/component-api/v7/accordion/parts.md';
8-
import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md';
9-
import Slots from '@ionic-internal/component-api/v7/accordion/slots.md';
4+
import Props from '@ionic-internal/component-api/v8/accordion/props.md';
5+
import Events from '@ionic-internal/component-api/v8/accordion/events.md';
6+
import Methods from '@ionic-internal/component-api/v8/accordion/methods.md';
7+
import Parts from '@ionic-internal/component-api/v8/accordion/parts.md';
8+
import CustomProps from '@ionic-internal/component-api/v8/accordion/custom-props.md';
9+
import Slots from '@ionic-internal/component-api/v8/accordion/slots.md';
1010

1111
<head>
1212
<title>ion-accordion: Accordion Components: How to Build & Examples</title>
@@ -22,31 +22,36 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
2222

2323
## 基本的な使い方
2424

25-
import Basic from '@site/static/usage/v7/accordion/basic/index.md';
25+
import Basic from '@site/static/usage/v8/accordion/basic/index.md';
2626

2727
<Basic />
2828

2929
## アコーディオンをトグルする方法
3030

3131
どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。
3232

33-
import Toggle from '@site/static/usage/v7/accordion/toggle/index.md';
33+
import Toggle from '@site/static/usage/v8/accordion/toggle/index.md';
3434

3535
<Toggle />
3636

3737
## アコーディオンの状態変化を監視
3838

39+
:::caution
40+
[Input](./input) や [Textarea](./textarea) などの他のコンポーネントが発する `ionChange` イベントのほとんどはバブルします。その結果、アコーディオンの中で関連コンポーネントが使用されている場合、これらのイベントはバブルアップし、アコーディオングループの `ionChange` リスナーを発火させます。
41+
アコーディオンの内部で `ionChange` を発する他のコンポーネントを使用する場合は、アコーディオングループの `ionChange` コールバックに、コールバックに渡されたイベントの `target` キーをチェックさせ、`ionChange` がアコーディオングループからのものであり、子孫からのものでないことを確認することをお勧めします。
42+
:::
43+
3944
開発者は `ionChange` イベントを監視することで、アコーディオンが展開または折りたたまれたときに通知されるようにすることができます。
4045

41-
import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md';
46+
import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md';
4247

4348
<ListenChanges />
4449

4550
## 複数のアコーディオン
4651

4752
開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。
4853

49-
import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
54+
import Multiple from '@site/static/usage/v8/accordion/multiple/index.md';
5055

5156
<Multiple />
5257

@@ -56,15 +61,15 @@ import Multiple from '@site/static/usage/v7/accordion/multiple/index.md';
5661

5762
個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。
5863

59-
import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md';
64+
import DisableIndividual from '@site/static/usage/v8/accordion/disable/individual/index.md';
6065

6166
<DisableIndividual />
6267

6368
### アコーディオングループ
6469

6570
アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。
6671

67-
import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md';
72+
import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md';
6873

6974
<DisableGroup />
7075

@@ -74,15 +79,15 @@ import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md
7479

7580
個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。
7681

77-
import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md';
82+
import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individual/index.md';
7883

7984
<ReadonlyIndividual />
8085

8186
### アコーディオングループ
8287

8388
アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。
8489

85-
import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md';
90+
import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index.md';
8691

8792
<ReadonlyGroup />
8893

@@ -106,7 +111,7 @@ import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.
106111

107112
`expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。
108113

109-
import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md';
114+
import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expansion-styles/index.md';
110115

111116
<ExpansionStyles />
112117

@@ -130,7 +135,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
130135
}
131136
```
132137

133-
import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md';
138+
import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md';
134139

135140
<AdvancedExpansionStyles />
136141

@@ -142,15 +147,15 @@ import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customizati
142147

143148
どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。
144149

145-
import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md';
150+
import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md';
146151

147152
<Icons />
148153

149154
### テーマ
150155

151156
`ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。
152157

153-
import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md';
158+
import Theming from '@site/static/usage/v8/accordion/customization/theming/index.md';
154159

155160
<Theming />
156161

@@ -160,7 +165,7 @@ import Theming from '@site/static/usage/v7/accordion/customization/theming/index
160165

161166
デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。
162167

163-
import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md';
168+
import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibility/animations/index.md';
164169

165170
<AccessibilityAnimations />
166171

‎docs/api/action-sheet.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ title: "ion-action-sheet"
44
import Tabs from '@theme/Tabs';
55
import TabItem from '@theme/TabItem';
66

7-
import Props from '@ionic-internal/component-api/v7/action-sheet/props.md';
8-
import Events from '@ionic-internal/component-api/v7/action-sheet/events.md';
9-
import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md';
10-
import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md';
11-
import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md';
12-
import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md';
7+
import Props from '@ionic-internal/component-api/v8/action-sheet/props.md';
8+
import Events from '@ionic-internal/component-api/v8/action-sheet/events.md';
9+
import Methods from '@ionic-internal/component-api/v8/action-sheet/methods.md';
10+
import Parts from '@ionic-internal/component-api/v8/action-sheet/parts.md';
11+
import CustomProps from '@ionic-internal/component-api/v8/action-sheet/custom-props.md';
12+
import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md';
1313

1414
<head>
1515
<title>ion-action-sheet: Action Sheet Dialog for iOS and Android</title>
@@ -27,7 +27,7 @@ Action Sheetは複数の選択肢を表示するダイアログです。アプ
2727

2828
`ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
2929

30-
import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md';
30+
import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md';
3131

3232
<Trigger />
3333

@@ -37,15 +37,15 @@ import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md'
3737

3838
`isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
3939

40-
import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md';
40+
import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md';
4141

4242
<IsOpen />
4343

4444
## Controller アクションシート
4545

4646
アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。
4747

48-
import Controller from '@site/static/usage/v7/action-sheet/controller/index.md';
48+
import Controller from '@site/static/usage/v8/action-sheet/controller/index.md';
4949

5050
<Controller />
5151

@@ -59,7 +59,7 @@ Buttonは `ActionSheetButton` の `data` プロパティを介してデータを
5959

6060
`didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。
6161

62-
import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md';
62+
import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/index.md';
6363

6464
<RoleInfo />
6565

@@ -83,15 +83,15 @@ import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/in
8383
}
8484
```
8585

86-
import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md';
86+
import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md';
8787

8888
<Styling />
8989

9090
## CSSカスタムプロパティ
9191

9292
[CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
9393

94-
import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md';
94+
import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-properties/index.md';
9595

9696
<CssCustomProperties />
9797

0 commit comments

Comments
 (0)