Skip to content

Commit fe87ab0

Browse files
liamdebeasiliamdebeasi
authored
chore: publish ionic 8 beta docs
chore: publish ionic 8 beta docs
2 parents e9c3e62 + 14a8bfa commit fe87ab0

File tree

3,893 files changed

+133463
-2748
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,893 files changed

+133463
-2748
lines changed

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

+2-2
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

‎cspell-wordlist.txt

+1
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

+1-1
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);

‎docs/api/accordion-group.md

+6-6
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

+19-19
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,31 @@ Accordions provide collapsible sections in your content to reduce vertical space
2222

2323
## Basic Usage
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
## Toggle Accordions
3030

3131
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.
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
## Listen for Accordion State Changes
3838

3939
Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
4040

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

4343
<ListenChanges />
4444

4545
## Multiple Accordions
4646

4747
Developers can allow multiple accordions to be open at once with the `multiple` property.
4848

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

5151
<Multiple />
5252

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

5757
Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
5858

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

6161
<DisableIndividual />
6262

6363
### Accordion Group
6464

6565
The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
6666

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

6969
<DisableGroup />
7070

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

7575
Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
7676

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

7979
<ReadonlyIndividual />
8080

8181
### Accordion Group
8282

8383
The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
8484

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

8787
<ReadonlyGroup />
8888

@@ -106,7 +106,7 @@ There are two built in expansion styles: `compact` and `inset`. This expansion s
106106

107107
When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened.
108108

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

111111
<ExpansionStyles />
112112

@@ -130,7 +130,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
130130
}
131131
```
132132

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

135135
<AdvancedExpansionStyles />
136136

@@ -142,15 +142,15 @@ If you would like to manage the icon yourself or use an icon that is not an `ion
142142

143143
Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
144144

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

147147
<Icons />
148148

149149
### Theming
150150

151151
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.
152152

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

155155
<Theming />
156156

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

161161
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.
162162

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

165165
<AccessibilityAnimations />
166166

‎docs/api/action-sheet.md

+12-12
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 @@ An Action Sheet is a dialog that displays a set of options. It appears on top of
2727

2828
`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.
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 @@ The `isOpen` property on `ion-action-sheet` allows developers to control the pre
3737

3838
`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.
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 Action Sheets
4545

4646
The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed.
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 @@ A button can also be passed data via the `data` property on `ActionSheetButton`.
5959

6060
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.
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 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
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 Custom Properties
9191

9292
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.
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

‎docs/api/alert.md

+13-13
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ title: "ion-alert"
44
import Tabs from '@theme/Tabs';
55
import TabItem from '@theme/TabItem';
66

7-
import Props from '@ionic-internal/component-api/v7/alert/props.md';
8-
import Events from '@ionic-internal/component-api/v7/alert/events.md';
9-
import Methods from '@ionic-internal/component-api/v7/alert/methods.md';
10-
import Parts from '@ionic-internal/component-api/v7/alert/parts.md';
11-
import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md';
12-
import Slots from '@ionic-internal/component-api/v7/alert/slots.md';
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.md';
12+
import Slots from '@ionic-internal/component-api/v8/alert/slots.md';
1313

1414
<head>
1515
<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
2626

2727
`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.
2828

29-
import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md';
29+
import Trigger from '@site/static/usage/v8/alert/presenting/trigger/index.md';
3030

3131
<Trigger />
3232

@@ -36,15 +36,15 @@ The `isOpen` property on `ion-alert` allows developers to control the presentati
3636

3737
`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.
3838

39-
import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md';
39+
import IsOpen from '@site/static/usage/v8/alert/presenting/isOpen/index.md';
4040

4141
<IsOpen />
4242

4343
## Controller Alerts
4444

4545
The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed.
4646

47-
import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md';
47+
import Controller from '@site/static/usage/v8/alert/presenting/controller/index.md';
4848

4949
<Controller />
5050

@@ -54,7 +54,7 @@ In the array of `buttons`, each button includes properties for its `text`, and o
5454

5555
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.
5656

57-
import Buttons from '@site/static/usage/v7/alert/buttons/index.md';
57+
import Buttons from '@site/static/usage/v8/alert/buttons/index.md';
5858

5959
<Buttons />
6060

@@ -65,13 +65,13 @@ Alerts can also include several different inputs whose data can be passed back t
6565

6666
### Text Inputs Example
6767

68-
import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.md';
68+
import TextInputs from '@site/static/usage/v8/alert/inputs/text-inputs/index.md';
6969

7070
<TextInputs />
7171

7272
### Radio Example
7373

74-
import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md';
74+
import Radios from '@site/static/usage/v8/alert/inputs/radios/index.md';
7575

7676
<Radios />
7777

@@ -101,7 +101,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
101101
}
102102
```
103103

104-
import Customization from '@site/static/usage/v7/alert/customization/index.md';
104+
import Customization from '@site/static/usage/v8/alert/customization/index.md';
105105

106106
<Customization />
107107

‎docs/api/app.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
---
22
title: "ion-app"
33
---
4-
import Props from '@ionic-internal/component-api/v7/app/props.md';
5-
import Events from '@ionic-internal/component-api/v7/app/events.md';
6-
import Methods from '@ionic-internal/component-api/v7/app/methods.md';
7-
import Parts from '@ionic-internal/component-api/v7/app/parts.md';
8-
import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.md';
9-
import Slots from '@ionic-internal/component-api/v7/app/slots.md';
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.md';
9+
import Slots from '@ionic-internal/component-api/v8/app/slots.md';
1010

1111
<head>
1212
<title>ion-app: Container Element for an Ionic Application</title>

0 commit comments

Comments
 (0)