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

docs(demos): clean up blur demo

Browse Source
This commit is contained in:
Brandy Carney
2016-01-27 14:36:07 -05:00
parent 4af0e41f13
commit 779a494c2e
1 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
demos/blur/main.html
View File

@ -3,11 +3,32 @@
<ion-title>Blur</ion-title> <ion-title>Blur</ion-title>
</ion-toolbar> </ion-toolbar>
<ion-content padding style="text-align:center; background: url('bg.jpg') no-repeat transparent; background-size: cover"> <ion-content>
<div class="blur-content">
<button (click)="showBlur=true" primary>Blur</button> <ion-card blur class="blur-card">
<ion-card-header>
<div ion-blur (click)="showBlur=false" *ngIf="showBlur" style="display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8);"> Card
<h2>Blurred!</h2> </ion-card-header>
<ion-card-content>
This card will blur the content behind it.
</ion-card-content>
</ion-card>
</div> </div>
</ion-content> </ion-content>
<style>
.blur-content {
position: absolute;
text-align:center;
background: url('bg.jpg') no-repeat transparent;
background-size: cover;
height: 100%;
width: 100%;
}
.blur-card,
.blur-card ion-card-header {
background: transparent;
color: white;
}
</style>