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

File

src/lib/markup-kit/card/card/card.component.ts

Description

Component for displaying a card with a title, image, and description.

Example of usage:

<mefdev-card>
  <ng-template #card_title>
    <!-- Content for the card title -->
  </ng-template>
  <ng-template #card_footer>
    <!-- Content for the card footer -->
  </ng-template>
</mefdev-card>

https://mef.dev/ui_kit_demo/view/page_components/card/card

Implements

OnInit

Metadata

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

Index

Properties
Methods
Inputs

Constructor

constructor(router: Router)
Parameters :
Name Type Optional
router Router No

Inputs

card_type
Type : string

The type of the card.

<mefdev-card [card_type] = "'type'"></mefdev-card>
description
Type : string

The description of the card.

<mefdev-card [description] = "'description'"></mefdev-card>
img
Type : string

The path to the image.

<mefdev-card [img] = "'img/path/img.png'"></mefdev-card>
imgUrl
Type : string

The path, where user goes after click at the image.

<mefdev-card [imgUrl] = "'Img.url'"></mefdev-card>

Methods

Public imgClick
imgClick()

Event handler for image click. Navigates to the specified URL.

Returns : void

Properties

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

The template reference to the content of the card footer.

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

The template reference to the content of the card title.

<mefdev-card>
  <ng-template #card_title>
    <!-- Content for the card title -->
  </ng-template>
</mefdev-card>

results matching ""

    No results matching ""