You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/accordion.md
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
---
2
2
title: "ion-accordion"
3
3
---
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.mdx';
9
-
import Slots from '@ionic-internal/component-api/v8/accordion/slots.md';
4
+
import Props from '@ionic-internal/component-api/v9/accordion/props.md';
5
+
import Events from '@ionic-internal/component-api/v9/accordion/events.md';
6
+
import Methods from '@ionic-internal/component-api/v9/accordion/methods.md';
7
+
import Parts from '@ionic-internal/component-api/v9/accordion/parts.md';
8
+
import CustomProps from '@ionic-internal/component-api/v9/accordion/custom-props.mdx';
9
+
import Slots from '@ionic-internal/component-api/v9/accordion/slots.md';
10
10
11
11
<head>
12
12
<title>ion-accordion: Accordion Components: How to Build & Examples</title>
@@ -22,15 +22,15 @@ Accordions provide collapsible sections in your content to reduce vertical space
22
22
23
23
## Basic Usage
24
24
25
-
import Basic from '@site/static/usage/v8/accordion/basic/index.md';
25
+
import Basic from '@site/static/usage/v9/accordion/basic/index.md';
26
26
27
27
<Basic />
28
28
29
29
## Toggle Accordions
30
30
31
31
Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions.
32
32
33
-
import Toggle from '@site/static/usage/v8/accordion/toggle/index.md';
33
+
import Toggle from '@site/static/usage/v9/accordion/toggle/index.md';
34
34
35
35
<Toggle />
36
36
@@ -44,15 +44,15 @@ When using other components that emit `ionChange` inside of Accordion it is reco
44
44
45
45
Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
46
46
47
-
import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md';
47
+
import ListenChanges from '@site/static/usage/v9/accordion/listen-changes/index.md';
48
48
49
49
<ListenChanges />
50
50
51
51
## Multiple Accordions
52
52
53
53
Developers can allow multiple accordions to be open at once with the `multiple` property.
54
54
55
-
import Multiple from '@site/static/usage/v8/accordion/multiple/index.md';
55
+
import Multiple from '@site/static/usage/v9/accordion/multiple/index.md';
56
56
57
57
<Multiple />
58
58
@@ -62,15 +62,15 @@ import Multiple from '@site/static/usage/v8/accordion/multiple/index.md';
62
62
63
63
Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
64
64
65
-
import DisableIndividual from '@site/static/usage/v8/accordion/disable/individual/index.md';
65
+
import DisableIndividual from '@site/static/usage/v9/accordion/disable/individual/index.md';
66
66
67
67
<DisableIndividual />
68
68
69
69
### Accordion Group
70
70
71
71
The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
72
72
73
-
import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md';
73
+
import DisableGroup from '@site/static/usage/v9/accordion/disable/group/index.md';
74
74
75
75
<DisableGroup />
76
76
@@ -80,15 +80,15 @@ import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md
80
80
81
81
Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
82
82
83
-
import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individual/index.md';
83
+
import ReadonlyIndividual from '@site/static/usage/v9/accordion/readonly/individual/index.md';
84
84
85
85
<ReadonlyIndividual />
86
86
87
87
### Accordion Group
88
88
89
89
The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
90
90
91
-
import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index.md';
91
+
import ReadonlyGroup from '@site/static/usage/v9/accordion/readonly/group/index.md';
92
92
93
93
<ReadonlyGroup />
94
94
@@ -112,7 +112,7 @@ There are two built in expansion styles: `compact` and `inset`. This expansion s
112
112
113
113
When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened.
114
114
115
-
import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expansion-styles/index.md';
115
+
import ExpansionStyles from '@site/static/usage/v9/accordion/customization/expansion-styles/index.md';
import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md';
139
+
import AdvancedExpansionStyles from '@site/static/usage/v9/accordion/customization/advanced-expansion-styles/index.md';
140
140
141
141
<AdvancedExpansionStyles />
142
142
@@ -148,15 +148,15 @@ If you would like to manage the icon yourself or use an icon that is not an `ion
148
148
149
149
Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
150
150
151
-
import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md';
151
+
import Icons from '@site/static/usage/v9/accordion/customization/icons/index.md';
152
152
153
153
<Icons />
154
154
155
155
### Theming
156
156
157
157
Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot.
158
158
159
-
import Theming from '@site/static/usage/v8/accordion/customization/theming/index.md';
159
+
import Theming from '@site/static/usage/v9/accordion/customization/theming/index.md';
160
160
161
161
<Theming />
162
162
@@ -166,7 +166,7 @@ import Theming from '@site/static/usage/v8/accordion/customization/theming/index
166
166
167
167
By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app.
168
168
169
-
import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibility/animations/index.md';
169
+
import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibility/animations/index.md';
Copy file name to clipboardExpand all lines: docs/api/action-sheet.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,12 +4,12 @@ title: "ion-action-sheet"
4
4
import Tabs from '@theme/Tabs';
5
5
import TabItem from '@theme/TabItem';
6
6
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.mdx';
12
-
import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md';
7
+
import Props from '@ionic-internal/component-api/v9/action-sheet/props.md';
8
+
import Events from '@ionic-internal/component-api/v9/action-sheet/events.md';
9
+
import Methods from '@ionic-internal/component-api/v9/action-sheet/methods.md';
10
+
import Parts from '@ionic-internal/component-api/v9/action-sheet/parts.md';
11
+
import CustomProps from '@ionic-internal/component-api/v9/action-sheet/custom-props.mdx';
12
+
import Slots from '@ionic-internal/component-api/v9/action-sheet/slots.md';
13
13
14
14
<head>
15
15
<title>ion-action-sheet: Action Sheet Dialog for iOS and Android</title>
@@ -27,7 +27,7 @@ An Action Sheet is a dialog that displays a set of options. It appears on top of
27
27
28
28
`ion-action-sheet` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Action Sheet.
29
29
30
-
import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md';
30
+
import Trigger from '@site/static/usage/v9/action-sheet/inline/trigger/index.md';
31
31
32
32
<Trigger />
33
33
@@ -37,15 +37,15 @@ The `isOpen` property on `ion-action-sheet` allows developers to control the pre
37
37
38
38
`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
39
39
40
-
import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md';
40
+
import IsOpen from '@site/static/usage/v9/action-sheet/inline/isOpen/index.md';
41
41
42
42
<IsOpen />
43
43
44
44
## Controller Action Sheets
45
45
46
46
The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed.
47
47
48
-
import Controller from '@site/static/usage/v8/action-sheet/controller/index.md';
48
+
import Controller from '@site/static/usage/v9/action-sheet/controller/index.md';
49
49
50
50
<Controller />
51
51
@@ -59,7 +59,7 @@ A button can also be passed data via the `data` property on `ActionSheetButton`.
59
59
60
60
When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed.
61
61
62
-
import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/index.md';
62
+
import RoleInfo from '@site/static/usage/v9/action-sheet/role-info-on-dismiss/index.md';
63
63
64
64
<RoleInfo />
65
65
@@ -83,15 +83,15 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
83
83
}
84
84
```
85
85
86
-
import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md';
86
+
import Styling from '@site/static/usage/v9/action-sheet/theming/styling/index.md';
87
87
88
88
<Styling />
89
89
90
90
### CSS Custom Properties
91
91
92
92
Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements.
93
93
94
-
import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-properties/index.md';
94
+
import CssCustomProperties from '@site/static/usage/v9/action-sheet/theming/css-properties/index.md';
Copy file name to clipboardExpand all lines: docs/api/alert.md
+13-13Lines changed: 13 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -4,12 +4,12 @@ title: "ion-alert"
4
4
import Tabs from '@theme/Tabs';
5
5
import TabItem from '@theme/TabItem';
6
6
7
-
import Props from '@ionic-internal/component-api/v8/alert/props.md';
8
-
import Events from '@ionic-internal/component-api/v8/alert/events.md';
9
-
import Methods from '@ionic-internal/component-api/v8/alert/methods.md';
10
-
import Parts from '@ionic-internal/component-api/v8/alert/parts.md';
11
-
import CustomProps from '@ionic-internal/component-api/v8/alert/custom-props.mdx';
12
-
import Slots from '@ionic-internal/component-api/v8/alert/slots.md';
7
+
import Props from '@ionic-internal/component-api/v9/alert/props.md';
8
+
import Events from '@ionic-internal/component-api/v9/alert/events.md';
9
+
import Methods from '@ionic-internal/component-api/v9/alert/methods.md';
10
+
import Parts from '@ionic-internal/component-api/v9/alert/parts.md';
11
+
import CustomProps from '@ionic-internal/component-api/v9/alert/custom-props.mdx';
12
+
import Slots from '@ionic-internal/component-api/v9/alert/slots.md';
13
13
14
14
<head>
15
15
<title>ion-alert: Ionic Alert Buttons with Custom Message Prompts</title>
@@ -26,7 +26,7 @@ An Alert is a dialog that presents users with information or collects informatio
26
26
27
27
`ion-alert` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Alert.
28
28
29
-
import Trigger from '@site/static/usage/v8/alert/presenting/trigger/index.md';
29
+
import Trigger from '@site/static/usage/v9/alert/presenting/trigger/index.md';
30
30
31
31
<Trigger />
32
32
@@ -36,15 +36,15 @@ The `isOpen` property on `ion-alert` allows developers to control the presentati
36
36
37
37
`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
38
38
39
-
import IsOpen from '@site/static/usage/v8/alert/presenting/isOpen/index.md';
39
+
import IsOpen from '@site/static/usage/v9/alert/presenting/isOpen/index.md';
40
40
41
41
<IsOpen />
42
42
43
43
## Controller Alerts
44
44
45
45
The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed.
46
46
47
-
import Controller from '@site/static/usage/v8/alert/presenting/controller/index.md';
47
+
import Controller from '@site/static/usage/v9/alert/presenting/controller/index.md';
48
48
49
49
<Controller />
50
50
@@ -54,7 +54,7 @@ In the array of `buttons`, each button includes properties for its `text`, and o
54
54
55
55
Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
56
56
57
-
import Buttons from '@site/static/usage/v8/alert/buttons/index.md';
57
+
import Buttons from '@site/static/usage/v9/alert/buttons/index.md';
58
58
59
59
<Buttons />
60
60
@@ -65,13 +65,13 @@ Alerts can also include several different inputs whose data can be passed back t
65
65
66
66
### Text Inputs Example
67
67
68
-
import TextInputs from '@site/static/usage/v8/alert/inputs/text-inputs/index.md';
68
+
import TextInputs from '@site/static/usage/v9/alert/inputs/text-inputs/index.md';
69
69
70
70
<TextInputs />
71
71
72
72
### Radio Example
73
73
74
-
import Radios from '@site/static/usage/v8/alert/inputs/radios/index.md';
74
+
import Radios from '@site/static/usage/v9/alert/inputs/radios/index.md';
75
75
76
76
<Radios />
77
77
@@ -101,7 +101,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
101
101
}
102
102
```
103
103
104
-
import Customization from '@site/static/usage/v8/alert/customization/index.md';
104
+
import Customization from '@site/static/usage/v9/alert/customization/index.md';
Copy file name to clipboardExpand all lines: docs/api/app.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
---
2
2
title: "ion-app"
3
3
---
4
-
import Props from '@ionic-internal/component-api/v8/app/props.md';
5
-
import Events from '@ionic-internal/component-api/v8/app/events.md';
6
-
import Methods from '@ionic-internal/component-api/v8/app/methods.md';
7
-
import Parts from '@ionic-internal/component-api/v8/app/parts.md';
8
-
import CustomProps from '@ionic-internal/component-api/v8/app/custom-props.mdx';
9
-
import Slots from '@ionic-internal/component-api/v8/app/slots.md';
4
+
import Props from '@ionic-internal/component-api/v9/app/props.md';
5
+
import Events from '@ionic-internal/component-api/v9/app/events.md';
6
+
import Methods from '@ionic-internal/component-api/v9/app/methods.md';
7
+
import Parts from '@ionic-internal/component-api/v9/app/parts.md';
8
+
import CustomProps from '@ionic-internal/component-api/v9/app/custom-props.mdx';
9
+
import Slots from '@ionic-internal/component-api/v9/app/slots.md';
10
10
11
11
<head>
12
12
<title>ion-app: Container Element for an Ionic Application</title>
@@ -30,7 +30,7 @@ Using `ion-app` enables the following behaviors:
30
30
31
31
Ionic offers focus utilities for components with the `ion-focusable` class. These utilities automatically manage focus for components when certain keyboard keys, like <kbd>Tab</kbd>, are pressed. Components can also be programmatically focused in response to user actions using the `setFocus` method from `ion-app`.
32
32
33
-
import SetFocus from '@site/static/usage/v8/app/set-focus/index.md';
33
+
import SetFocus from '@site/static/usage/v9/app/set-focus/index.md';
0 commit comments