Skip to content

Commit 7d40ea8

Browse files
brandyscarneybrandyscarney
authored
docs(button): update shape and icons playgrounds to showcase circular icon buttons (#3594)
1 parent dce9de2 commit 7d40ea8

File tree

10 files changed

+203
-18
lines changed

10 files changed

+203
-18
lines changed

‎static/usage/v8/button/icons/angular.md

+30-2
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,43 @@
11
```html
2+
<ion-button size="small">
3+
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
4+
</ion-button>
5+
26
<ion-button>
7+
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
8+
</ion-button>
9+
10+
<ion-button size="large">
11+
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
12+
</ion-button>
13+
14+
<ion-button size="small">
315
<ion-icon slot="start" name="star"></ion-icon>
416
Left Icon
517
</ion-button>
618

719
<ion-button>
20+
<ion-icon slot="start" name="star"></ion-icon>
21+
Left Icon
22+
</ion-button>
23+
24+
<ion-button size="large">
25+
<ion-icon slot="start" name="star"></ion-icon>
26+
Left Icon
27+
</ion-button>
28+
29+
<ion-button size="small">
830
Right Icon
9-
<ion-icon slot="end" name="star"></ion-icon>
31+
<ion-icon slot="end" name="heart"></ion-icon>
1032
</ion-button>
1133

1234
<ion-button>
13-
<ion-icon slot="icon-only" name="star"></ion-icon>
35+
Right Icon
36+
<ion-icon slot="end" name="heart"></ion-icon>
37+
</ion-button>
38+
39+
<ion-button size="large">
40+
Right Icon
41+
<ion-icon slot="end" name="heart"></ion-icon>
1442
</ion-button>
1543
```

‎static/usage/v8/button/icons/demo.html

+38-2
Original file line numberDiff line numberDiff line change
@@ -8,24 +8,60 @@
88
<script src="../../common.js"></script>
99
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"></script>
1010
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css" />
11+
12+
<style>
13+
.container {
14+
display: grid;
15+
grid-template-columns: repeat(3, auto);
16+
justify-items: center;
17+
}
18+
</style>
1119
</head>
1220

1321
<body>
1422
<ion-app>
1523
<ion-content>
1624
<div class="container">
25+
<ion-button size="small">
26+
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
27+
</ion-button>
28+
1729
<ion-button>
30+
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
31+
</ion-button>
32+
33+
<ion-button size="large">
34+
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
35+
</ion-button>
36+
37+
<ion-button size="small">
1838
<ion-icon slot="start" name="star"></ion-icon>
1939
Left Icon
2040
</ion-button>
2141

2242
<ion-button>
43+
<ion-icon slot="start" name="star"></ion-icon>
44+
Left Icon
45+
</ion-button>
46+
47+
<ion-button size="large">
48+
<ion-icon slot="start" name="star"></ion-icon>
49+
Left Icon
50+
</ion-button>
51+
52+
<ion-button size="small">
2353
Right Icon
24-
<ion-icon slot="end" name="star"></ion-icon>
54+
<ion-icon slot="end" name="heart"></ion-icon>
2555
</ion-button>
2656

2757
<ion-button>
28-
<ion-icon slot="icon-only" name="star"></ion-icon>
58+
Right Icon
59+
<ion-icon slot="end" name="heart"></ion-icon>
60+
</ion-button>
61+
62+
<ion-button size="large">
63+
Right Icon
64+
<ion-icon slot="end" name="heart"></ion-icon>
2965
</ion-button>
3066
</div>
3167
</ion-content>

‎static/usage/v8/button/icons/javascript.md

+30-2
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,43 @@
11
```html
2+
<ion-button size="small">
3+
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
4+
</ion-button>
5+
26
<ion-button>
7+
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
8+
</ion-button>
9+
10+
<ion-button size="large">
11+
<ion-icon slot="icon-only" ios="logo-apple" md="settings-sharp"></ion-icon>
12+
</ion-button>
13+
14+
<ion-button size="small">
315
<ion-icon slot="start" name="star"></ion-icon>
416
Left Icon
517
</ion-button>
618

719
<ion-button>
20+
<ion-icon slot="start" name="star"></ion-icon>
21+
Left Icon
22+
</ion-button>
23+
24+
<ion-button size="large">
25+
<ion-icon slot="start" name="star"></ion-icon>
26+
Left Icon
27+
</ion-button>
28+
29+
<ion-button size="small">
830
Right Icon
9-
<ion-icon slot="end" name="star"></ion-icon>
31+
<ion-icon slot="end" name="heart"></ion-icon>
1032
</ion-button>
1133

1234
<ion-button>
13-
<ion-icon slot="icon-only" name="star"></ion-icon>
35+
Right Icon
36+
<ion-icon slot="end" name="heart"></ion-icon>
37+
</ion-button>
38+
39+
<ion-button size="large">
40+
Right Icon
41+
<ion-icon slot="end" name="heart"></ion-icon>
1442
</ion-button>
1543
```

‎static/usage/v8/button/icons/react.md

+31-3
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,51 @@
11
```tsx
22
import React from 'react';
33
import { IonButton, IonIcon } from '@ionic/react';
4-
import { star } from 'ionicons/icons';
4+
import { heart, logoApple, settingsSharp, star } from 'ionicons/icons';
55

66
function Example() {
77
return (
88
<>
9+
<IonButton size="small">
10+
<IonIcon slot="icon-only" ios={logoApple} md={settingsSharp}></IonIcon>
11+
</IonButton>
12+
913
<IonButton>
14+
<IonIcon slot="icon-only" ios={logoApple} md={settingsSharp}></IonIcon>
15+
</IonButton>
16+
17+
<IonButton size="large">
18+
<IonIcon slot="icon-only" ios={logoApple} md={settingsSharp}></IonIcon>
19+
</IonButton>
20+
21+
<IonButton size="small">
1022
<IonIcon slot="start" icon={star}></IonIcon>
1123
Left Icon
1224
</IonButton>
1325

1426
<IonButton>
27+
<IonIcon slot="start" icon={star}></IonIcon>
28+
Left Icon
29+
</IonButton>
30+
31+
<IonButton size="large">
32+
<IonIcon slot="start" icon={star}></IonIcon>
33+
Left Icon
34+
</IonButton>
35+
36+
<IonButton size="small">
1537
Right Icon
16-
<IonIcon slot="end" icon={star}></IonIcon>
38+
<IonIcon slot="end" icon={heart}></IonIcon>
1739
</IonButton>
1840

1941
<IonButton>
20-
<IonIcon slot="icon-only" icon={star}></IonIcon>
42+
Right Icon
43+
<IonIcon slot="end" icon={heart}></IonIcon>
44+
</IonButton>
45+
46+
<IonButton size="large">
47+
Right Icon
48+
<IonIcon slot="end" icon={heart}></IonIcon>
2149
</IonButton>
2250
</>
2351
);

‎static/usage/v8/button/icons/vue.md

+32-4
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,57 @@
11
```html
22
<template>
3+
<ion-button size="small">
4+
<ion-icon slot="icon-only" :ios="logoApple" :md="settingsSharp"></ion-icon>
5+
</ion-button>
6+
37
<ion-button>
8+
<ion-icon slot="icon-only" :ios="logoApple" :md="settingsSharp"></ion-icon>
9+
</ion-button>
10+
11+
<ion-button size="large">
12+
<ion-icon slot="icon-only" :ios="logoApple" :md="settingsSharp"></ion-icon>
13+
</ion-button>
14+
15+
<ion-button size="small">
416
<ion-icon slot="start" :icon="star"></ion-icon>
517
Left Icon
618
</ion-button>
719

820
<ion-button>
21+
<ion-icon slot="start" :icon="star"></ion-icon>
22+
Left Icon
23+
</ion-button>
24+
25+
<ion-button size="large">
26+
<ion-icon slot="start" :icon="star"></ion-icon>
27+
Left Icon
28+
</ion-button>
29+
30+
<ion-button size="small">
931
Right Icon
10-
<ion-icon slot="end" :icon="star"></ion-icon>
32+
<ion-icon slot="end" :icon="heart"></ion-icon>
1133
</ion-button>
1234

1335
<ion-button>
14-
<ion-icon slot="icon-only" :icon="star"></ion-icon>
36+
Right Icon
37+
<ion-icon slot="end" :icon="heart"></ion-icon>
38+
</ion-button>
39+
40+
<ion-button size="large">
41+
Right Icon
42+
<ion-icon slot="end" :icon="heart"></ion-icon>
1543
</ion-button>
1644
</template>
1745

1846
<script lang="ts">
1947
import { IonButton, IonIcon } from '@ionic/vue';
2048
import { defineComponent } from 'vue';
21-
import { star } from 'ionicons/icons';
49+
import { heart, logoApple, settingsSharp, star } from 'ionicons/icons';
2250
2351
export default defineComponent({
2452
components: { IonButton, IonIcon },
2553
setup() {
26-
return { star };
54+
return { heart, logoApple, settingsSharp, star };
2755
},
2856
});
2957
</script>

‎static/usage/v8/button/shape/angular.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
```html
2-
<ion-button>Default</ion-button> <ion-button shape="round">Round</ion-button>
2+
<ion-button>Default</ion-button>
3+
<ion-button shape="round">Round</ion-button>
4+
<ion-button>
5+
<ion-icon slot="icon-only" name="heart"></ion-icon>
6+
</ion-button>
7+
<ion-button shape="round">
8+
<ion-icon slot="icon-only" name="heart"></ion-icon>
9+
</ion-button>
310
```

‎static/usage/v8/button/shape/demo.html

+6
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,12 @@
1616
<div class="container">
1717
<ion-button>Default</ion-button>
1818
<ion-button shape="round">Round</ion-button>
19+
<ion-button>
20+
<ion-icon slot="icon-only" name="heart"></ion-icon>
21+
</ion-button>
22+
<ion-button shape="round">
23+
<ion-icon slot="icon-only" name="heart"></ion-icon>
24+
</ion-button>
1925
</div>
2026
</ion-content>
2127
</ion-app>

‎static/usage/v8/button/shape/javascript.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
11
```html
2-
<ion-button>Default</ion-button> <ion-button shape="round">Round</ion-button>
2+
<ion-button>Default</ion-button>
3+
<ion-button shape="round">Round</ion-button>
4+
<ion-button>
5+
<ion-icon slot="icon-only" name="heart"></ion-icon>
6+
</ion-button>
7+
<ion-button shape="round">
8+
<ion-icon slot="icon-only" name="heart"></ion-icon>
9+
</ion-button>
310
```

‎static/usage/v8/button/shape/react.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
```tsx
22
import React from 'react';
3-
import { IonButton } from '@ionic/react';
3+
import { IonButton, IonIcon } from '@ionic/react';
4+
import { heart } from 'ionicons/icons';
45

56
function Example() {
67
return (
78
<>
89
<IonButton>Default</IonButton>
910
<IonButton shape="round">Round</IonButton>
11+
<IonButton>
12+
<IonIcon slot="icon-only" icon={heart}></IonIcon>
13+
</IonButton>
14+
<IonButton shape="round">
15+
<IonIcon slot="icon-only" icon={heart}></IonIcon>
16+
</IonButton>
1017
</>
1118
);
1219
}

‎static/usage/v8/button/shape/vue.md

+12-2
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,24 @@
22
<template>
33
<ion-button>Default</ion-button>
44
<ion-button shape="round">Round</ion-button>
5+
<ion-button>
6+
<ion-icon slot="icon-only" :icon="heart"></ion-icon>
7+
</ion-button>
8+
<ion-button shape="round">
9+
<ion-icon slot="icon-only" :icon="heart"></ion-icon>
10+
</ion-button>
511
</template>
612

713
<script lang="ts">
8-
import { IonButton } from '@ionic/vue';
14+
import { IonButton, IonIcon } from '@ionic/vue';
915
import { defineComponent } from 'vue';
16+
import { heart } from 'ionicons/icons';
1017
1118
export default defineComponent({
12-
components: { IonButton },
19+
components: { IonButton, IonIcon },
20+
setup() {
21+
return { heart };
22+
},
1323
});
1424
</script>
1525
```

0 commit comments

Comments
 (0)