diff --git a/docs/api/select.md b/docs/api/select.md index 2636e7d04bb..a13b97165c8 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -180,6 +180,24 @@ Customizing the interface dialog should be done by following the Customization s 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. +### Custom Toggle Icons + +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. + +import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.md'; + + + +### Icon Flip Behavior + +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. + +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. + +import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.md'; + + + ## Typeahead Component 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. diff --git a/static/usage/v7/select/customization/custom-toggle-icons/angular.md b/static/usage/v7/select/customization/custom-toggle-icons/angular.md new file mode 100644 index 00000000000..429435daa6a --- /dev/null +++ b/static/usage/v7/select/customization/custom-toggle-icons/angular.md @@ -0,0 +1,17 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v7/select/customization/custom-toggle-icons/demo.html b/static/usage/v7/select/customization/custom-toggle-icons/demo.html new file mode 100644 index 00000000000..1309854f3d5 --- /dev/null +++ b/static/usage/v7/select/customization/custom-toggle-icons/demo.html @@ -0,0 +1,36 @@ + + + + + + Select - Custom Toggle Icons + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v7/select/customization/custom-toggle-icons/index.md b/static/usage/v7/select/customization/custom-toggle-icons/index.md new file mode 100644 index 00000000000..0617a54da77 --- /dev/null +++ b/static/usage/v7/select/customization/custom-toggle-icons/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v7/select/customization/custom-toggle-icons/javascript.md b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md new file mode 100644 index 00000000000..fe874eaac26 --- /dev/null +++ b/static/usage/v7/select/customization/custom-toggle-icons/javascript.md @@ -0,0 +1,17 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v7/select/customization/custom-toggle-icons/react.md b/static/usage/v7/select/customization/custom-toggle-icons/react.md new file mode 100644 index 00000000000..c7358752605 --- /dev/null +++ b/static/usage/v7/select/customization/custom-toggle-icons/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { add, remove } from 'ionicons/icons'; + +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/select/customization/custom-toggle-icons/vue.md b/static/usage/v7/select/customization/custom-toggle-icons/vue.md new file mode 100644 index 00000000000..4d748e1c2d9 --- /dev/null +++ b/static/usage/v7/select/customization/custom-toggle-icons/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md new file mode 100644 index 00000000000..b031a2d4851 --- /dev/null +++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +ion-select.always-flip::part(icon) { + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); +} + +ion-select.always-flip.select-expanded::part(icon) { + transform: rotate(180deg); +} + +ion-select.never-flip::part(icon) { + transform: none; +} +``` diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md new file mode 100644 index 00000000000..5f40703296c --- /dev/null +++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md new file mode 100644 index 00000000000..4db53a836a9 --- /dev/null +++ b/static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md @@ -0,0 +1,10 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v7/select/customization/icon-flip-behavior/demo.html b/static/usage/v7/select/customization/icon-flip-behavior/demo.html new file mode 100644 index 00000000000..f3e6738fe3e --- /dev/null +++ b/static/usage/v7/select/customization/icon-flip-behavior/demo.html @@ -0,0 +1,63 @@ + + + + + + Select - Icon Flip Behavior + + + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v7/select/customization/icon-flip-behavior/index.md b/static/usage/v7/select/customization/icon-flip-behavior/index.md new file mode 100644 index 00000000000..185f778569d --- /dev/null +++ b/static/usage/v7/select/customization/icon-flip-behavior/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/select/customization/icon-flip-behavior/javascript.md b/static/usage/v7/select/customization/icon-flip-behavior/javascript.md new file mode 100644 index 00000000000..de35559165f --- /dev/null +++ b/static/usage/v7/select/customization/icon-flip-behavior/javascript.md @@ -0,0 +1,44 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + + + +``` diff --git a/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md b/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md new file mode 100644 index 00000000000..b031a2d4851 --- /dev/null +++ b/static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md @@ -0,0 +1,13 @@ +```css +ion-select.always-flip::part(icon) { + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); +} + +ion-select.always-flip.select-expanded::part(icon) { + transform: rotate(180deg); +} + +ion-select.never-flip::part(icon) { + transform: none; +} +``` diff --git a/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md new file mode 100644 index 00000000000..e7b146efcee --- /dev/null +++ b/static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { caretDownSharp } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/select/customization/icon-flip-behavior/vue.md b/static/usage/v7/select/customization/icon-flip-behavior/vue.md new file mode 100644 index 00000000000..f7d38a6ae7b --- /dev/null +++ b/static/usage/v7/select/customization/icon-flip-behavior/vue.md @@ -0,0 +1,59 @@ +```html + + + + + +```