Skip to content

Commit f7b80ff

Browse files
liamdebeasiliamdebeasi
authored
chore: release feature-7.6 docs
chore: release feature-7.6 docs
2 parents 7ca32db + 34540d7 commit f7b80ff

37 files changed

+890
-2
lines changed

‎docs/api/input.md

+16
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,22 @@ Please submit bug reports with Maskito to the [Maskito Github repository](https:
148148

149149
:::
150150

151+
## Start and End Slots (experimental)
152+
153+
The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the input.
154+
155+
Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
156+
157+
:::note
158+
In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
159+
160+
If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
161+
:::
162+
163+
import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md';
164+
165+
<StartEndSlots />
166+
151167
## Theming
152168

153169
### Colors

‎docs/api/radio.md

+8
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md
3636

3737
<LabelPlacement />
3838

39+
## Object Value References
40+
41+
By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
42+
43+
import UsingComparewith from '@site/static/usage/v7/radio/using-comparewith/index.md';
44+
45+
<UsingComparewith />
46+
3947
## Alignment
4048

4149
Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.

‎docs/api/select.md

+15-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/r
119119

120120
When using objects for select values, it is possible for the identities of these objects to change if they are coming from a server or database, while the selected value's identity remains the same. For example, this can occur when an existing record with the desired object value is loaded into the select, but the newly retrieved select options now have different identities. This will result in the select appearing to have no value at all, even though the original selection in still intact.
121121

122-
By default, the select uses object equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
122+
By default, the select uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
123123

124124
### Using compareWith
125125

@@ -173,6 +173,20 @@ import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/
173173

174174
<InterfaceOptionsExample />
175175

176+
## Start and End Slots
177+
178+
The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the select. If the slot content is clicked, the select will not open.
179+
180+
:::note
181+
In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
182+
183+
If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
184+
:::
185+
186+
import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md';
187+
188+
<StartEndSlots />
189+
176190
## Customization
177191

178192
There are two units that make up the Select component and each need to be styled separately. The `ion-select` element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. The interface, which is defined in the [Interfaces](#interfaces) section above, is the dialog that opens when clicking on the `ion-select`. The interface contains all of the options defined by adding `ion-select-option` elements. The following sections will go over the differences between styling these.

‎docs/api/textarea.md

+16
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,22 @@ import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/
109109

110110
<ClearOnEditPlayground />
111111

112+
## Start and End Slots (experimental)
113+
114+
The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the textarea.
115+
116+
Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
117+
118+
:::note
119+
In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
120+
121+
If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
122+
:::
123+
124+
import StartEndSlots from '@site/static/usage/v7/textarea/start-end-slots/index.md';
125+
126+
<StartEndSlots />
127+
112128
## Migrating from Legacy Textarea Syntax
113129

114130
A simpler textarea syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an textarea, resolves accessibility issues, and improves the developer experience.

‎docs/api/toast.md

+8
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,14 @@ import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md
7272

7373
<PositionAnchor />
7474

75+
## Swipe to Dismiss
76+
77+
Toasts can be swiped to dismiss by using the `swipeGesture` property. This feature is position-aware, meaning the direction that users need to swipe will change based on the value of the `position` property. Additionally, the distance users need to swipe may be impacted by the `positionAnchor` property.
78+
79+
import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md';
80+
81+
<SwipeGesture />
82+
7583
## Layout
7684

7785
Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.

‎static/usage/v7/input/start-end-slots/angular.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input labelPlacement="stacked" label="Email" placeholder="[email protected]">
5+
<ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
6+
<ion-button fill="clear" slot="end" aria-label="Show/hide">
7+
<ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
8+
</ion-button>
9+
</ion-input>
10+
</ion-item>
11+
</ion-list>
12+
```

‎static/usage/v7/input/start-end-slots/demo.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Input</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-item>
19+
<ion-input label-placement="stacked" label="Email" placeholder="[email protected]">
20+
<ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
21+
<ion-button fill="clear" slot="end" aria-label="Show/hide">
22+
<ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
23+
</ion-button>
24+
</ion-input>
25+
</ion-item>
26+
</ion-list>
27+
</div>
28+
</ion-content>
29+
</ion-app>
30+
</body>
31+
</html>

‎static/usage/v7/input/start-end-slots/index.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground
9+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/input/start-end-slots/demo.html"
17+
/>

‎static/usage/v7/input/start-end-slots/javascript.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-input label-placement="stacked" label="Email" placeholder="[email protected]">
5+
<ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
6+
<ion-button fill="clear" slot="end" aria-label="Show/hide">
7+
<ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
8+
</ion-button>
9+
</ion-input>
10+
</ion-item>
11+
</ion-list>
12+
```

‎static/usage/v7/input/start-end-slots/react.md

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/react';
4+
import { eye, lockClosed } from 'ionicons/icons';
5+
6+
function Example() {
7+
return (
8+
<IonList>
9+
<IonItem>
10+
<IonInput labelPlacement="stacked" label="Email" placeholder="[email protected]">
11+
<IonIcon slot="start" icon={lockClosed} aria-hidden="true"></IonIcon>
12+
<IonButton fill="clear" slot="end" aria-label="Show/hide">
13+
<IonIcon slot="icon-only" name={eye} aria-hidden="true"></IonIcon>
14+
</IonButton>
15+
</IonInput>
16+
</IonItem>
17+
</IonList>
18+
);
19+
}
20+
export default Example;
21+
```

‎static/usage/v7/input/start-end-slots/vue.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-input label-placement="stacked" label="Email" placeholder="[email protected]">
6+
<ion-icon slot="start" :icon="lockClosed" aria-hidden="true"></ion-icon>
7+
<ion-button fill="clear" slot="end" aria-label="Show/hide">
8+
<ion-icon slot="icon-only" :icon="eye" aria-hidden="true"></ion-icon>
9+
</ion-button>
10+
</ion-input>
11+
</ion-item>
12+
</ion-list>
13+
</template>
14+
15+
<script lang="ts">
16+
import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/vue';
17+
import { eye, lockClosed } from 'ionicons/icons';
18+
import { defineComponent } from 'vue';
19+
20+
export default defineComponent({
21+
components: {
22+
IonButton,
23+
IonIcon,
24+
IonInput,
25+
IonItem,
26+
IonList,
27+
},
28+
setup() {
29+
return { eye, lockClosed };
30+
},
31+
});
32+
</script>
33+
```

‎static/usage/v7/radio/using-comparewith/angular/example_component_html.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```html
2+
<ion-list>
3+
<ion-radio-group [compareWith]="compareWith" (ionChange)="handleChange($event)">
4+
<ion-item *ngFor="let food of foods; trackBy: trackItems">
5+
<ion-radio [value]="food">{{ food.name }}</ion-radio>
6+
</ion-item>
7+
</ion-radio-group>
8+
</ion-list>
9+
```

‎static/usage/v7/radio/using-comparewith/angular/example_component_ts.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-example',
6+
templateUrl: 'example.component.html',
7+
})
8+
export class ExampleComponent {
9+
foods = [
10+
{
11+
id: 1,
12+
name: 'Apples',
13+
type: 'fruit',
14+
},
15+
{
16+
id: 2,
17+
name: 'Carrots',
18+
type: 'vegetable',
19+
},
20+
{
21+
id: 3,
22+
name: 'Cupcakes',
23+
type: 'dessert',
24+
},
25+
];
26+
27+
compareWith(o1, o2) {
28+
return o1.id === o2.id;
29+
}
30+
31+
handleChange(ev) {
32+
console.log('Current value:', JSON.stringify(ev.target.value));
33+
}
34+
35+
trackItems(index: number, item: any) {
36+
return item.id;
37+
}
38+
}
39+
```

‎static/usage/v7/radio/using-comparewith/demo.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Radio</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-radio-group></ion-radio-group>
19+
</ion-list>
20+
</div>
21+
</ion-content>
22+
</ion-app>
23+
24+
<script>
25+
const foods = [
26+
{
27+
id: 1,
28+
name: 'Apples',
29+
type: 'fruit',
30+
},
31+
{
32+
id: 2,
33+
name: 'Carrots',
34+
type: 'vegetable',
35+
},
36+
{
37+
id: 3,
38+
name: 'Cupcakes',
39+
type: 'dessert',
40+
},
41+
];
42+
43+
const compareWithFn = (o1, o2) => {
44+
return o1.id === o2.id;
45+
};
46+
47+
const radioGroupEl = document.querySelector('ion-radio-group');
48+
radioGroupEl.compareWith = (a, b) => a.value === b.value;
49+
50+
foods.forEach((option, i) => {
51+
const radio = document.createElement('ion-radio');
52+
53+
radio.value = option;
54+
radio.textContent = option.name;
55+
56+
const item = document.createElement('ion-item');
57+
item.appendChild(radio);
58+
59+
radioGroupEl.appendChild(item);
60+
});
61+
62+
radioGroupEl.addEventListener('ionChange', () => {
63+
console.log('Current value:', JSON.stringify(radioGroupEl.value));
64+
});
65+
</script>
66+
</body>
67+
</html>

‎static/usage/v7/radio/using-comparewith/index.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
version="7"
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
23+
src="usage/v7/radio/using-comparewith/demo.html"
24+
showConsole={true}
25+
/>

0 commit comments

Comments
 (0)