mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
button refactor
This commit is contained in:
@@ -1,11 +1,10 @@
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
|
||||
import {Button} from 'ionic/components/button/button'
|
||||
|
||||
@Component({ selector: 'ion-view' })
|
||||
@View({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Button]
|
||||
directives: []
|
||||
})
|
||||
export default class IonicApp {}
|
||||
|
||||
@@ -1,60 +1,49 @@
|
||||
|
||||
<div>
|
||||
<a class="button" href="#">a (default)</a>
|
||||
<button class="button">button (default)</button>
|
||||
<button class="button hover">hover</button>
|
||||
<button class="button activated">activated</button>
|
||||
<a button href="#">a[button]</a>
|
||||
<button>button</button>
|
||||
<button class="hover">hover</button>
|
||||
<button class="activated">activated</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a class="button button-primary" href="#">a.primary</a>
|
||||
<button class="button button-primary">button.primary</button>
|
||||
<button class="button button-primary hover">hover</button>
|
||||
<button class="button button-primary activated">activated</button>
|
||||
<a button primary href="#">a[primary]</a>
|
||||
<button primary>button[primary]</button>
|
||||
<button primary class="hover">hover</button>
|
||||
<button primary class="activated">activated</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a class="button button-secondary" href="#">a.secondary</a>
|
||||
<button class="button button-secondary">button.secondary</button>
|
||||
<button class="button button-secondary hover">hover</button>
|
||||
<button class="button button-secondary activated">activated</button>
|
||||
<a button secondary href="#">a[secondary]</a>
|
||||
<button secondary>button[secondary]</button>
|
||||
<button secondary class="hover">hover</button>
|
||||
<button secondary class="activated">activated</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a class="button button-danger" href="#">a.danger</a>
|
||||
<button class="button button-danger">button.danger</button>
|
||||
<button class="button button-danger hover">hover</button>
|
||||
<button class="button button-danger activated">activated</button>
|
||||
<a button danger href="#">a[danger]</a>
|
||||
<button danger>button[danger]</button>
|
||||
<button danger class="hover">hover</button>
|
||||
<button danger class="activated">activated</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a class="button button-light" href="#">a.light</a>
|
||||
<button class="button button-light">button.light</button>
|
||||
<button class="button button-light hover">hover</button>
|
||||
<button class="button button-light activated">activated</button>
|
||||
<a button light href="#">a[light]</a>
|
||||
<button light>button[light]</button>
|
||||
<button light class="hover">hover</button>
|
||||
<button light class="activated">activated</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a class="button button-stable" href="#">a.stable</a>
|
||||
<button class="button button-stable">button.stable</button>
|
||||
<button class="button button-stable hover">hover</button>
|
||||
<button class="button button-stable activated">activated</button>
|
||||
<a button stable href="#">a[stable]</a>
|
||||
<button stable>button[stable]</button>
|
||||
<button stable class="hover">hover</button>
|
||||
<button stable class="activated">activated</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a class="button button-dark" href="#">a.dark</a>
|
||||
<button class="button button-dark">button.dark</button>
|
||||
<button class="button button-dark hover">hover</button>
|
||||
<button class="button button-dark activated">activated</button>
|
||||
</div>
|
||||
|
||||
<h2>With Properties</h2>
|
||||
|
||||
<div>
|
||||
<button primary>button.primary</button>
|
||||
<button secondary>button.secondary</button>
|
||||
<button stable>button.stable</button>
|
||||
<button light>button.light</button>
|
||||
<button dark>button.dark</button>
|
||||
<button danger>button.danger</button>
|
||||
<a button dark href="#">a[dark]</a>
|
||||
<button dark>button[dark]</button>
|
||||
<button dark class="hover">hover</button>
|
||||
<button dark class="activated">activated</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user