Skip to content

Commit 64cb1da

Browse files
committed
main - 663585a feat(material/card): support filled variant (#29868)
1 parent 8ba3568 commit 64cb1da

File tree

6 files changed

+14
-14
lines changed

6 files changed

+14
-14
lines changed

docs-content/api-docs/material-card.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -458,7 +458,7 @@ <h4 id="MatCardAppearance" class="docs-header-link docs-api-h4 docs-api-type-ali
458458
<code>MatCardAppearance</code>
459459
</h4><div class="docs-markdown">
460460
<pre class="docs-markdown-pre">
461-
<code class="docs-markdown-code"><span class="hljs-keyword">type</span> MatCardAppearance = <span class="hljs-string">&#x27;outlined&#x27;</span> | <span class="hljs-string">&#x27;raised&#x27;</span>;</code>
461+
<code class="docs-markdown-code"><span class="hljs-keyword">type</span> MatCardAppearance = <span class="hljs-string">&#x27;outlined&#x27;</span> | <span class="hljs-string">&#x27;raised&#x27;</span> | <span class="hljs-string">&#x27;filled&#x27;</span>;</code>
462462
</pre>
463463
</div>
464464

docs-content/examples-highlighted/material/card/card-overview/card-overview-example-html.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@
1616
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matButton</span>&gt;</span>LIKE<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1717
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">matButton</span>&gt;</span>SHARE<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1818
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-card-actions</span>&gt;</span>
19-
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-card</span>&gt;</span>
19+
<span class="hljs-tag">&lt;/<span class="hljs-name">mat-card</span>&gt;</span>

docs-content/examples-source/material/card/card-overview/card-overview-example.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,4 @@
1616
<button matButton>LIKE</button>
1717
<button matButton>SHARE</button>
1818
</mat-card-actions>
19-
</mat-card>
19+
</mat-card>

fesm2022/material/card.mjs

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ import { MatChipsModule } from '@angular/material/chips';
1313
*/
1414
class CardOverviewExample {
1515
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0-next.5", ngImport: i0, type: CardOverviewExample, deps: [], target: i0.ɵɵFactoryTarget.Component });
16-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0-next.5", type: CardOverviewExample, isStandalone: true, selector: "card-overview-example", ngImport: i0, template: "<mat-card class=\"example-card\" appearance=\"outlined\">\n <mat-card-header>\n <div mat-card-avatar class=\"example-header-image\"></div>\n <mat-card-title>Shiba Inu</mat-card-title>\n <mat-card-subtitle>Dog Breed</mat-card-subtitle>\n </mat-card-header>\n <img mat-card-image src=\"https://material.angular.io/assets/img/examples/shiba2.jpg\" alt=\"Photo of a Shiba Inu\">\n <mat-card-content>\n <p>\n The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.\n A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally\n bred for hunting.\n </p>\n </mat-card-content>\n <mat-card-actions>\n <button matButton>LIKE</button>\n <button matButton>SHARE</button>\n </mat-card-actions>\n</mat-card>\n", styles: [".example-card {\n max-width: 400px;\n}\n\n.example-header-image {\n background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');\n background-size: cover;\n}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
16+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0-next.5", type: CardOverviewExample, isStandalone: true, selector: "card-overview-example", ngImport: i0, template: "<mat-card class=\"example-card\" appearance=\"outlined\">\n <mat-card-header>\n <div mat-card-avatar class=\"example-header-image\"></div>\n <mat-card-title>Shiba Inu</mat-card-title>\n <mat-card-subtitle>Dog Breed</mat-card-subtitle>\n </mat-card-header>\n <img mat-card-image src=\"https://material.angular.io/assets/img/examples/shiba2.jpg\" alt=\"Photo of a Shiba Inu\">\n <mat-card-content>\n <p>\n The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.\n A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally\n bred for hunting.\n </p>\n </mat-card-content>\n <mat-card-actions>\n <button matButton>LIKE</button>\n <button matButton>SHARE</button>\n </mat-card-actions>\n</mat-card>", styles: [".example-card {\n max-width: 400px;\n}\n\n.example-header-image {\n background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');\n background-size: cover;\n}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i1.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1.MatCardImage, selector: "[mat-card-image], [matCardImage]" }, { kind: "directive", type: i1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1717
}
1818
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0-next.5", ngImport: i0, type: CardOverviewExample, decorators: [{
1919
type: Component,
20-
args: [{ selector: 'card-overview-example', imports: [MatCardModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"example-card\" appearance=\"outlined\">\n <mat-card-header>\n <div mat-card-avatar class=\"example-header-image\"></div>\n <mat-card-title>Shiba Inu</mat-card-title>\n <mat-card-subtitle>Dog Breed</mat-card-subtitle>\n </mat-card-header>\n <img mat-card-image src=\"https://material.angular.io/assets/img/examples/shiba2.jpg\" alt=\"Photo of a Shiba Inu\">\n <mat-card-content>\n <p>\n The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.\n A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally\n bred for hunting.\n </p>\n </mat-card-content>\n <mat-card-actions>\n <button matButton>LIKE</button>\n <button matButton>SHARE</button>\n </mat-card-actions>\n</mat-card>\n", styles: [".example-card {\n max-width: 400px;\n}\n\n.example-header-image {\n background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');\n background-size: cover;\n}\n"] }]
20+
args: [{ selector: 'card-overview-example', imports: [MatCardModule, MatButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"example-card\" appearance=\"outlined\">\n <mat-card-header>\n <div mat-card-avatar class=\"example-header-image\"></div>\n <mat-card-title>Shiba Inu</mat-card-title>\n <mat-card-subtitle>Dog Breed</mat-card-subtitle>\n </mat-card-header>\n <img mat-card-image src=\"https://material.angular.io/assets/img/examples/shiba2.jpg\" alt=\"Photo of a Shiba Inu\">\n <mat-card-content>\n <p>\n The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.\n A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally\n bred for hunting.\n </p>\n </mat-card-content>\n <mat-card-actions>\n <button matButton>LIKE</button>\n <button matButton>SHARE</button>\n </mat-card-actions>\n</mat-card>", styles: [".example-card {\n max-width: 400px;\n}\n\n.example-header-image {\n background-image: url('https://material.angular.io/assets/img/examples/shiba1.jpg');\n background-size: cover;\n}\n"] }]
2121
}] });
2222

2323
/**

0 commit comments

Comments
 (0)