javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 05:21:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(button): add icon-only slot

Browse Source
This commit is contained in:
Adam Bradley
2017-06-16 13:40:38 -05:00
parent b2036ad956
commit cf27c0b367
8 changed files with 32 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/app/app.scss
View File

@ -439,9 +439,10 @@ ion-card-content,
ion-card-header,
ion-card-title,
ion-gesture,
ion-toggle,
ion-icon,
ion-slides,
ion-slide {
ion-slide,
ion-toggle {
visibility: hidden;
}

19
src/components/button/button-icon.scss
View File

@ -1,31 +1,28 @@
@import "../../themes/ionic.globals";
// Button Icons
// --------------------------------------------------
.button ion-icon[slot="start"] {
.button ion-icon {
pointer-events: none;
}
ion-icon[slot="start"] {
@include button-icon();
@include padding-horizontal(null, .3em);
}
.button ion-icon[slot="end"] {
ion-icon[slot="end"] {
@include button-icon();
@include padding-horizontal(.4em, null);
}
[icon-only] .button {
ion-icon[slot="icon-only"] {
@include padding(0);
min-width: .9em;
}
[icon-only] ion-icon {
@include padding(0, .5em);
font-size: 1.8em;
line-height: .67;
pointer-events: none;
}

2
src/components/button/button.ios.scss
View File

@ -268,7 +268,7 @@ $button-ios-strong-font-weight: 600 !default;
}
}
[icon-only] .button-small-ios ion-icon {
.button-small-ios ion-icon[slot="icon-only"] {
font-size: $button-ios-small-icon-font-size;
}

4
src/components/button/button.md.scss
View File

@ -327,7 +327,7 @@ $button-md-strong-font-weight: bold !default;
}
}
[icon-only] .button-small-md ion-icon {
.button-small-md ion-icon[slot="icon-only"] {
font-size: $button-md-small-icon-font-size;
}
@ -461,7 +461,7 @@ $button-md-strong-font-weight: bold !default;
}
}
[icon-only] .button-md {
.button-md ion-icon[slot="icon-only"] {
@include padding(0);
}

5
src/components/button/button.tsx
View File

@ -48,8 +48,8 @@ import { CssClassObject } from '../../util/interfaces';
* <ion-icon slot="end" name="star"></ion-icon>
* </ion-button>
*
* <ion-button icon-only>
* <ion-icon name="star"></ion-icon>
* <ion-button>
* <ion-icon slot="icon-only" name="star"></ion-icon>
* </ion-button>
*
* <!-- Sizes -->
@ -299,6 +299,7 @@ export class Button {
return (
<TagType class={buttonClasses} disabled={this.disabled}>
<span class='button-inner'>
<slot name='icon-only'></slot>
<slot name='start'></slot>
<slot></slot>
<slot name='end'></slot>

4
src/components/button/button.wp.scss
View File

@ -266,7 +266,7 @@ $button-wp-strong-font-weight: bold !default;
}
}
[icon-only] .button-small-wp ion-icon {
.button-small-wp ion-icon[slot="icon-only"] {
font-size: $button-wp-small-icon-font-size;
}
@ -380,7 +380,7 @@ $button-wp-strong-font-weight: bold !default;
}
}
[icon-only] .button-wp {
.button-wp ion-icon[slot="icon-only"] {
@include padding(0);
}

24
src/components/button/test/icons/pages/page-one/page-one.html
View File

@ -32,11 +32,11 @@
</div>
<div>
<ion-button icon-only>
<ion-icon name="flag"></ion-icon>
<ion-button>
<ion-icon slot="icon-only" name="flag"></ion-icon>
</ion-button>
<ion-button href="#" icon-only>
<ion-icon name="flag"></ion-icon>
<ion-button href="#">
<ion-icon slot="icon-only" name="flag"></ion-icon>
</ion-button>
</div>
@ -63,11 +63,11 @@
</div>
<div>
<ion-button large icon-only>
<ion-icon name="heart"></ion-icon>
<ion-button large>
<ion-icon slot="icon-only" name="heart"></ion-icon>
</ion-button>
<ion-button href="#" large icon-only>
<ion-icon name="heart"></ion-icon>
<ion-button href="#" large>
<ion-icon slot="icon-only" name="heart"></ion-icon>
</ion-button>
</div>
@ -94,11 +94,11 @@
</div>
<div>
<ion-button small icon-only>
<ion-icon name="search"></ion-icon>
<ion-button small>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
<ion-button href="#" small icon-only>
<ion-icon name="search"></ion-icon>
<ion-button href="#" small>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</div>

4
src/components/icon/icon.scss
View File

@ -12,10 +12,6 @@ ion-icon {
font-size: 1.2em;
}
ion-icon.hydrated {
visibility: inherit;
}
ion-icon[small] {
min-height: 1.1em;