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

feat(avatar): ion-avatar element

Browse Source
This commit is contained in:
Adam Bradley
2015-09-18 10:50:44 -05:00
parent 4c014ec855
commit 7da2afb754
11 changed files with 105 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,10 +94,14 @@ ion-card {
color: $card-ios-title-text-color;
}
.avatar {
max-width: $item-ios-avatar-size;
max-height: $item-ios-avatar-size;
border-radius: $item-ios-avatar-size / 2;
ion-avatar {
min-width: $item-ios-avatar-size;
img {
max-width: $item-ios-avatar-size;
max-height: $item-ios-avatar-size;
border-radius: $item-ios-avatar-size / 2;
}
}
.thumbnail {

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

@ -92,10 +92,14 @@ ion-card {
color: $card-md-title-text-color;
}
.avatar {
max-width: $card-md-avatar-size;
max-height: $card-md-avatar-size;
border-radius: $card-md-avatar-size / 2;
ion-avatar {
min-width: $card-md-avatar-size;
img {
max-width: $card-md-avatar-size;
max-height: $card-md-avatar-size;
border-radius: $card-md-avatar-size / 2;
}
}
.thumbnail {

10
ionic/components/card/test/advanced/main.html
View File

@ -36,9 +36,9 @@
<ion-card>
<ion-item>
<div item-left class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<h2>Card With An Inset Picture</h2>
<p>Isn't it beautiful</p>
</ion-item>
@ -56,10 +56,6 @@
</ion-content>
<style>
.avatar {
width: 80px !important;
height: 80px;
}
img {
height: 100px;
}

8
ionic/components/card/test/images/main.html
View File

@ -18,9 +18,9 @@
<ion-card>
<ion-item>
<div item-left class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<h2>Card With An Inset Picture, H2 text</h2>
<p>Isn't it beautiful.</p>
</ion-item>
@ -33,7 +33,7 @@
<style>
.avatar {
ion-avatar img {
width: 80px !important;
height: 80px;
}

44
ionic/components/item/item-media.scss Normal file
View File

@ -0,0 +1,44 @@
// Item Media
// --------------------------------------------------
// Icons, avatars, thumbnails, notes, etc.
.item > icon:first-child {
min-width: 24px;
text-align: center;
}
.list .item > icon[small]:first-child {
min-width: 18px;
}
.item > icon {
line-height: 1;
font-size: 2.4rem;
&[large] {
font-size: 3.2rem;
}
&[small] {
font-size: 1.8rem;
}
}
.item .item-media {
line-height: 1;
img {
display: block;
}
}
ion-avatar,
ion-thumbnail {
line-height: 1;
img {
display: block;
}
}

30
ionic/components/item/item.scss
View File

@ -50,15 +50,6 @@ ion-item-content {
white-space: normal;
}
.item > icon:first-child {
min-width: 24px;
text-align: center;
}
.list .item > icon[small]:first-child {
min-width: 18px;
}
.list .item {
border-radius: 0;
@ -69,18 +60,6 @@ ion-item-content {
}
.item > icon {
font-size: 2.4rem;
&[large] {
font-size: 3.2rem;
}
&[small] {
font-size: 1.8rem;
}
}
.item {
h1 {
@ -140,12 +119,3 @@ ion-input.item {
.item.item.item.no-border-bottom + .item {
margin-top: -13px;
}
.item .item-media {
line-height: 1;
img {
display: block;
}
}

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

@ -127,10 +127,14 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
color: $item-ios-forward-icon-color;
}
.avatar {
max-width: $item-ios-avatar-size;
max-height: $item-ios-avatar-size;
border-radius: $item-ios-avatar-size / 2;
ion-avatar {
min-width: $item-ios-avatar-size;
img {
max-width: $item-ios-avatar-size;
max-height: $item-ios-avatar-size;
border-radius: $item-ios-avatar-size / 2;
}
}
.thumbnail {

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

@ -141,10 +141,14 @@ $item-md-forward-icon-color: $item-md-border-color !default;
color: $item-md-forward-icon-color;
}
.avatar {
max-width: $item-md-avatar-size;
max-height: $item-md-avatar-size;
border-radius: $item-md-avatar-size / 2;
ion-avatar {
min-width: $item-md-avatar-size;
img {
max-width: $item-md-avatar-size;
max-height: $item-md-avatar-size;
border-radius: $item-md-avatar-size / 2;
}
}
.thumbnail {

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

@ -18,24 +18,24 @@
</ion-item>
<ion-item>
<div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
One Line w/ Avatar, div only text
</ion-item>
<ion-item>
<div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<h2>Two Lines w/ Avatar, H2 Header</h2>
<p>Paragraph text.</p>
</ion-item>
<ion-item>
<div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<h2>Three Lines w/ Avatar, H2 Header</h2>
<p>Paragraph text.</p>
<p>Paragraph text.</p>
@ -61,10 +61,6 @@
</ion-list>
<style>
.avatar {
width: 80px !important;
height: 80px;
}
img {
height: 100px;
}

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

@ -9,31 +9,31 @@
<ion-list>
<button ion-item>
<div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
Media/Avatar left, button.item
</button>
<a ion-item href="#">
Media/Avatar right, a.item
<div class="item-media" item-right>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-avatar item-right>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
</a>
<ion-item>
<div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
Media/Avatar, right button
<button outline item-right>View</button>
</ion-item>
<a ion-item href="#">
<div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<ion-avatar item-left>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<h2>H2 Title Text</h2>
<p>Paragraph text</p>
</a>
@ -68,10 +68,6 @@
</ion-list>
<style>
.avatar {
width: 80px !important;
height: 80px;
}
img {
height: 100px;
}

1
ionic/ionic.core.scss
View File

@ -27,6 +27,7 @@
"components/content/content",
"components/icon/icon",
"components/item/item",
"components/item/item-media",
"components/form/form",
"components/grid/grid",
"components/text-input/text-input",