Naughty Programmer's Madness

    @forter/avatar

    4.0.12 • Public • Published

    fc-avatar

    Avatar circular element they used to represent person or an object. Can represent either an image or an initial.

    Usage

    <script>
       import '@forter/avatar';
    </script>
    
    <fc-avatar>
    </fc-avatar>

    Examples

    <!-- Avatar Badge -->
    <fc-avatar>
       <fc-button icon="close" style="--fc-icon-size: 13px; --fc-button-background-color: black; --fc-button-color: white;" slot="badge"></fc-button>
    </fc-avatar>

    Properties

    Property Attribute Type Default Description
    abbr abbr string two chars in the generated avatar.
    alt alt string "User Avatar" alternative text for accessibility. example: with
    showRawText showRawText boolean
    src src string URL of avatar image can be png or svg. example: https://www.w3schools.com/w3images/avatar2.png

    Slots

    Name Description
    avatar badge element.

    CSS Custom Properties

    Property Description
    --fc-avatar-background-color the color. default: transparent, example: gold
    --fc-avatar-font-size abbr font size. default: 3em, example: 18px
    --fc-avatar-hover-background-color the color. default: var(--fc-gray-300), example: var(--fc-red-100)
    --fc-avatar-size height and width. default: 48px, example: 96px

    Install

    npm i @forter/avatar

    DownloadsWeekly Downloads

    0

    Version

    4.0.12

    License

    Apache-2.0

    Unpacked Size

    42.5 kB

    Total Files

    34

    Last publish

    Collaborators

    • forter-npm
    • lirown
    • oweingart