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

fix(avatar): document and add custom properties

Browse Source 
references #14850
This commit is contained in:
Brandy Carney
2018-08-08 15:55:44 -04:00
parent c88e1adfd8
commit 6738ab7d87
5 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
core/src/components/avatar/avatar.ios.scss
View File

@ -6,15 +6,8 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
@include border-radius($avatar-ios-border-radius); --border-radius: #{$avatar-ios-border-radius};
width: $avatar-ios-width; width: $avatar-ios-width;
height: $avatar-ios-height; height: $avatar-ios-height;
} }
::slotted(ion-img),
::slotted(img) {
@include border-radius($avatar-ios-border-radius);
overflow: hidden;
}

9
core/src/components/avatar/avatar.md.scss
View File

@ -6,15 +6,8 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
@include border-radius($avatar-md-border-radius); --border-radius: #{$avatar-md-border-radius};
width: $avatar-md-width; width: $avatar-md-width;
height: $avatar-md-height; height: $avatar-md-height;
} }
::slotted(ion-img),
::slotted(img) {
@include border-radius($avatar-md-border-radius);
overflow: hidden;
}

9
core/src/components/avatar/avatar.scss
View File

@ -5,13 +5,22 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
/**
* @prop --border-radius: Border radius of the avatar and inner image
*/
@include border-radius(var(--border-radius));
display: block; display: block;
} }
::slotted(ion-img), ::slotted(ion-img),
::slotted(img) { ::slotted(img) {
@include border-radius(var(--border-radius));
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
overflow: hidden;
} }

6
core/src/components/avatar/readme.md
View File

@ -8,6 +8,12 @@ Avatars can be used by themselves or inside of any element. If placed inside of
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
## CSS Custom Properties
| Name | Description |
| ----------------- | ------------------------------------------- |
| `--border-radius` | Border radius of the avatar and inner image |
---------------------------------------------- ----------------------------------------------

12
core/src/components/avatar/test/standalone/index.html
View File

@ -9,9 +9,19 @@
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css"> <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
</head> </head>
<body> <body padding>
<h1>Default</h1>
<ion-avatar> <ion-avatar>
<img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/> <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
</ion-avatar> </ion-avatar>
<h1>Custom</h1>
<ion-avatar style="width: 200px; height: 200px">
<img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
</ion-avatar>
<ion-avatar style="--border-radius: 4px;">
<img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=500&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
</ion-avatar>
</body> </body>
</html> </html>