mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
@@ -24,7 +24,7 @@ $button-fab-size: 56px !default;
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
icon {
|
||||
ion-icon {
|
||||
flex: 1;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
|
||||
@@ -4,14 +4,14 @@
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
.button-icon-left icon {
|
||||
.button-icon-left ion-icon {
|
||||
padding-right: 0.3em;
|
||||
font-size: 1.4em;
|
||||
line-height: 0.67;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.button-icon-right icon {
|
||||
.button-icon-right ion-icon {
|
||||
padding-left: 0.4em;
|
||||
font-size: 1.4em;
|
||||
line-height: 0.67;
|
||||
@@ -22,7 +22,7 @@
|
||||
padding: 0;
|
||||
min-width: 0.9em;
|
||||
|
||||
icon {
|
||||
ion-icon {
|
||||
padding: 0 0.5em;
|
||||
font-size: 1.8em;
|
||||
line-height: 0.67;
|
||||
|
||||
@@ -85,7 +85,7 @@ $button-ios-small-icon-font-size: 1.3em !default;
|
||||
font-size: $button-ios-small-font-size;
|
||||
}
|
||||
|
||||
.button-small.button-icon-only icon {
|
||||
.button-small.button-icon-only ion-icon {
|
||||
font-size: $button-ios-small-icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
@@ -104,7 +104,7 @@ $button-md-small-icon-font-size: 1.4em !default;
|
||||
font-size: $button-md-small-font-size;
|
||||
}
|
||||
|
||||
.button-small.button-icon-only icon {
|
||||
.button-small.button-icon-only ion-icon {
|
||||
font-size: $button-md-small-icon-font-size;
|
||||
}
|
||||
|
||||
|
||||
@@ -123,12 +123,12 @@ export class Button {
|
||||
}
|
||||
|
||||
} else if (childNode.nodeType === 1) {
|
||||
if (childNode.nodeName === 'ICON') {
|
||||
if (childNode.nodeName === 'ION-ICON') {
|
||||
// icon element node
|
||||
nodes.push(ICON);
|
||||
|
||||
} else {
|
||||
// element other than an <icon>
|
||||
// element other than an <ion-icon>
|
||||
nodes.push(TEXT);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,8 +11,8 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button block href="#"><icon help-circle></icon> a[button][block] icon</a>
|
||||
<button block><icon help-circle></icon> button[block] icon</button>
|
||||
<a button block href="#"><ion-icon name="help-circle"></ion-icon> a[button][block] icon</a>
|
||||
<button block><ion-icon name="help-circle"></ion-icon> button[block] icon</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
|
||||
<button fab fab-left fab-top>
|
||||
<icon add></icon>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</button>
|
||||
|
||||
<button fab fab-center fab-top secondary>
|
||||
<icon add></icon>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</button>
|
||||
|
||||
<button fab fab-right fab-top danger>
|
||||
<icon add></icon>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</button>
|
||||
|
||||
<button fab fab-left fab-bottom light>
|
||||
<icon add></icon>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</button>
|
||||
|
||||
<button fab fab-center fab-bottom primary>
|
||||
<icon add></icon>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</button>
|
||||
|
||||
<button fab fab-right fab-bottom dark>
|
||||
<icon add></icon>
|
||||
<ion-icon name="add"></ion-icon>
|
||||
</button>
|
||||
|
||||
@@ -7,11 +7,11 @@
|
||||
|
||||
<div>
|
||||
<button>
|
||||
<icon home></icon>
|
||||
<ion-icon name="home"></ion-icon>
|
||||
Left Icon
|
||||
</button>
|
||||
<a button>
|
||||
<icon home></icon>
|
||||
<ion-icon name="home"></ion-icon>
|
||||
Left Icon
|
||||
</a>
|
||||
</div>
|
||||
@@ -19,30 +19,30 @@
|
||||
<div>
|
||||
<button>
|
||||
Right Icon
|
||||
<icon star></icon>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</button>
|
||||
<a button>
|
||||
Right Icon
|
||||
<icon star></icon>
|
||||
<ion-icon name="star"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button>
|
||||
<icon flag></icon>
|
||||
<ion-icon name="flag"></ion-icon>
|
||||
</button>
|
||||
<a button>
|
||||
<icon flag></icon>
|
||||
<ion-icon name="flag"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button large>
|
||||
<icon help-circle></icon>
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
Left, Large
|
||||
</button>
|
||||
<a button large>
|
||||
<icon help-circle></icon>
|
||||
<ion-icon name="help-circle"></ion-icon>
|
||||
Left, Large
|
||||
</a>
|
||||
</div>
|
||||
@@ -50,30 +50,30 @@
|
||||
<div>
|
||||
<button large>
|
||||
Right, Large
|
||||
<icon settings></icon>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</button>
|
||||
<a button large>
|
||||
Right, Large
|
||||
<icon settings></icon>
|
||||
<ion-icon name="settings"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button large>
|
||||
<icon heart></icon>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</button>
|
||||
<a button large>
|
||||
<icon heart></icon>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button small>
|
||||
<icon checkmark></icon>
|
||||
<ion-icon name="checkmark"></ion-icon>
|
||||
Left, Small
|
||||
</button>
|
||||
<a button small>
|
||||
<icon checkmark></icon>
|
||||
<ion-icon name="checkmark"></ion-icon>
|
||||
Left, Small
|
||||
</a>
|
||||
</div>
|
||||
@@ -81,20 +81,20 @@
|
||||
<div>
|
||||
<button small>
|
||||
Right, Small
|
||||
<icon arrow-forward></icon>
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
<a button small>
|
||||
Right, Small
|
||||
<icon arrow-forward></icon>
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button small>
|
||||
<icon search></icon>
|
||||
<ion-icon name="search"></ion-icon>
|
||||
</button>
|
||||
<a button small>
|
||||
<icon search></icon>
|
||||
<ion-icon name="search"></ion-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user