card.component.ts
angular/examples/week01-02/src/app/ui/card.component.ts
// @ts-nocheck
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'ui-card',
standalone: true,
imports: [CommonModule],
template: `
<article class="card" [ngClass]="variant">
<header *ngIf="title" class="card__header">
<h3>{{ title }}</h3>
<ng-content select="[card-actions]"></ng-content>
</header>
<section class="card__body">
<ng-content></ng-content>
</section>
<footer *ngIf="footer" class="card__footer">{{ footer }}</footer>
</article>
`,
styles: [
`
.card {
background: white;
border-radius: 1rem;
padding: 1.5rem;
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
display: grid;
gap: 1rem;
}
.card__header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.card__footer {
font-size: 0.875rem;
color: #6b7280;
}
.outlined {
border: 1px solid #e5e7eb;
box-shadow: none;
}
`,
],
})
export class CardComponent {
@Input() title?: string;
@Input() footer?: string;
@Input() variant: 'elevated' | 'outlined' = 'elevated';
}
相关文章
server.js
server.js — javascript source code from the angular learning materials (angular/comprehensive-demo/server/server.js).
阅读文章 →app.component.ts
app.component.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/app.component.ts).
阅读文章 →app.config.ts
app.config.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/app.config.ts).
阅读文章 →app.routes.ts
app.routes.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/app.routes.ts).
阅读文章 →auth.guard.ts
auth.guard.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/core/guards/auth.guard.ts).
阅读文章 →role.guard.ts
role.guard.ts — typescript source code from the angular learning materials (angular/comprehensive-demo/src/app/core/guards/role.guard.ts).
阅读文章 →