mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
test(button): add test for raised buttons
This commit is contained in:
21
ionic/components/button/test/raised/index.ts
Normal file
21
ionic/components/button/test/raised/index.ts
Normal file
@ -0,0 +1,21 @@
|
||||
import {App, IonicApp} from 'ionic-angular';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor(app: IonicApp) {
|
||||
app.setTitle('Basic Buttons');
|
||||
|
||||
this.testingColors = ['primary', 'secondary', 'danger', 'dark'];
|
||||
this.testingColorIndex = 0;
|
||||
this.chgColor();
|
||||
}
|
||||
|
||||
chgColor() {
|
||||
this.btnColor = this.testingColors[this.testingColorIndex];
|
||||
console.log('dynamic btnColor', this.btnColor);
|
||||
this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
|
||||
}
|
||||
}
|
41
ionic/components/button/test/raised/main.html
Normal file
41
ionic/components/button/test/raised/main.html
Normal file
@ -0,0 +1,41 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>Raised Buttons</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content padding style="text-align:center">
|
||||
|
||||
<p>
|
||||
<button raised><span>Default</span></button>
|
||||
<button raised raised class="activated">Default.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button raised outline>Outline</button>
|
||||
<button raised outline class="activated">Outline.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button raised clear>Clear</button>
|
||||
<button raised clear class="activated">Clear.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button raised fab style="position: relative">FAB</button>
|
||||
<button raised fab style="position: relative" class="activated">FAB</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button raised round>Round</button>
|
||||
<button raised round class="activated">Round.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button raised block>Block</button>
|
||||
<button raised block class="activated">Block.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button raised clear disabled>Clear Disabled</button>
|
||||
</p>
|
||||
</ion-content>
|
Reference in New Issue
Block a user