Skip to content

Commit 0b1a89c

Browse files
sean-perkinssean-perkins
authored
Merge pull request #2665 from ionic-team/chore/sync-with-main
2 parents 95a7efc + 67e7643 commit 0b1a89c

File tree

167 files changed

+4498
-3308
lines changed

Some content is hidden

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

167 files changed

+4498
-3308
lines changed

Diff for: ‎docs/angular/config.md

+1
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@ Below are the config options that Ionic uses.
228228
| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". |
229229
| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". |
230230
| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. |
231+
| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `<ion-back-button>` components. |
231232
| `backButtonIcon` | `string` | Overrides the default icon in all `<ion-back-button>` components. |
232233
| `backButtonText` | `string` | Overrides the default text in all `<ion-back-button>` components. |
233234
| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. |

Diff for: ‎docs/api/accordion-group.md

+3-14
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
---
22
title: "ion-accordion-group"
3-
hide_table_of_contents: true
43
---
5-
import TOCInline from '@theme/TOCInline';
6-
74
import Props from '@site/static/auto-generated/accordion-group/props.md';
85
import Events from '@site/static/auto-generated/accordion-group/events.md';
96
import Methods from '@site/static/auto-generated/accordion-group/methods.md';
@@ -15,18 +12,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
1512

1613
<EncapsulationPill type="shadow" />
1714

18-
<h2 className="table-of-contents__title">Contents</h2>
19-
20-
<TOCInline
21-
toc={toc}
22-
maxHeadingLevel={2}
23-
/>
24-
25-
26-
2715
Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation.
2816

29-
For more information as well as usage, see the [Accordion Documentation](./accordion)
17+
See the [Accordion](./accordion) documentation for more information.
18+
3019

3120
## Interfaces
3221

@@ -67,4 +56,4 @@ interface AccordionGroupCustomEvent<T = any> extends CustomEvent {
6756
<CustomProps />
6857

6958
## Slots
70-
<Slots />
59+
<Slots />

Diff for: ‎docs/api/app.md

-13
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
---
22
title: "ion-app"
3-
hide_table_of_contents: true
43
---
5-
import TOCInline from '@theme/TOCInline';
6-
74
import Props from '@site/static/auto-generated/app/props.md';
85
import Events from '@site/static/auto-generated/app/events.md';
96
import Methods from '@site/static/auto-generated/app/methods.md';
@@ -19,16 +16,6 @@ import Slots from '@site/static/auto-generated/app/slots.md';
1916
import EncapsulationPill from '@components/page/api/EncapsulationPill';
2017

2118

22-
23-
<h2 className="table-of-contents__title">Contents</h2>
24-
25-
<TOCInline
26-
toc={toc}
27-
maxHeadingLevel={2}
28-
/>
29-
30-
31-
3219
App is a container element for an Ionic application. There should only be one `<ion-app>` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `<ion-app>` when they are presented.
3320

3421
Using `ion-app` enables the following behaviors:

Diff for: ‎docs/api/backdrop.md

+9-201
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
---
22
title: "ion-backdrop"
3-
hide_table_of_contents: true
4-
demoUrl: "/docs/demos/api/backdrop/index.html"
5-
demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/backdrop/index.html"
63
---
7-
import Tabs from '@theme/Tabs';
8-
import TabItem from '@theme/TabItem';
9-
import TOCInline from '@theme/TOCInline';
10-
114
import Props from '@site/static/auto-generated/backdrop/props.md';
125
import Events from '@site/static/auto-generated/backdrop/events.md';
136
import Methods from '@site/static/auto-generated/backdrop/methods.md';
@@ -19,210 +12,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
1912

2013
<EncapsulationPill type="shadow" />
2114

22-
<h2 className="table-of-contents__title">Contents</h2>
23-
24-
<TOCInline
25-
toc={toc}
26-
maxHeadingLevel={2}
27-
/>
28-
29-
30-
3115
Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component.
3216

17+
## Basic Usage
3318

19+
The backdrop is transparent by default. The backdrop will prevent clicking or tapping on the content behind it.
3420

21+
import Basic from '@site/static/usage/backdrop/basic/index.md';
3522

36-
## Usage
37-
38-
<Tabs groupId="framework" defaultValue="angular" values={[{ value: 'angular', label: 'Angular' }, { value: 'javascript', label: 'Javascript' }, { value: 'react', label: 'React' }, { value: 'stencil', label: 'Stencil' }, { value: 'vue', label: 'Vue' }]}>
39-
40-
<TabItem value="angular">
41-
42-
```html
43-
<!-- Default backdrop -->
44-
<ion-backdrop></ion-backdrop>
45-
46-
<!-- Backdrop that is not tappable -->
47-
<ion-backdrop tappable="false"></ion-backdrop>
48-
49-
<!-- Backdrop that is not visible -->
50-
<ion-backdrop visible="false"></ion-backdrop>
51-
52-
<!-- Backdrop with propagation -->
53-
<ion-backdrop stopPropagation="false"></ion-backdrop>
54-
55-
<!-- Backdrop that sets dynamic properties -->
56-
<ion-backdrop
57-
[tappable]="enableBackdropDismiss"
58-
[visible]="showBackdrop"
59-
[stopPropagation]="shouldPropagate">
60-
</ion-backdrop>
61-
```
62-
63-
```typescript
64-
import { Component } from '@angular/core';
65-
66-
@Component({
67-
selector: 'backdrop-example',
68-
templateUrl: 'backdrop-example.html',
69-
styleUrls: ['./backdrop-example.css'],
70-
})
71-
export class BackdropExample {
72-
enableBackdropDismiss = false;
73-
showBackdrop = false;
74-
shouldPropagate = false;
75-
}
76-
```
77-
78-
79-
</TabItem>
80-
81-
82-
<TabItem value="javascript">
83-
84-
```html
85-
<!-- Default backdrop -->
86-
<ion-backdrop></ion-backdrop>
87-
88-
<!-- Backdrop that is not tappable -->
89-
<ion-backdrop tappable="false"></ion-backdrop>
90-
91-
<!-- Backdrop that is not visible -->
92-
<ion-backdrop visible="false"></ion-backdrop>
93-
94-
<!-- Backdrop with propagation -->
95-
<ion-backdrop stop-propagation="false"></ion-backdrop>
96-
97-
<!-- Backdrop that sets dynamic properties -->
98-
<ion-backdrop id="customBackdrop"></ion-backdrop>
99-
```
100-
101-
```javascript
102-
var backdrop = document.getElementById('customBackdrop');
103-
backdrop.visible = false;
104-
backdrop.tappable = false;
105-
backdrop.stopPropagation = false;
106-
```
107-
108-
</TabItem>
109-
110-
111-
<TabItem value="react">
112-
113-
```tsx
114-
import React from 'react';
115-
import { IonBackdrop, IonContent } from '@ionic/react';
116-
117-
export const BackdropExample: React.FC = () => (
118-
<IonContent>
119-
{/*-- Default backdrop --*/}
120-
<IonBackdrop />
121-
122-
{/*-- Backdrop that is not tappable --*/}
123-
<IonBackdrop tappable={false} />
124-
125-
{/*-- Backdrop that is not visible --*/}
126-
<IonBackdrop visible={false} />
127-
128-
{/*-- Backdrop with propagation --*/}
129-
<IonBackdrop stopPropagation={false} />
130-
131-
<IonBackdrop tappable={true} visible={true} stopPropagation={true} />
132-
</IonContent>
133-
);
134-
```
135-
136-
137-
</TabItem>
138-
139-
140-
<TabItem value="stencil">
141-
142-
```tsx
143-
import { Component, h } from '@stencil/core';
144-
145-
@Component({
146-
tag: 'backdrop-example',
147-
styleUrl: 'backdrop-example.css'
148-
})
149-
export class BackdropExample {
150-
render() {
151-
const enableBackdropDismiss = false;
152-
const showBackdrop = false;
153-
const shouldPropagate = false;
154-
155-
return [
156-
// Default backdrop
157-
<ion-backdrop></ion-backdrop>,
158-
159-
// Backdrop that is not tappable
160-
<ion-backdrop tappable={false}></ion-backdrop>,
161-
162-
// Backdrop that is not visible
163-
<ion-backdrop visible={false}></ion-backdrop>,
164-
165-
// Backdrop with propagation
166-
<ion-backdrop stopPropagation={false}></ion-backdrop>,
167-
168-
// Backdrop that sets dynamic properties
169-
<ion-backdrop
170-
tappable={enableBackdropDismiss}
171-
visible={showBackdrop}
172-
stopPropagation={shouldPropagate}>
173-
</ion-backdrop>
174-
];
175-
}
176-
}
177-
```
178-
179-
</TabItem>
180-
181-
182-
<TabItem value="vue">
183-
184-
```html
185-
<template>
186-
<!-- Default backdrop -->
187-
<ion-backdrop></ion-backdrop>
188-
189-
<!-- Backdrop that is not tappable -->
190-
<ion-backdrop tappable="false"></ion-backdrop>
191-
192-
<!-- Backdrop that is not visible -->
193-
<ion-backdrop visible="false"></ion-backdrop>
194-
195-
<!-- Backdrop with propagation -->
196-
<ion-backdrop stop-propagation="false"></ion-backdrop>
23+
<Basic />
19724

198-
<!-- Backdrop that sets dynamic properties -->
199-
<ion-backdrop
200-
:tappable="enableBackdropDismiss"
201-
:visible="showBackdrop"
202-
:stop-propagation="shouldPropagate">
203-
</ion-backdrop>
204-
</template>
25+
## Styling
20526

206-
<script>
207-
import { IonBackdrop } from '@ionic/vue';
208-
import { defineComponent } from 'vue';
27+
The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include `background-color`, `background` and `opacity`.
20928

210-
export default defineComponent({
211-
components: { IonBackdrop },
212-
setup() {
213-
return {
214-
enableBackdropDismiss: true,
215-
showBackdrop: true,
216-
shouldPropagate: true
217-
}
218-
}
219-
});
220-
</script>
221-
```
29+
Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`).
22230

223-
</TabItem>
31+
import Styling from '@site/static/usage/backdrop/styling/index.md';
22432

225-
</Tabs>
33+
<Styling />
22634

22735
## Properties
22836
<Props />

Diff for: ‎docs/api/breadcrumb.md

+2-13
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
---
22
title: "ion-breadcrumb"
3-
hide_table_of_contents: true
43
---
5-
import TOCInline from '@theme/TOCInline';
6-
74
import Props from '@site/static/auto-generated/breadcrumb/props.md';
85
import Events from '@site/static/auto-generated/breadcrumb/events.md';
96
import Methods from '@site/static/auto-generated/breadcrumb/methods.md';
@@ -15,18 +12,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
1512

1613
<EncapsulationPill type="shadow" />
1714

18-
<h2 className="table-of-contents__title">Contents</h2>
19-
20-
<TOCInline
21-
toc={toc}
22-
maxHeadingLevel={2}
23-
/>
24-
25-
2615

2716
A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon.
2817

29-
For usage examples, see the [Breadcrumbs](/docs/api/breadcrumbs) documentation.
18+
See the [Breadcrumbs](./breadcrumbs) documentation for more information.
3019

3120
## Interfaces
3221

@@ -68,4 +57,4 @@ interface BreadcrumbCustomEvent extends CustomEvent {
6857
<CustomProps />
6958

7059
## Slots
71-
<Slots />
60+
<Slots />

0 commit comments

Comments
 (0)