javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +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-header,
ion-card-title, ion-card-title,
ion-gesture, ion-gesture,
ion-toggle, ion-icon,
ion-slides, ion-slides,
ion-slide { ion-slide,
ion-toggle {
visibility: hidden; visibility: hidden;
} }

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

@ -1,31 +1,28 @@
@import "../../themes/ionic.globals"; @import "../../themes/ionic.globals";
// Button Icons // Button Icons
// -------------------------------------------------- // --------------------------------------------------
.button ion-icon[slot="start"] { .button ion-icon {
pointer-events: none;
}
ion-icon[slot="start"] {
@include button-icon(); @include button-icon();
@include padding-horizontal(null, .3em); @include padding-horizontal(null, .3em);
} }
.button ion-icon[slot="end"] { ion-icon[slot="end"] {
@include button-icon(); @include button-icon();
@include padding-horizontal(.4em, null); @include padding-horizontal(.4em, null);
} }
[icon-only] .button { ion-icon[slot="icon-only"] {
@include padding(0); @include padding(0);
min-width: .9em;
}
[icon-only] ion-icon {
@include padding(0, .5em);
font-size: 1.8em; font-size: 1.8em;
line-height: .67; 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; 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; 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); @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-icon slot="end" name="star"></ion-icon>
* </ion-button> * </ion-button>
* *
* <ion-button icon-only> * <ion-button>
* <ion-icon name="star"></ion-icon> * <ion-icon slot="icon-only" name="star"></ion-icon>
* </ion-button> * </ion-button>
* *
* <!-- Sizes --> * <!-- Sizes -->
@ -299,6 +299,7 @@ export class Button {
return ( return (
<TagType class={buttonClasses} disabled={this.disabled}> <TagType class={buttonClasses} disabled={this.disabled}>
<span class='button-inner'> <span class='button-inner'>
<slot name='icon-only'></slot>
<slot name='start'></slot> <slot name='start'></slot>
<slot></slot> <slot></slot>
<slot name='end'></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; 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); @include padding(0);
} }

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

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

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

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