Action Buttons
The Card provides options for rendering action buttons and customizing their content, orientation and layout.
To specify the action buttons of the Card, use either of the following approaches:
Providing Custom Actions Content
To specify action buttons in the Card, you can use the <kendo-card-actions> element. You can arrange the content of the buttons either horizontally or vertically, by using the orientation option of the <kendo-card-actions> component.
import { Component, ViewEncapsulation } from '@angular/core';
import { Orientation, ActionsLayout } from '@progress/kendo-angular-layout';
@Component({
selector: 'my-app',
template: `
<div class="demo">
<kendo-card>
<img kendoCardMedia src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/waffles.jpg" />
<kendo-card-body>
<h4>Pumpkin Waffles</h4>
<div *ngIf="expanded">
<hr kendoCardSeparator />
<div class="recipe-wrap">
Mix together flour, baking powder, salt, cinnamon, nutmeg, ginger, and cloves in a large bowl.
In a second bowl, add egg yolks, sugar, pumpkin, milk, and oil;
Whip the egg until stiff peaks form.
Gently fold in the flour mixture followed by the whipped egg whites.
Cook according to your waffle iron directions. Serve with butter and maple syrup.
</div>
</div>
</kendo-card-body>
<hr kendoCardSeparator *ngIf="horizontalStretched" />
<kendo-card-actions [orientation]="actionsOrientation" [layout]="actionsLayout">
<button class="k-button k-flat" (click)="toggleLike()">
<span [ngClass]="heartIcon()"></span>
Like
</button>
<hr kendoCardSeparator [orientation]="'vertical'" *ngIf="horizontalStretched" />
<button class="k-button k-primary k-flat" (click)="toggleRecipe()">
<span class="k-icon k-i-more-vertical"></span>
{{ btnText }}
</button>
</kendo-card-actions>
</kendo-card>
<div class="example-config">
<div>Actions Orientation</div>
<label class="k-radio-label" for="horizontal">
<input class="k-radio" type="radio" id="horizontal" value="horizontal" name="actionsOrientation" [(ngModel)]="actionsOrientation" />
Horizontal
</label>
<label class="k-radio-label" for="vertical">
<input class="k-radio" type="radio" id="vertical" value="vertical" name="actionsOrientation" [(ngModel)]="actionsOrientation" />
Vertical
</label>
<hr />
<div>Actions Layout</div>
<label class="k-radio-label" for="start">
<input class="k-radio" type="radio" id="start" value="start" name="actionsLayout" [(ngModel)]="actionsLayout" />
Start
</label>
<label class="k-radio-label" for="end">
<input class="k-radio" type="radio" id="end" value="end" name="actionsLayout" [(ngModel)]="actionsLayout" />
End
</label>
<label class="k-radio-label" for="stretched">
<input class="k-radio" type="radio" id="stretched" value="stretched" name="actionsLayout" [(ngModel)]="actionsLayout" />
Stretched
</label>
<label class="k-radio-label" for="center">
<input class="k-radio" type="radio" id="center" value="center" name="actionsLayout" [(ngModel)]="actionsLayout" />
Center
</label>
</div>
</div>
`,
styles: [`
.demo {
display: flex;
justify-content: space-evenly;
}
.k-card-body h4 {
text-align: center;
}
.recipe-wrap {
padding-top: 12px;
}
.k-icon {
font-size: 14px;
margin-right: 4px;
}
.k-card-actions-vertical.k-card-actions-start .k-button,
.k-card-actions-vertical.k-card-actions-end .k-button {
width: 50px;
}
.k-card-separator {
height: auto;
}
.k-icon.k-i-heart {
color: #ff6358;
}
.example-config {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 315px;
}
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public expanded = false;
public liked = false;
public btnText = 'More';
public actionsOrientation: Orientation = 'horizontal';
public actionsLayout: ActionsLayout = 'end';
public get horizontalStretched(): boolean {
return this.actionsOrientation === 'horizontal' && this.actionsLayout === 'stretched';
}
public toggleRecipe(): void {
this.expanded = !this.expanded;
this.btnText = this.expanded ? 'Less' : 'More';
}
public toggleLike(): void {
this.liked = !this.liked;
}
public heartIcon(): string {
return this.liked ? 'k-icon k-i-heart' : 'k-icon k-i-heart-outline';
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
RouterModule.forChild(
[{
path: '',
component: AppComponent
}]
),
CommonModule,
LayoutModule,
InputsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
Providing an Actions Collection
You can also specify action buttons in the Card by listing the actions as a CardAction collection and, then, pass them to the actions property. You can customize the layout of the buttons by using the layout option of the <kendo-card-actions> component.
import { ViewEncapsulation, Component } from '@angular/core';
import { CardAction } from '@progress/kendo-angular-layout';
@Component({
selector: 'my-app',
template: `
<div class="demo">
<kendo-card>
<img kendoCardMedia src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/cheesecake.jpg" />
<kendo-card-body>
<h4>No-Bake Cheesecake</h4>
<div>
<hr kendoCardSeparator />
<div class="recipe-wrap">
This is truly the most perfect and easy no-bake cheesecake -
a smooth and creamy dessert that sets up beautifully in the refrigerator.
<div>{{ action?.text }}</div>
</div>
</div>
</kendo-card-body>
<kendo-card-actions [layout]="'stretched'" [actions]="cardActions" (action)="onActionClick($event)">
</kendo-card-actions>
</kendo-card>
</div>
`,
styles: [`
.demo { display: flex; justify-content: center; }
.k-card-body h4 { text-align: center; }
.recipe-wrap { padding-top: 12px; }
.recipe-wrap div { color: #ff6358; }
`],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public cardActions: Array<CardAction> = [
{
text: 'Like it!',
flat: true
},
{
text: 'Love it!',
flat: true,
primary: true
},
{
text: 'Cook it?',
flat: true
}
];
public action: CardAction = null;
public onActionClick(action: any): void {
this.action = action;
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
RouterModule.forChild(
[{
path: '',
component: AppComponent
}]
),
CommonModule,
LayoutModule,
InputsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
enableProdMode();
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);