@anguless/angulux/card
card
1 declarations2 demos
import
import { CardModule } from '@anguless/angulux/card';Basic
A card takes a header string and projects its children as content.
Simple Card
A card groups related content and actions behind one surface. The header comes from the header property; everything else is projected as children.
<agl-card header="Simple Card"> <p>A card groups related content and actions behind one surface. The header comes from the header property; everything else is projected as children.</p></agl-card>With a footer
Header, title, subtitle, content and footer are template slots for anything that needs markup rather than a string.
Advanced Card
With a footer
Header, title, subtitle, content and footer are all template slots, so anything that needs markup rather than a string goes in an ng-template.
<agl-card header="Advanced Card" subheader="With a footer"> <p>Header, title, subtitle, content and footer are all template slots, so anything that needs markup rather than a string goes in an ng-template.</p> <ng-template #footer> <agl-button label="Cancel" severity="secondary" [outlined]="true" /> <agl-button label="Save" /> </ng-template></agl-card>API
Generated from the committed corpus, which check:corpus holds to the built library.
Card
componentagl-cardCard is a flexible container component.
| Input | Type | Default | Description |
|---|---|---|---|
| header | string | undefined | not documented | Header of the card. |
| subheader | string | undefined | not documented | Subheader of the card. |
| style | not documented | Inline style of the element. | |
| styleClass deprecated — since v20.0.0, use `class` instead. | string | undefined | not documented | Class of the element. |
| Template slot | Description |
|---|---|
| <ng-template #header> | Custom header template. |
| <ng-template #title> | Custom title template. |
| <ng-template #subtitle> | Custom subtitle template. |
| <ng-template #content> | Custom content template. |
| <ng-template #footer> | Custom footer template. |
Inherited from BaseComponent
inherited| Input | Type | Default | Description |
|---|---|---|---|
| dt | Object | undefined | undefined | Defines scoped design tokens of the component. |
| unstyled | boolean | undefined | undefined | Indicates whether the component should be rendered without styles. |
| pt | PT | undefined | undefined | Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received. |
| ptOptions | PassThroughOptions | undefined | undefined | Used to configure passthrough(pt) options of the component. |