Skip to content

Commit d9ca1bf

Browse files
averyjohnstonliamdebeasi
averyjohnston
and
liamdebeasi
authored
docs(select): add playgrounds for toggle icon customization (#2996)
* add playgrounds * lint * Update static/usage/v7/select/customization/custom-toggle-icons/index.md Co-authored-by: Liam DeBeasi <[email protected]> * Update static/usage/v7/select/customization/icon-flip-behavior/index.md Co-authored-by: Liam DeBeasi <[email protected]> * fix icon usage for React and Vue * rename toggleIconWhenOpen to expandedIcon --------- Co-authored-by: Liam DeBeasi <[email protected]>
1 parent 107a0c5 commit d9ca1bf

File tree

16 files changed

+466
-0
lines changed

16 files changed

+466
-0
lines changed

‎docs/api/select.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,24 @@ Customizing the interface dialog should be done by following the Customization s
182182

183183
However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options.
184184

185+
### Custom Toggle Icons
186+
187+
The icon that displays next to the select text can be set to any [Ionicon](https://ionic.io/ionicons) using the `toggleIcon` and/or `expandedIcon` properties.
188+
189+
import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.md';
190+
191+
<CustomToggleIconsExample />
192+
193+
### Icon Flip Behavior
194+
195+
By default, when the select is open, the toggle icon will automatically rotate on `md` mode and remain static on `ios` mode. This behavior can be customized using CSS.
196+
197+
The below example also uses a [custom `toggleIcon`](#custom-toggle-icons) to better demonstrate the flip behavior on `ios`, since the default icon is vertically symmetrical.
198+
199+
import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.md';
200+
201+
<IconFlipBehaviorExample />
202+
185203
## Typeahead Component
186204

187205
Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space.

‎static/usage/v7/select/customization/custom-toggle-icons/angular.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select
5+
interface="popover"
6+
toggleIcon="add"
7+
expandedIcon="remove"
8+
aria-label="fruit"
9+
placeholder="Select fruit"
10+
>
11+
<ion-select-option value="apples">Apples</ion-select-option>
12+
<ion-select-option value="oranges">Oranges</ion-select-option>
13+
<ion-select-option value="bananas">Bananas</ion-select-option>
14+
</ion-select>
15+
</ion-item>
16+
</ion-list>
17+
```

‎static/usage/v7/select/customization/custom-toggle-icons/demo.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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>Select - Custom Toggle Icons</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-select
20+
interface="popover"
21+
toggle-icon="add"
22+
expanded-icon="remove"
23+
aria-label="fruit"
24+
placeholder="Select fruit"
25+
>
26+
<ion-select-option value="apples">Apples</ion-select-option>
27+
<ion-select-option value="oranges">Oranges</ion-select-option>
28+
<ion-select-option value="bananas">Bananas</ion-select-option>
29+
</ion-select>
30+
</ion-item>
31+
</ion-list>
32+
</div>
33+
</ion-content>
34+
</ion-app>
35+
</body>
36+
</html>

‎static/usage/v7/select/customization/custom-toggle-icons/index.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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+
size="400px"
11+
code={{ javascript, react, vue, angular }}
12+
src="usage/v7/select/customization/custom-toggle-icons/demo.html"
13+
/>

‎static/usage/v7/select/customization/custom-toggle-icons/javascript.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select
5+
interface="popover"
6+
toggle-icon="add"
7+
expanded-icon="remove"
8+
aria-label="fruit"
9+
placeholder="Select fruit"
10+
>
11+
<ion-select-option value="apples">Apples</ion-select-option>
12+
<ion-select-option value="oranges">Oranges</ion-select-option>
13+
<ion-select-option value="bananas">Bananas</ion-select-option>
14+
</ion-select>
15+
</ion-item>
16+
</ion-list>
17+
```

‎static/usage/v7/select/customization/custom-toggle-icons/react.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
4+
import { add, remove } from 'ionicons/icons';
5+
6+
function Example() {
7+
return (
8+
<IonList>
9+
<IonItem>
10+
<IonSelect
11+
interface="popover"
12+
toggleIcon={add}
13+
expandedIcon={remove}
14+
aria-label="fruit"
15+
placeholder="Select fruit"
16+
>
17+
<IonSelectOption value="apples">Apples</IonSelectOption>
18+
<IonSelectOption value="oranges">Oranges</IonSelectOption>
19+
<IonSelectOption value="bananas">Bananas</IonSelectOption>
20+
</IonSelect>
21+
</IonItem>
22+
</IonList>
23+
);
24+
}
25+
export default Example;
26+
```

‎static/usage/v7/select/customization/custom-toggle-icons/vue.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-select
6+
interface="popover"
7+
:toggle-icon="add"
8+
:expanded-icon="remove"
9+
aria-label="fruit"
10+
placeholder="Select fruit"
11+
>
12+
<ion-select-option value="apples">Apples</ion-select-option>
13+
<ion-select-option value="oranges">Oranges</ion-select-option>
14+
<ion-select-option value="bananas">Bananas</ion-select-option>
15+
</ion-select>
16+
</ion-item>
17+
</ion-list>
18+
</template>
19+
20+
<script>
21+
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
22+
import { add, remove } from 'ionicons/icons';
23+
import { defineComponent } from 'vue';
24+
25+
export default defineComponent({
26+
components: { IonItem, IonList, IonSelect, IonSelectOption },
27+
setup() {
28+
return { add, remove };
29+
},
30+
});
31+
</script>
32+
```

‎static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```css
2+
ion-select.always-flip::part(icon) {
3+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
4+
}
5+
6+
ion-select.always-flip.select-expanded::part(icon) {
7+
transform: rotate(180deg);
8+
}
9+
10+
ion-select.never-flip::part(icon) {
11+
transform: none;
12+
}
13+
```

‎static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select
5+
class="always-flip"
6+
toggleIcon="caret-down-sharp"
7+
interface="popover"
8+
label="Icon flips on both modes"
9+
placeholder="Select fruit"
10+
>
11+
<ion-select-option value="apples">Apples</ion-select-option>
12+
<ion-select-option value="oranges">Oranges</ion-select-option>
13+
<ion-select-option value="bananas">Bananas</ion-select-option>
14+
</ion-select>
15+
</ion-item>
16+
<ion-item>
17+
<ion-select
18+
class="never-flip"
19+
toggleIcon="caret-down-sharp"
20+
interface="popover"
21+
label="Icon never flips"
22+
placeholder="Select fruit"
23+
>
24+
<ion-select-option value="apples">Apples</ion-select-option>
25+
<ion-select-option value="oranges">Oranges</ion-select-option>
26+
<ion-select-option value="bananas">Bananas</ion-select-option>
27+
</ion-select>
28+
</ion-item>
29+
</ion-list>
30+
```

‎static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-example',
6+
templateUrl: 'example.component.html',
7+
styleUrls: ['example.component.css'],
8+
})
9+
export class ExampleComponent {}
10+
```

‎static/usage/v7/select/customization/icon-flip-behavior/demo.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
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>Select - Icon Flip Behavior</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+
12+
<style>
13+
ion-select.always-flip::part(icon) {
14+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
15+
}
16+
17+
ion-select.always-flip.select-expanded::part(icon) {
18+
transform: rotate(180deg);
19+
}
20+
21+
ion-select.never-flip::part(icon) {
22+
transform: none;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<ion-app>
29+
<ion-content>
30+
<div class="container">
31+
<ion-list>
32+
<ion-item>
33+
<ion-select
34+
class="always-flip"
35+
toggle-icon="caret-down-sharp"
36+
interface="popover"
37+
label="Icon flips on both modes"
38+
placeholder="Select fruit"
39+
>
40+
<ion-select-option value="apples">Apples</ion-select-option>
41+
<ion-select-option value="oranges">Oranges</ion-select-option>
42+
<ion-select-option value="bananas">Bananas</ion-select-option>
43+
</ion-select>
44+
</ion-item>
45+
<ion-item>
46+
<ion-select
47+
class="never-flip"
48+
toggle-icon="caret-down-sharp"
49+
interface="popover"
50+
label="Icon never flips"
51+
placeholder="Select fruit"
52+
>
53+
<ion-select-option value="apples">Apples</ion-select-option>
54+
<ion-select-option value="oranges">Oranges</ion-select-option>
55+
<ion-select-option value="bananas">Bananas</ion-select-option>
56+
</ion-select>
57+
</ion-item>
58+
</ion-list>
59+
</div>
60+
</ion-content>
61+
</ion-app>
62+
</body>
63+
</html>

‎static/usage/v7/select/customization/icon-flip-behavior/index.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import vue from './vue.md';
5+
6+
import react_main_tsx from './react/main_tsx.md';
7+
import react_main_css from './react/main_css.md';
8+
9+
import angular_example_component_html from './angular/example_component_html.md';
10+
import angular_example_component_css from './angular/example_component_css.md';
11+
import angular_example_component_ts from './angular/example_component_ts.md';
12+
13+
<Playground
14+
version="7"
15+
size="400px"
16+
code={{
17+
javascript,
18+
react: {
19+
files: {
20+
'src/main.tsx': react_main_tsx,
21+
'src/main.css': react_main_css,
22+
},
23+
},
24+
vue,
25+
angular: {
26+
files: {
27+
'src/app/example.component.html': angular_example_component_html,
28+
'src/app/example.component.css': angular_example_component_css,
29+
'src/app/example.component.ts': angular_example_component_ts,
30+
},
31+
},
32+
}}
33+
src="usage/v7/select/customization/icon-flip-behavior/demo.html"
34+
/>

‎static/usage/v7/select/customization/icon-flip-behavior/javascript.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select
5+
class="always-flip"
6+
toggle-icon="caret-down-sharp"
7+
interface="popover"
8+
label="Icon flips on both modes"
9+
placeholder="Select fruit"
10+
>
11+
<ion-select-option value="apples">Apples</ion-select-option>
12+
<ion-select-option value="oranges">Oranges</ion-select-option>
13+
<ion-select-option value="bananas">Bananas</ion-select-option>
14+
</ion-select>
15+
</ion-item>
16+
<ion-item>
17+
<ion-select
18+
class="never-flip"
19+
toggle-icon="caret-down-sharp"
20+
interface="popover"
21+
label="Icon never flips"
22+
placeholder="Select fruit"
23+
>
24+
<ion-select-option value="apples">Apples</ion-select-option>
25+
<ion-select-option value="oranges">Oranges</ion-select-option>
26+
<ion-select-option value="bananas">Bananas</ion-select-option>
27+
</ion-select>
28+
</ion-item>
29+
</ion-list>
30+
31+
<style>
32+
ion-select.always-flip::part(icon) {
33+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
34+
}
35+
36+
ion-select.always-flip.select-expanded::part(icon) {
37+
transform: rotate(180deg);
38+
}
39+
40+
ion-select.never-flip::part(icon) {
41+
transform: none;
42+
}
43+
</style>
44+
```

‎static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
```css
2+
ion-select.always-flip::part(icon) {
3+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
4+
}
5+
6+
ion-select.always-flip.select-expanded::part(icon) {
7+
transform: rotate(180deg);
8+
}
9+
10+
ion-select.never-flip::part(icon) {
11+
transform: none;
12+
}
13+
```

0 commit comments

Comments
 (0)