Skip to content

Commit c4dc930

Browse files
brandyscarneybrandyscarney
authored
docs(select): update icon playgrounds to use addIcons usage (#3752)
1 parent 198125f commit c4dc930

File tree

16 files changed

+342
-8
lines changed

16 files changed

+342
-8
lines changed

‎docs/api/select.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ In most cases, [Icon](./icon.md) components placed in these slots should have `a
187187
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.
188188
:::
189189

190-
import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md';
190+
import StartEndSlots from '@site/static/usage/v8/select/start-end-slots/index.md';
191191

192192
<StartEndSlots />
193193

‎static/usage/v7/select/start-end-slots/angular.md renamed to ‎static/usage/v7/select/start-end-slots/angular/example_component_html.md

File renamed without changes.

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
import { addIcons } from 'ionicons';
5+
import { eye, leaf } from 'ionicons/icons';
6+
7+
@Component({
8+
selector: 'app-example',
9+
templateUrl: 'example.component.html',
10+
styleUrls: ['example.component.css'],
11+
})
12+
export class ExampleComponent {
13+
constructor() {
14+
/**
15+
* Any icons you want to use in your application
16+
* can be registered in app.component.ts and then
17+
* referenced by name anywhere in your application.
18+
*/
19+
addIcons({ eye, leaf });
20+
}
21+
}
22+
```

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,16 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Select</title>
7-
<link rel="stylesheet" href="../../../common.css" />
8-
<script src="../../../common.js"></script>
7+
<link rel="stylesheet" href="../../common.css" />
8+
<script src="../../common.js"></script>
99
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
12+
<style>
13+
ion-list {
14+
width: 300px;
15+
}
16+
</style>
1117
</head>
1218

1319
<body>

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

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,38 @@
11
import Playground from '@site/src/components/global/Playground';
22

3-
import javascript from './javascript.md';
3+
import javascript_index_html from './javascript/index_html.md';
4+
import javascript_index_ts from './javascript/index_ts.md';
5+
46
import react from './react.md';
57
import vue from './vue.md';
6-
import angular from './angular.md';
8+
9+
import angular_example_component_html from './angular/example_component_html.md';
10+
import angular_example_component_ts from './angular/example_component_ts.md';
711

812
<Playground
913
version="7"
1014
code={{
11-
javascript,
15+
javascript: {
16+
files: {
17+
'index.html': javascript_index_html,
18+
'index.ts': javascript_index_ts,
19+
},
20+
dependencies: {
21+
ionicons: '7.4.0',
22+
},
23+
},
1224
react,
1325
vue,
14-
angular,
26+
angular: {
27+
files: {
28+
'src/app/example.component.html': angular_example_component_html,
29+
'src/app/example.component.ts': angular_example_component_ts,
30+
},
31+
dependencies: {
32+
ionicons: '7.4.0',
33+
},
34+
},
1535
}}
16-
src="usage/v7/select/start-end-slots/demo.html"
1736
size="300px"
37+
src="usage/v7/select/start-end-slots/demo.html"
1838
/>

‎static/usage/v7/select/start-end-slots/javascript.md renamed to ‎static/usage/v7/select/start-end-slots/javascript/index_html.md

File renamed without changes.

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
```ts
2+
import { defineCustomElements } from '@ionic/core/loader';
3+
4+
import { addIcons } from 'ionicons';
5+
import { eye, leaf } from 'ionicons/icons';
6+
7+
/* Core CSS required for Ionic components to work properly */
8+
import '@ionic/core/css/core.css';
9+
10+
/* Basic CSS for apps built with Ionic */
11+
import '@ionic/core/css/normalize.css';
12+
import '@ionic/core/css/structure.css';
13+
import '@ionic/core/css/typography.css';
14+
15+
/* Optional CSS utils that can be commented out */
16+
import '@ionic/core/css/padding.css';
17+
import '@ionic/core/css/float-elements.css';
18+
import '@ionic/core/css/text-alignment.css';
19+
import '@ionic/core/css/text-transformation.css';
20+
import '@ionic/core/css/flex-utils.css';
21+
import '@ionic/core/css/display.css';
22+
23+
/* Theme variables */
24+
import './theme/variables.css';
25+
26+
/**
27+
* On Ionicons 7.2+ these icons
28+
* get mapped to a kebab-case key.
29+
* Alternatively, developers can do:
30+
* addIcons({ 'eye': eye, 'leaf': leaf });
31+
*/
32+
addIcons({ eye, leaf });
33+
34+
defineCustomElements();
35+
```

‎static/usage/v8/select/start-end-slots/angular/example_component_html.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select labelPlacement="stacked" label="Favorite fruit" value="apple">
5+
<ion-icon slot="start" name="leaf" aria-hidden="true"></ion-icon>
6+
<ion-select-option value="apple">Apple</ion-select-option>
7+
<ion-select-option value="banana">Banana</ion-select-option>
8+
<ion-select-option value="orange">Orange</ion-select-option>
9+
<ion-button fill="clear" slot="end" aria-label="Show/hide password">
10+
<ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
11+
</ion-button>
12+
</ion-select>
13+
</ion-item>
14+
</ion-list>
15+
```

‎static/usage/v8/select/start-end-slots/angular/example_component_ts.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
import { addIcons } from 'ionicons';
5+
import { eye, leaf } from 'ionicons/icons';
6+
7+
@Component({
8+
selector: 'app-example',
9+
templateUrl: 'example.component.html',
10+
styleUrls: ['example.component.css'],
11+
})
12+
export class ExampleComponent {
13+
constructor() {
14+
/**
15+
* Any icons you want to use in your application
16+
* can be registered in app.component.ts and then
17+
* referenced by name anywhere in your application.
18+
*/
19+
addIcons({ eye, leaf });
20+
}
21+
}
22+
```

‎static/usage/v8/select/start-end-slots/demo.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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</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@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
12+
<style>
13+
ion-list {
14+
width: 300px;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<ion-app>
21+
<ion-content>
22+
<div class="container">
23+
<ion-list>
24+
<ion-item>
25+
<ion-select label-placement="stacked" label="Favorite fruit" value="apple">
26+
<ion-icon slot="start" name="leaf" aria-hidden="true"></ion-icon>
27+
<ion-select-option value="apple">Apple</ion-select-option>
28+
<ion-select-option value="banana">Banana</ion-select-option>
29+
<ion-select-option value="orange">Orange</ion-select-option>
30+
<ion-button fill="clear" slot="end" aria-label="Show/hide password">
31+
<ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
32+
</ion-button>
33+
</ion-select>
34+
</ion-item>
35+
</ion-list>
36+
</div>
37+
</ion-content>
38+
</ion-app>
39+
</body>
40+
</html>

‎static/usage/v8/select/start-end-slots/index.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript_index_html from './javascript/index_html.md';
4+
import javascript_index_ts from './javascript/index_ts.md';
5+
6+
import react from './react.md';
7+
import vue from './vue.md';
8+
9+
import angular_example_component_html from './angular/example_component_html.md';
10+
import angular_example_component_ts from './angular/example_component_ts.md';
11+
12+
<Playground
13+
version="8"
14+
code={{
15+
javascript: {
16+
files: {
17+
'index.html': javascript_index_html,
18+
'index.ts': javascript_index_ts,
19+
},
20+
dependencies: {
21+
ionicons: '7.4.0',
22+
},
23+
},
24+
react,
25+
vue,
26+
angular: {
27+
files: {
28+
'src/app/example.component.html': angular_example_component_html,
29+
'src/app/example.component.ts': angular_example_component_ts,
30+
},
31+
dependencies: {
32+
ionicons: '7.4.0',
33+
},
34+
},
35+
}}
36+
size="300px"
37+
src="usage/v8/select/start-end-slots/demo.html"
38+
/>

‎static/usage/v8/select/start-end-slots/javascript/index_html.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-select label-placement="stacked" label="Favorite fruit" value="apple">
5+
<ion-icon slot="start" name="leaf" aria-hidden="true"></ion-icon>
6+
<ion-select-option value="apple">Apple</ion-select-option>
7+
<ion-select-option value="banana">Banana</ion-select-option>
8+
<ion-select-option value="orange">Orange</ion-select-option>
9+
<ion-button fill="clear" slot="end" aria-label="Show/hide password">
10+
<ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
11+
</ion-button>
12+
</ion-select>
13+
</ion-item>
14+
</ion-list>
15+
```

‎static/usage/v8/select/start-end-slots/javascript/index_ts.md

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
```ts
2+
import { defineCustomElements } from '@ionic/core/loader';
3+
4+
import { addIcons } from 'ionicons';
5+
import { eye, leaf } from 'ionicons/icons';
6+
7+
/* Core CSS required for Ionic components to work properly */
8+
import '@ionic/core/css/core.css';
9+
10+
/* Basic CSS for apps built with Ionic */
11+
import '@ionic/core/css/normalize.css';
12+
import '@ionic/core/css/structure.css';
13+
import '@ionic/core/css/typography.css';
14+
15+
/* Optional CSS utils that can be commented out */
16+
import '@ionic/core/css/padding.css';
17+
import '@ionic/core/css/float-elements.css';
18+
import '@ionic/core/css/text-alignment.css';
19+
import '@ionic/core/css/text-transformation.css';
20+
import '@ionic/core/css/flex-utils.css';
21+
import '@ionic/core/css/display.css';
22+
23+
/**
24+
* Ionic Dark Theme
25+
* -----------------------------------------------------
26+
* For more information, please see:
27+
* https://ionicframework.com/docs/theming/dark-mode
28+
*/
29+
30+
// import '@ionic/core/css/palettes/dark.always.css';
31+
// import '@ionic/core/css/palettes/dark.class.css';
32+
import '@ionic/core/css/palettes/dark.system.css';
33+
34+
/* Theme variables */
35+
import './theme/variables.css';
36+
37+
/**
38+
* On Ionicons 7.2+ these icons
39+
* get mapped to a kebab-case key.
40+
* Alternatively, developers can do:
41+
* addIcons({ 'eye': eye, 'leaf': leaf });
42+
*/
43+
addIcons({ eye, leaf });
44+
45+
defineCustomElements();
46+
```

‎static/usage/v8/select/start-end-slots/react.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react';
4+
import { eye, leaf } from 'ionicons/icons';
5+
6+
function Example() {
7+
return (
8+
<IonList>
9+
<IonItem>
10+
<IonSelect labelPlacement="stacked" label="Favorite fruit" value="apple">
11+
<IonIcon slot="start" icon={leaf} aria-hidden="true"></IonIcon>
12+
<IonSelectOption value="apple">Apple</IonSelectOption>
13+
<IonSelectOption value="banana">Banana</IonSelectOption>
14+
<IonSelectOption value="orange">Orange</IonSelectOption>
15+
<IonButton fill="clear" slot="end" aria-label="Show/hide password">
16+
<IonIcon slot="icon-only" icon={eye} aria-hidden="true"></IonIcon>
17+
</IonButton>
18+
</IonSelect>
19+
</IonItem>
20+
</IonList>
21+
);
22+
}
23+
export default Example;
24+
```

‎static/usage/v8/select/start-end-slots/vue.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-item>
5+
<ion-select label-placement="stacked" label="Favorite fruit" value="apple">
6+
<ion-icon slot="start" :icon="leaf" aria-hidden="true"></ion-icon>
7+
<ion-select-option value="apple">Apple</ion-select-option>
8+
<ion-select-option value="banana">Banana</ion-select-option>
9+
<ion-select-option value="orange">Orange</ion-select-option>
10+
<ion-button fill="clear" slot="end" aria-label="Show/hide password">
11+
<ion-icon slot="icon-only" :icon="eye" aria-hidden="true"></ion-icon>
12+
</ion-button>
13+
</ion-select>
14+
</ion-item>
15+
</ion-list>
16+
</template>
17+
18+
<script lang="ts">
19+
import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/vue';
20+
import { eye, leaf } from 'ionicons/icons';
21+
import { defineComponent } from 'vue';
22+
23+
export default defineComponent({
24+
components: {
25+
IonButton,
26+
IonIcon,
27+
IonItem,
28+
IonList,
29+
IonSelect,
30+
IonSelectOption,
31+
},
32+
setup() {
33+
return { eye, leaf };
34+
},
35+
});
36+
</script>
37+
```

‎versioned_docs/version-v7/api/select.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,20 @@ import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/
175175

176176
<InterfaceOptionsExample />
177177

178+
## Start and End Slots
179+
180+
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.
181+
182+
:::note
183+
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.
184+
185+
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.
186+
:::
187+
188+
import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md';
189+
190+
<StartEndSlots />
191+
178192
## Customization
179193

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

0 commit comments

Comments
 (0)