@natec/mef-dev-ui-kit documentation
  1. Components
  2. ProfileComponent

File

src/lib/markup-kit/page-layouts/profile/profile.component.ts

Description

A component representing a user profile.

Example of usage:

<mefdev-profile
  [name]="'John Doe'"
  [img]="'assets/profile.png'"
  [shortDescription]="'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'"
  [header]="'User Profile'"
  [circleImg]="'true'">
  <ng-template #first_colum>
    <!-- Content for the first column -->
  </ng-template>
  <ng-template #second_colum>
    <!-- Content for the second column -->
  </ng-template>
  <ng-template #footer>
    <!-- Content for the footer -->
  </ng-template>
</mefdev-profile>

https://mef.dev/ui_kit_demo/view/page_layouts/profile

Implements

OnInit

Metadata

selector mefdev-profile
styleUrls ./profile.component.scss
templateUrl ./profile.component.html

Index

Properties
Inputs
Accessors

Constructor

constructor()

Inputs

circleImg
Type : boolean
Default value : false

A flag indicating whether to display the profile image as a circle. Default "false".

<mefdev-profile [circleImg]="'true'"></mefdev-profile>
header
Type : string

The header title of the profile component.

<mefdev-profile [header]="'User Profile'"></mefdev-profile>
img
Type : string
Default value : ''

The URL of the user's profile image.

<mefdev-profile [img]="'assets/profile.png'"></mefdev-profile>
name
Type : string

The name of the user.

<mefdev-profile [name]="'John Doe'"></mefdev-profile>
shortDescription
Type : string

A short description of the user.

<mefdev-profile [shortDescription]="'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'"></mefdev-profile>

Properties

first_colum
Type : TemplateRef<void>
Decorators :
@ContentChild('first_colum')

The template reference to the content of the first column.

  <ng-template #first_colum>
    <!-- Content for the first column -->
  </ng-template>
footer
Type : TemplateRef<void>
Decorators :
@ContentChild('footer')

The template reference to the content of the footer.

  <ng-template #footer>
    <!-- Content for the footer -->
  </ng-template>
second_colum
Type : TemplateRef<void>
Decorators :
@ContentChild('second_colum')

The template reference to the content of the second column.

  <ng-template #second_colum>
    <!-- Content for the second column -->
  </ng-template>

Accessors

sizeStyle
getsizeStyle()

results matching ""

    No results matching ""