Skip to content

Commit 4d24294

Browse files
authored
chore: sync with main
chore: sync with main
2 parents 886811f + b55b9a4 commit 4d24294

Some content is hidden

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

52 files changed

+497
-528
lines changed

docs/angular/your-first-app.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,12 @@ Next, create an Ionic Angular app that uses the “Tabs” starter template and
7777
ionic start photo-gallery tabs --type=angular --capacitor
7878
```
7979

80+
:::note
81+
82+
When prompted to choose between `NgModules` and `Standalone`, opt for `NgModules` as this tutorial follows the `NgModules` approach.
83+
84+
:::
85+
8086
This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
8187

8288
Next, change into the app folder:

docs/api/infinite-scroll.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import CustomContent from '@site/static/usage/v8/infinite-scroll/custom-infinite
4343

4444
## Usage with Virtual Scroll
4545

46-
Infinite scroll requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
46+
Infinite scroll requires a scroll container. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
4747

4848
```html
4949
<ion-content scroll-y="false">
@@ -56,6 +56,12 @@ Infinite scroll requires a scroll container to function. When using a virtual sc
5656
</ion-content>
5757
```
5858

59+
:::note
60+
61+
`virtual-scroll-element` refers to the scroll container responsible for scrolling the content. This may be a component provided directly by the virtual scroll solution you are using.
62+
63+
:::
64+
5965
## Accessibility
6066

6167
Developers should assign the `role="feed"` attribute to the scrollable list of items that are added to or removed from as the user scrolls.

docs/api/input.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,10 @@ import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md'
170170

171171
Setting the `color` property changes the color palette for each input. On `ios` mode, this property changes the caret color. On `md` mode, this property changes the caret color and the highlight/underline color.
172172

173+
:::note
174+
The `color` property does *not* change the text color of the input. For that, use the [`--color` CSS property](#css-custom-properties-1).
175+
:::
176+
173177
import Colors from '@site/static/usage/v8/input/theming/colors/index.md';
174178

175179
<Colors />

docs/api/toast.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,10 @@ While this is not a complete list, here are some guidelines to follow when using
208208

209209
* For toasts with long messages, consider adjusting the `duration` property to allow users enough time to read the content of the toast.
210210

211+
* If adding buttons to a toast, always provide alternative ways of completing the actions associated with each button. This ensures that even if the toast dismisses before a user can read it, they can still complete the actions shown in the toast.
212+
213+
* Avoid showing a toast with buttons from inside another overlay such as a [modal](./modal). Modals and other overlays implement [focus trapping](./modal#focus-trapping) that will prevent screen readers from moving focus to the toast to complete the actions. This may be confusing for users since the toast will still be announced by screen readers. This is true even if alternative ways of completing the actions associated with each button are implemented. Consider creating a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) within the focus-trapped modal instead of using a toast.
214+
211215
## Interfaces
212216

213217
### ToastButton

docs/core-concepts/cross-platform.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
disableHtmlPreviews: true
2+
title: Cross Platform
33
---
44

55
# Cross Platform

docs/developing/config.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@ Below are the config options that Ionic uses.
191191
| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". |
192192
| `refreshingIcon` | `string` | Overrides the default icon in all `<ion-refresh-content>` components. |
193193
| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `<ion-refresh-content>` components. |
194+
| `rippleEffect` | `boolean` | If `true`, Material Design ripple effects will be enabled across the app. |
194195
| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. |
195196
| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `<ion-spinner>` components. |
196197
| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. |

docs/layout/css-utilities.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
---
22
title: CSS Utilities
3-
initialTab: 'preview'
4-
inlineHtmlPreviews: true
53
---
64

75
<head>

docs/layout/global-stylesheets.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
---
22
title: Global Stylesheets
3-
initialTab: 'preview'
4-
inlineHtmlPreviews: true
53
---
64

75
<head>

docs/layout/structure.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
---
22
title: Structure
3-
initialTab: 'preview'
43
---
54

65
import DocsCard from '@components/global/DocsCard';

docs/react/quickstart.md

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ When creating your own pages, don't forget to have `IonPage` be the root compone
171171
Our current content is relatively simple but does not contain anything that could be used in a real app, so let's change that.
172172

173173
:::note
174-
For brevity, we're excluding repeating part of our component, like the function declaration or import statements for other components.
174+
For brevity, we're excluding repeating parts of our component, like the function declaration or import statements for other components.
175175
:::
176176

177177
```tsx
@@ -180,11 +180,10 @@ For brevity, we're excluding repeating part of our component, like the function
180180
<IonContent>
181181
<IonList>
182182
<IonItem>
183-
<IonCheckbox slot="start" />
184-
<IonLabel>
183+
<IonCheckbox labelPlacement="end" justify="start">
185184
<h1>Create Idea</h1>
186185
<IonNote>Run Idea by Brandy</IonNote>
187-
</IonLabel>
186+
</IonCheckbox>
188187
<IonBadge color="success" slot="end">
189188
5 Days
190189
</IonBadge>
@@ -198,20 +197,17 @@ Here in our `IonContent`, we're adding an `IonList` and a much more involved `Io
198197

199198
```tsx
200199
<IonItem>
201-
<IonCheckbox slot="start" />
202-
<IonLabel>
200+
<IonCheckbox labelPlacement="end" justify="start">
203201
<h1>Create Idea</h1>
204202
<IonNote>Run Idea by Brandy</IonNote>
205-
</IonLabel>
203+
</IonCheckbox>
206204
<IonBadge color="success" slot="end">
207205
5 Days
208206
</IonBadge>
209207
</IonItem>
210208
```
211209

212-
Item is important as it clearly shows the mix of React concepts and Web Component concepts. The first clear example of a React concept is self-closing tags for React Components in `IonCheckbox`. This is just a simpler way of writing components that do not contain any child content.
213-
214-
From the Web Components side, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonCheckbox` when it renders. This is not a React API, but a web standards API.
210+
Looking at our code, we have a special attribute called `slot`. This is key for letting the `IonItem` know where to place the `IonBadge` when it renders. This is not a React API, but a web standards API, and it is used in many Ionic Framework components. (For more information on slots, [see the MDN docs here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot).)
215211

216212
Let's look at another component from Ionic, FAB. Floating Action Buttons are a nice way to provide a main action that is elevated from the rest of an app. For this FAB, we'll need three components: a FAB, a FAB Button, and an Icon.
217213

0 commit comments

Comments
 (0)