javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(button): allow any element type to use the "icon-only" slot (#22168)

Browse Source
This commit is contained in:
Matthias Max
2020-10-07 00:40:29 +02:00
committed by GitHub
parent 1878c8e7e0
commit c454c84ef4
2 changed files with 20 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/button/button.tsx
View File

@ -137,7 +137,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
}
private get hasIconOnly() {
return !!this.el.querySelector('ion-icon[slot="icon-only"]');
return !!this.el.querySelector('[slot="icon-only"]');
}
private get rippleType() {

37
core/src/components/button/test/icon/index.html
View File

@ -17,6 +17,14 @@
<ion-header>
<ion-toolbar>
<ion-title>Button - Icon</ion-title>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="heart"></ion-icon>
</ion-button>
<ion-button class="avatar-button">
<img slot="icon-only" src="/src/components/avatar/test/avatar.svg">
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
@ -26,8 +34,6 @@
<ion-icon name="home" slot="start"></ion-icon>
Left Icon
</ion-button>
</p>
<p>
<ion-button href="#">
<ion-icon name="home" slot="start"></ion-icon>
Left Icon
@ -38,8 +44,6 @@
<ion-icon name="star" slot="end"></ion-icon>
Right Icon
</ion-button>
</p>
<p>
<ion-button href="#">
<ion-icon name="star" slot="end"></ion-icon>
Right Icon
@ -49,8 +53,6 @@
<ion-button>
<ion-icon name="flag" slot="icon-only"></ion-icon>
</ion-button>
</p>
<p>
<ion-button href="#">
<ion-icon name="flag" slot="icon-only"></ion-icon>
</ion-button>
@ -60,8 +62,6 @@
<ion-icon name="help-circle" slot="start"></ion-icon>
Left, Large
</ion-button>
</p>
<p>
<ion-button size="large" href="#">
<ion-icon name="help-circle" slot="start"></ion-icon>
Left, Large
@ -72,8 +72,6 @@
<ion-icon name="settings" slot="end"></ion-icon>
Right, Large
</ion-button>
</p>
<p>
<ion-button size="large" href="#">
<ion-icon name="settings" slot="end"></ion-icon>
Right, Large
@ -83,8 +81,6 @@
<ion-button size="large">
<ion-icon name="heart" slot="icon-only"></ion-icon>
</ion-button>
</p>
<p>
<ion-button size="large" href="#">
<ion-icon name="heart" slot="icon-only"></ion-icon>
</ion-button>
@ -94,8 +90,6 @@
<ion-icon name="checkmark" slot="start"></ion-icon>
Left, Small
</ion-button>
</p>
<p>
<ion-button size="small" href="#">
<ion-icon name="checkmark" slot="start"></ion-icon>
Left, Small
@ -106,8 +100,6 @@
<ion-icon name="arrow-forward" slot="end"></ion-icon>
Right, Small
</ion-button>
</p>
<p>
<ion-button size="small" href="#">
<ion-icon name="arrow-forward" slot="end"></ion-icon>
Right, Small
@ -117,8 +109,6 @@
<ion-button size="small">
<ion-icon name="search" slot="icon-only"></ion-icon>
</ion-button>
</p>
<p>
<ion-button size="small" href="#">
<ion-icon name="search" slot="icon-only"></ion-icon>
</ion-button>
@ -128,4 +118,15 @@
</ion-app>
</body>
<style>
.avatar-button img {
border-radius: 50%;
}
.ios .avatar-button img {
width: 26px;
height: 26px;
}
</style>
</html>