Angular Avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters.
Loading...
## Image avatars
Loading...
Loading...
Loading...
## Letter avatars
Loading...
Loading...
Loading...
## Rounded avatars
Use the `shape="rounded"` prop to make avatars squared with rounded corners.
Loading...
Loading...
Loading...
## Square avatars
Use the `shape="rounded-0"` prop to make avatars squared
Loading...
Loading...
Loading...
## Sizes
Fancy larger or smaller avatar? Add `size="xl"`, `size="lg"`, `size="md"` or `size="sm"` for additional sizes.
Loading...
Loading...
Loading...
## Avatars with status
Loading...
Loading...
Loading...
## Customizing
### CSS variables
Angular multi selects use local CSS variables on `.avatar` for enhanced real-time customization. Values for
the CSS variables are set via Sass, so Sass customization is still supported, too.
```scss
--cui-avatar-width: #{$avatar-width};
--cui-avatar-height: #{$avatar-height};
--cui-avatar-font-size: #{$avatar-font-size};
--cui-avatar-border-radius: #{$avatar-border-radius};
--cui-avatar-status-width: #{$avatar-status-width};
--cui-avatar-status-height: #{$avatar-status-height};
--cui-avatar-status-border-radius: #{$avatar-status-border-radius};
```
#### How to use CSS variables
```ts
const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}
```
```html
<div [ngStyle]="vars"></div>
```
### SASS variables
```scss
$avatar-width: 2rem;
$avatar-height: 2rem;
$avatar-font-size: .8rem;
$avatar-border-radius: 50em;
$avatar-status-width: .5rem;
$avatar-status-height: .5rem;
$avatar-status-border-radius: 50em;
$avatar-transition: margin .15s;
$avatar-sizes: (
sm: (
width: 1.5rem,
height: 1.5rem,
font-size: .6rem,
status-width: .4rem,
status-height: .4rem
),
md: (
width: 2.5rem,
height: 2.5rem,
font-size: 1rem,
status-width: .7rem,
status-height: .7rem
),
lg: (
width: 3rem,
height: 3rem,
font-size: 1.2rem,
status-width: .8rem,
status-height: .8rem
),
xl: (
width: 4rem,
height: 4rem,
font-size: 1.6rem,
status-width: 1rem,
status-height: 1rem
),
);
```
---
## API
### Avatar Module
```typescript
import { AvatarModule } from '@coreui/angular';
@NgModule({
imports: [AvatarModule,]
})
export class AppModule(){}
```
### c-avatar
_component_
#### Inputs
| name | description | type | default |
| ---- | ----------- | ---- | ------- |
| `color` | Sets the background color context of the component to one of CoreUI’s themed colors.| `Colors` | |
| `shape` | Select the shape of the component. | `string` | |
| `size` | Size the component small, large, or extra large. | Sizes | `md` |
| `src` | The src attribute for the img element.| `string` | |
| `status` | Sets the color context of the status indicator to one of CoreUI’s themed colors. | `Colors` | |
| `textColor` | Sets the text color of the component to one of CoreUI’s themed colors.| `TextColors`| |