Skip to content

Commit 6067b63

Browse files
brandyscarneybrandyscarney
authored
docs(input): update icon playgrounds to use addIcons usage (#3741)
1 parent 9ee3566 commit 6067b63

File tree

14 files changed

+296
-5
lines changed

14 files changed

+296
-5
lines changed

‎docs/api/input.md‎

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

165-
import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md';
165+
import StartEndSlots from '@site/static/usage/v8/input/start-end-slots/index.md';
166166

167167
<StartEndSlots />
168168

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

File renamed without changes.

‎static/usage/v7/input/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, lockClosed } 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, lockClosed });
20+
}
21+
}
22+
```

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

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,37 @@
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
}}
1636
src="usage/v7/input/start-end-slots/demo.html"
1737
/>

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

File renamed without changes.

‎static/usage/v7/input/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, lockClosed } 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, 'lock-closed': lockClosed });
31+
*/
32+
addIcons({ eye, lockClosed });
33+
34+
defineCustomElements();
35+
```

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

Lines changed: 12 additions & 0 deletions
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/v8/input/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, lockClosed } 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, lockClosed });
20+
}
21+
}
22+
```

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

Lines changed: 31 additions & 0 deletions
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@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+
</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/v8/input/start-end-slots/index.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
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+
src="usage/v8/input/start-end-slots/demo.html"
37+
/>

0 commit comments

Comments
 (0)