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

File

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

Description

Component for displaying a long card with a title, parameters, and description.

Example of usage:

<mefdev-card-long
    [type_text]="'Type Text'"
    [type_color]="CartTypeColors.RED"
    [img]="'path/to/image.jpg'"
    [imgUrl]="'path/to/image'"
    [description]="'Card description'">

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

    <ng-template #params>
      <!-- Content for the card parameters -->
    </ng-template>

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

    <ng-template #third_col>
      <!-- Content for the third column -->
    </ng-template>
</mefdev-card-long>

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

Implements

OnInit

Metadata

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

Index

Properties
Methods
Inputs

Constructor

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

Inputs

description
Type : string

The description of the card.

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

The path to the image.

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

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

<mefdev-card-long [imgUrl] = "'Img.url'"></mefdev-card-long>
type_color
Type : CartTypeColors
Default value : CartTypeColors.UNSET

The color of the card type.

<mefdev-card-long type_color = "'RED'"></<mefdev-card-long>

Colors: RED, UNSET, GREEN
type_text
Type : string

The text for the card type.

<mefdev-card-long type_text = "'Type'"></<mefdev-card-long>

Methods

Public imgClick
imgClick()

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

Returns : void

Properties

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

Template for displaying the parameters of the card.

<mefdev-card-long>
  <ng-template #params>
    <!-- Content for the card params -->
  </ng-template>
</mefdev-card-long>
second_col
Type : TemplateRef<void>
Decorators :
@ContentChild('second_col')

Template for displaying the content of the second column.

<mefdev-card-long>
  <ng-template #second_col>
    <!-- Content for the card second column -->
  </ng-template>
</mefdev-card-long>
third_col
Type : TemplateRef<void>
Decorators :
@ContentChild('third_col')

Template for displaying the content of the third column.

<mefdev-card-long>
  <ng-template #third_col>
    <!-- Content for the card third column -->
  </ng-template>
</mefdev-card-long>
title
Type : TemplateRef<void>
Decorators :
@ContentChild('title')

Template for displaying the title of the card.

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

results matching ""

    No results matching ""