RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://coreui.io/angular/docs/components/avatar/ below:

Angular Avatar Component

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.

Image avatars Letter avatars

CUI CUI CUI

Rounded avatars

Use the shape="rounded" prop to make avatars squared with rounded corners.

CUI CUI CUI

Square avatars

Use the shape="rounded-0" prop to make avatars squared

CUI CUI CUI

Sizes

Fancy larger or smaller avatar? Add size="xl", size="lg", size="md" or size="sm" for additional sizes.

CUI CUI CUI CUI CUI

Avatars with status

CUI

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.

--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

const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}

&lt;div [ngStyle]="vars"&gt;&lt;/div&gt;

SASS variables

$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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4