@demetra/user-badge NPM

UserBadge

UserBadge is an Angular component which can be used to display user information in a easy way.

Installation

npm i @demetra/user-badge

Usage

Once @demetra/user-badge is installed, your're ready to use it in your application.

Import UserBadgeModule into your application (ex. app.module.ts):

import { UserBadgeModule } from '@demetra/user-badge';

// add it to your module imports
@NgModule({
  imports: [
    UserBadgeModule
  ]
})
export class AppModule {}

Then use it in your templates:

<user-badge name="John Doe"></user-badge>

You can also specify a custom content for user badge popup:

<user-badge name="John Doe">This is a <strong>custom HTML</strong> popover content!</user-badge>

The component supports the following attributes:

Attribute	Type	Description
`name`	`string`	Specify the name of the user for which to generate the badge (default: `''`)
`show-name`	`boolean`	Enable/Disable user name visualization (default: `true`)
`no-border`	`boolean`	Enable/Disable borders for `<user-badge>` component (default: `false`)
`shadow`	`boolean`	Enable/Disable shadow for `<user-badge>` component (default: `true`)
`bgColor`	`string`	Specify a custom background color (default: `#ffffff`)
`textColor`	`string`	Specify a custom text color (default: `#333333`)
`outlineColor`	`string`	Specify a custom avatar outline color (default: `#eeeeee`)
`borderColor`	`string`	Specify a custom border color (default: `#eeeeee`)
`popoverBgColor`	`string`	Specify a custom popover background color (default: `#ffffff`)
`popoverBorderColor`	`string`	Specify a custom popover border color (default: `#eeeeee`)