Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(select): add playgrounds for toggle icon customization #2996

Merged
merged 6 commits into from
Jun 20, 2023
Merged

docs(select): add playgrounds for toggle icon customization #2996

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0760bc0
add playgrounds
Jun 14, 2023
19e8ed2
lint
Jun 14, 2023
10fbcec
Update static/usage/v7/select/customization/custom-toggle-icons/index.md
averyjohnston Jun 20, 2023
cb4f65f
Update static/usage/v7/select/customization/icon-flip-behavior/index.md
averyjohnston Jun 20, 2023
35f3b82
fix icon usage for React and Vue
Jun 20, 2023
6cc4886
rename toggleIconWhenOpen to expandedIcon
Jun 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/api/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

<CustomToggleIconsExample />

### 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';

<IconFlipBehaviorExample />

## 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.
Expand Down
17 changes: 17 additions & 0 deletions static/usage/v7/select/customization/custom-toggle-icons/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```html
<ion-list>
<ion-item>
<ion-select
interface="popover"
toggleIcon="add"
expandedIcon="remove"
aria-label="fruit"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
```
36 changes: 36 additions & 0 deletions static/usage/v7/select/customization/custom-toggle-icons/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Select - Custom Toggle Icons</title>
<link rel="stylesheet" href="../../../../common.css" />
<script src="../../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-list>
<ion-item>
<ion-select
interface="popover"
toggle-icon="add"
expanded-icon="remove"
aria-label="fruit"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-app>
</body>
</html>
13 changes: 13 additions & 0 deletions static/usage/v7/select/customization/custom-toggle-icons/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground
version="7"
size="400px"
code={{ javascript, react, vue, angular }}
src="usage/v7/select/customization/custom-toggle-icons/demo.html"
/>
17 changes: 17 additions & 0 deletions static/usage/v7/select/customization/custom-toggle-icons/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```html
<ion-list>
<ion-item>
<ion-select
interface="popover"
toggle-icon="add"
expanded-icon="remove"
aria-label="fruit"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
```
26 changes: 26 additions & 0 deletions static/usage/v7/select/customization/custom-toggle-icons/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<IonList>
<IonItem>
<IonSelect
interface="popover"
toggleIcon={add}
expandedIcon={remove}
aria-label="fruit"
placeholder="Select fruit"
>
<IonSelectOption value="apples">Apples</IonSelectOption>
<IonSelectOption value="oranges">Oranges</IonSelectOption>
<IonSelectOption value="bananas">Bananas</IonSelectOption>
</IonSelect>
</IonItem>
</IonList>
);
}
export default Example;
```
32 changes: 32 additions & 0 deletions static/usage/v7/select/customization/custom-toggle-icons/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
```html
<template>
<ion-list>
<ion-item>
<ion-select
interface="popover"
:toggle-icon="add"
:expanded-icon="remove"
aria-label="fruit"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</template>

<script>
import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
import { add, remove } from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonItem, IonList, IonSelect, IonSelectOption },
setup() {
return { add, remove };
},
});
</script>
```
13 changes: 13 additions & 0 deletions ...age/v7/select/customization/icon-flip-behavior/angular/example_component_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
```
30 changes: 30 additions & 0 deletions ...ge/v7/select/customization/icon-flip-behavior/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
```html
<ion-list>
<ion-item>
<ion-select
class="always-flip"
toggleIcon="caret-down-sharp"
interface="popover"
label="Icon flips on both modes"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select
class="never-flip"
toggleIcon="caret-down-sharp"
interface="popover"
label="Icon never flips"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
```
10 changes: 10 additions & 0 deletions ...sage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {}
```
63 changes: 63 additions & 0 deletions static/usage/v7/select/customization/icon-flip-behavior/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Select - Icon Flip Behavior</title>
<link rel="stylesheet" href="../../../../common.css" />
<script src="../../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />

<style>
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;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-list>
<ion-item>
<ion-select
class="always-flip"
toggle-icon="caret-down-sharp"
interface="popover"
label="Icon flips on both modes"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select
class="never-flip"
toggle-icon="caret-down-sharp"
interface="popover"
label="Icon never flips"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-app>
</body>
</html>
34 changes: 34 additions & 0 deletions static/usage/v7/select/customization/icon-flip-behavior/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<Playground
version="7"
size="400px"
code={{
javascript,
react: {
files: {
'src/main.tsx': react_main_tsx,
'src/main.css': react_main_css,
},
},
vue,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.css': angular_example_component_css,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
src="usage/v7/select/customization/icon-flip-behavior/demo.html"
/>
44 changes: 44 additions & 0 deletions static/usage/v7/select/customization/icon-flip-behavior/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
```html
<ion-list>
<ion-item>
<ion-select
class="always-flip"
toggle-icon="caret-down-sharp"
interface="popover"
label="Icon flips on both modes"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-select
class="never-flip"
toggle-icon="caret-down-sharp"
interface="popover"
label="Icon never flips"
placeholder="Select fruit"
>
<ion-select-option value="apples">Apples</ion-select-option>
<ion-select-option value="oranges">Oranges</ion-select-option>
<ion-select-option value="bananas">Bananas</ion-select-option>
</ion-select>
</ion-item>
</ion-list>

<style>
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;
}
</style>
```
13 changes: 13 additions & 0 deletions static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
```
Loading