0.3.6 • Published 4 years ago
@demetra/user-badge
Licence
MIT
Version
0.3.6
Deps
1
Size
104 kB
Vulns
0
Weekly
0
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) |