# @demetra/user-badge

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

Latest version **0.3.6** (published 2021-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @demetra/user-badge
pnpm add @demetra/user-badge
yarn add @demetra/user-badge
bun add @demetra/user-badge
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.6 |
| Published | 2021-11-02 |
| First published | 2021-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 103.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gazfaroda, sashakirpa, serioja90 |
| Keywords | demetra, angular, ui, component, user-badge |

## Links

- npm: https://www.npmjs.com/package/@demetra/user-badge
- Repository: https://gitlab.opinioni.net/angular-components/user-badge
- Homepage: https://gitlab.opinioni.net/angular-components/user-badge.git
- Issues: https://gitlab.opinioni.net/angular-components/user-badge/-/issues
- npm.io page: https://npm.io/package/@demetra/user-badge

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.2.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.3.6 (latest) — 2021-11-02
- 0.3.5 — 2021-10-29
- 0.3.4 — 2021-10-29
- 0.3.3 — 2021-10-29
- 0.3.2 — 2021-10-29
- 0.3.1 — 2021-10-28
- 0.3.0 — 2021-10-27
- 0.2.8 — 2021-10-27
- 0.2.7 — 2021-10-27
- 0.2.6 — 2021-10-27
- 0.2.5 — 2021-10-26
- 0.2.4 — 2021-10-26
- 0.2.3 — 2021-10-26
- 0.2.2 — 2021-10-26
- 0.2.1 — 2021-10-26
- … 1 more at https://npm.io/package/@demetra/user-badge/versions

## README

# UserBadge

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

![Demo](https://gitlab.opinioni.net/angular-components/user-badge/-/raw/master/assets/user-badge-1.png)

## Installation

```bash
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`):

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

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

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

```html
<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`) |

---
_Source: https://npm.io/package/@demetra/user-badge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._