@schoolsquirrel/letter-avatar

With this plugin you can create beautiful looking letter avatars in your nativescript app!

Limitation

This plugin only supports NativeScript 7 or higher. In case you need to use an older NativeScript version, have a look at this archived repository.

Installation

Install the plugin from using ns plugin add @schoolsquirrel/letter-avatar.

Usage

NativeScript Core:

Define the namespace

<Page class="page"
    loaded="pageLoaded"
    navigatingTo="onNavigatingTo" 
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:ns="@schoolsquirrel/letter-avatar">

Use the plugin:

<ns:LetterAvatar id="myAvatar" text="AB"></ns:LetterAvatar>

You can also add custom styles:

<ns:LetterAvatar color="blue" padding="5" borderRadius="7" id="myAvatar" text="AB"></ns:LetterAvatar> 

Unfortunately, CSS properties are not supported.

For more info and examples check out the demo folder.

Angular Version:

In your app.module.ts include the library like so:

import { LetterAvatarModule } from "@schoolsquirrel/letter-avatar/angular";

and add it to the imports array:

@NgModule({
    bootstrap:  [
        ...
    ],
    declarations: [
        ...
    ],
    imports: [
        ...
        LetterAvatarModule, // <--- add this here
    ],
    schemas: [
        ...
    ],
})
export class AppModule { }

The use it in your .html file:

<LetterAvatar text="AB"></LetterAvatar>

You can add custom styles:

<LetterAvatar color="blue" padding="5" borderRadius="7" text="AB"></LetterAvatar>

Unfortunately, CSS properties are not supported.

For more info and examples check out the demo and the demo-angular folder.

License

MIT