javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(thumbnail): ion-thumbnail element

Browse Source
This commit is contained in:
Adam Bradley
2015-09-18 10:57:43 -05:00
parent 7da2afb754
commit d8b1bab715
7 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ionic/components/card/modes/ios.scss
View File

@@ -104,9 +104,13 @@ ion-card {
}
}
.thumbnail {
max-width: $item-ios-thumbnail-size;
max-height: $item-ios-thumbnail-size;
ion-thumbnail {
min-width: $item-ios-thumbnail-size;
img {
max-width: $item-ios-thumbnail-size;
max-height: $item-ios-thumbnail-size;
}
}
h1 {

10
ionic/components/card/modes/md.scss
View File

@@ -102,9 +102,13 @@ ion-card {
}
}
.thumbnail {
max-width: $card-md-thumbnail-size;
max-height: $card-md-thumbnail-size;
ion-thumbnail {
min-width: $card-md-thumbnail-size;
img {
max-width: $card-md-thumbnail-size;
max-height: $card-md-thumbnail-size;
}
}
h1 {

1
ionic/components/item/item-media.scss
View File

@@ -36,6 +36,7 @@
ion-avatar,
ion-thumbnail {
display: block;
line-height: 1;
img {

10
ionic/components/item/modes/ios.scss
View File

@@ -137,9 +137,13 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
}
}
.thumbnail {
max-width: $item-ios-thumbnail-size;
max-height: $item-ios-thumbnail-size;
ion-thumbnail {
min-width: $item-ios-thumbnail-size;
img {
max-width: $item-ios-thumbnail-size;
max-height: $item-ios-thumbnail-size;
}
}
}

10
ionic/components/item/modes/md.scss
View File

@@ -151,9 +151,13 @@ $item-md-forward-icon-color: $item-md-border-color !default;
}
}
.thumbnail {
max-width: $item-md-thumbnail-size;
max-height: $item-md-thumbnail-size;
ion-thumbnail {
min-width: $item-md-thumbnail-size;
img {
max-width: $item-md-thumbnail-size;
max-height: $item-md-thumbnail-size;
}
}
h1 {

12
ionic/components/item/test/images/main.html
View File

@@ -42,17 +42,17 @@
</ion-item>
<ion-item>
<div class="item-media" item-left>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-thumbnail item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
<h2>Two Lines w/ Thumbnail, H2 Header</h2>
<p>Paragraph text.</p>
</ion-item>
<ion-item>
<div class="item-media" item-left>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-thumbnail item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
<h2>Three Lines w/ Thumbnail, H2 Header</h2>
<p>Paragraph text.</p>
<p>Paragraph text.</p>

12
ionic/components/item/test/media/main.html
View File

@@ -40,15 +40,15 @@
<a ion-item href="#">
Media/Thumbnail right side, a.item
<div class="item-media" item-right>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-thumbnail item-right>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
</a>
<ion-item>
<div class="item-media" item-left>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-thumbnail item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-thumbnail>
<h2>H2 Title Text</h2>
<p>Button on right</p>
<button outline item-right>View</button>