Skip to content

Commit b01e290

Browse files
brandyscarneybrandyscarney
authored
docs(reorder): update icon playgrounds to use addIcons usage (#3749)
1 parent edec26b commit b01e290

File tree

8 files changed

+195
-8
lines changed

8 files changed

+195
-8
lines changed

‎static/usage/v7/reorder/custom-icon/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import { Component } from '@angular/core';
33

44
import { ItemReorderEventDetail } from '@ionic/angular';
55

6+
import { addIcons } from 'ionicons';
7+
import { pizza } from 'ionicons/icons';
8+
69
@Component({
710
selector: 'app-example',
811
templateUrl: 'example.component.html',
912
})
1013
export class ExampleComponent {
14+
constructor() {
15+
/**
16+
* Any icons you want to use in your application
17+
* can be registered in app.component.ts and then
18+
* referenced by name anywhere in your application.
19+
*/
20+
addIcons({ pizza });
21+
}
22+
1123
handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
1224
// The `from` and `to` properties contain the index of the item
1325
// when the drag started and ended, respectively

‎static/usage/v7/reorder/custom-icon/index.md

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
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';
68

@@ -10,17 +12,28 @@ import angular_example_component_html from './angular/example_component_html.md'
1012
<Playground
1113
version="7"
1214
code={{
13-
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+
},
1424
react,
1525
vue,
1626
angular: {
1727
files: {
1828
'src/app/example.component.ts': angular_example_component_ts,
1929
'src/app/example.component.html': angular_example_component_html,
2030
},
31+
dependencies: {
32+
ionicons: '7.4.0',
33+
},
2134
},
2235
}}
23-
src="usage/v7/reorder/custom-icon/demo.html"
2436
size="300px"
37+
src="usage/v7/reorder/custom-icon/demo.html"
2538
showConsole={true}
2639
/>

‎static/usage/v7/reorder/custom-icon/javascript.md renamed to ‎static/usage/v7/reorder/custom-icon/javascript/index_html.md

File renamed without changes.

‎static/usage/v7/reorder/custom-icon/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 { pizza } 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+ this icon
28+
* gets mapped to a "pizza" key.
29+
* Alternatively, developers can do:
30+
* addIcons({ 'pizza': pizza });
31+
*/
32+
addIcons({ pizza });
33+
34+
defineCustomElements();
35+
```

‎static/usage/v8/reorder/custom-icon/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,23 @@ import { Component } from '@angular/core';
33

44
import { ItemReorderEventDetail } from '@ionic/angular';
55

6+
import { addIcons } from 'ionicons';
7+
import { pizza } from 'ionicons/icons';
8+
69
@Component({
710
selector: 'app-example',
811
templateUrl: 'example.component.html',
912
})
1013
export class ExampleComponent {
14+
constructor() {
15+
/**
16+
* Any icons you want to use in your application
17+
* can be registered in app.component.ts and then
18+
* referenced by name anywhere in your application.
19+
*/
20+
addIcons({ pizza });
21+
}
22+
1123
handleReorder(ev: CustomEvent<ItemReorderEventDetail>) {
1224
// The `from` and `to` properties contain the index of the item
1325
// when the drag started and ended, respectively

‎static/usage/v8/reorder/custom-icon/index.md

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,39 @@
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';
68

7-
import angular_example_component_ts from './angular/example_component_ts.md';
89
import angular_example_component_html from './angular/example_component_html.md';
10+
import angular_example_component_ts from './angular/example_component_ts.md';
911

1012
<Playground
1113
version="8"
1214
code={{
13-
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+
},
1424
react,
1525
vue,
1626
angular: {
1727
files: {
18-
'src/app/example.component.ts': angular_example_component_ts,
1928
'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',
2033
},
2134
},
2235
}}
23-
src="usage/v8/reorder/custom-icon/demo.html"
2436
size="300px"
37+
src="usage/v8/reorder/custom-icon/demo.html"
2538
showConsole={true}
2639
/>

‎static/usage/v8/reorder/custom-icon/javascript/index_html.md

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
```html
2+
<ion-list>
3+
<!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
4+
<ion-reorder-group disabled="false">
5+
<ion-item>
6+
<ion-label> Item 1 </ion-label>
7+
<ion-reorder slot="end">
8+
<ion-icon name="pizza"></ion-icon>
9+
</ion-reorder>
10+
</ion-item>
11+
12+
<ion-item>
13+
<ion-label> Item 2 </ion-label>
14+
<ion-reorder slot="end">
15+
<ion-icon name="pizza"></ion-icon>
16+
</ion-reorder>
17+
</ion-item>
18+
19+
<ion-item>
20+
<ion-label> Item 3 </ion-label>
21+
<ion-reorder slot="end">
22+
<ion-icon name="pizza"></ion-icon>
23+
</ion-reorder>
24+
</ion-item>
25+
26+
<ion-item>
27+
<ion-label> Item 4 </ion-label>
28+
<ion-reorder slot="end">
29+
<ion-icon name="pizza"></ion-icon>
30+
</ion-reorder>
31+
</ion-item>
32+
33+
<ion-item>
34+
<ion-label> Item 5 </ion-label>
35+
<ion-reorder slot="end">
36+
<ion-icon name="pizza"></ion-icon>
37+
</ion-reorder>
38+
</ion-item>
39+
</ion-reorder-group>
40+
</ion-list>
41+
42+
<script>
43+
const reorderGroup = document.querySelector('ion-reorder-group');
44+
45+
reorderGroup.addEventListener('ionItemReorder', ({ detail }) => {
46+
// The `from` and `to` properties contain the index of the item
47+
// when the drag started and ended, respectively
48+
console.log('Dragged from index', detail.from, 'to', detail.to);
49+
50+
// Finish the reorder and position the item in the DOM based on
51+
// where the gesture ended. This method can also be called directly
52+
// by the reorder group
53+
detail.complete();
54+
});
55+
</script>
56+
```

‎static/usage/v8/reorder/custom-icon/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 { pizza } 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+ this icon
39+
* gets mapped to a "pizza" key.
40+
* Alternatively, developers can do:
41+
* addIcons({ 'pizza': pizza });
42+
*/
43+
addIcons({ pizza });
44+
45+
defineCustomElements();
46+
```

0 commit comments

Comments
 (0)