Módulo de Tarjetas
El módulo de tarjetas es responsable de mostrar datos en un formato de tarjeta.
Un ejemplo de las tarjetas en uso se puede ver en el ods módulo, en la página de resumen de búsqueda de pagos.
Tarjeta
El componente de tarjeta se utiliza para crear una tarjeta colapsable. Tiene una sección de título y una sección de contenido.
| Nombre | Descripción |
|---|---|
@Input() esExpandable: booleano (por defecto: falso) |
Si la tarjeta debe ser expandible y colapsable por el usuario. |
@Input() isExpanded: boolean (predeterminado: true) |
Si el contenido debe ser expandido o colapsado. Esto será ignorado si |
<ipf-card [isExpandable]="true" [isExpanded]="false">
<ipf-card-title>Title</ipf-card-title>
<ipf-card-content>Content here</ipf-card-content>
</ipf-card>Título de la Página de la Tarjeta
Un componente que se utilizará en una página que usa múltiples tarjetas. Mostrará el título como un <H1> etiqueta y crea botones para cualquier acción que usted proporcione. Cuando se hace clic en una acción, el componente emite la acción que fue triggered.
| Nombre | Descripción |
|---|---|
@Input() título: cadena |
El título que se mostrará en el componente |
@Input() acciones: CardPageTitleAction |
Acciones que se mostrarán junto al título. |
@Input() navLinks?: BreadcrumbNavLink[]; |
Elementos de navegación que se utilizarán para las migas de pan |
@Output() actionClick: EventEmitter<CardPageTitleActionEvent> |
Evento que se activa cuando se hace clic en una acción. |
let actions: CardPageTitleAction[] = [
{ id: 'edit', name: 'Edit', colour: 'primary' },
{ id: 'view', name: 'View', colour: 'primary' },
];
let navItems: BreadcrumbNavLink[] = [
{ link:['../.', 'test', 'view'], title: 'Test'},
{ link:['../.', 'test', 'edit'], title: 'Test2'}
]
actionClick(event: CardPageTitleActionEvent): void {
console.log(event);
}<ipf-card-page-title title="Title" [actions]="actions" [navItems]="navItems" (actionClick)="onActionClick()"></ipf-card-page-title>Lista de cuadrícula tarjeta
La tarjeta de lista en cuadrícula muestra datos en un formato similar a una tabla, con encabezados y columnas; sin embargo, solo puede tener una fila. A continuación se puede ver un ejemplo.
| Nombre | Descripción |
|---|---|
@Input() título: string |
El título que se mostrará en la tarjeta. |
@Input() itemList:ListCardItem[] |
La lista de elementos que se mostrarán en la tarjeta. |
@Input() missingValueString: string |
La cadena que se mostrará cuando falte un valor. |
<ipf-grid-list-card
missingValueString="N/A"
data-testid="execution-status-info"
[title]="Execution Status"
[itemList]="executionStatusList"
></ipf-grid-list-card>Tarjeta de Lista Expandible
La tarjeta de lista expandible muestra grupos de tarjetas de lista en secciones expandibles.
La primera sección de la lista comenzará expandida.
| Nombre | Descripción |
|---|---|
@Input() sectionList: ExpandableListCard |
El título que se mostrará en la tarjeta.
|
<ipf-expandable-list-card [sectionList]="sectionList"></ipf-expandable-list-card>Lista de Tarjeta
La tarjeta de lista muestra datos en un formato de lista, con una clave y un valor para cada elemento. A continuación se puede ver un ejemplo.
| Nombre | Descripción |
|---|---|
@Input() título: cadena |
El título que se mostrará en la tarjeta. |
@Input() noDataText: string |
La cadena que se mostrará cuando no haya datos para la Tarjeta de Lista. |
@Input() noSectionItems: cadena |
La cadena que se mostrará cuando no haya datos para una subsección de datos debajo de un subtítulo dentro de la Tarjeta de Lista. |
@Input() itemList:ListCardItem[] |
La lista de elementos que se mostrarán en la tarjeta.
|
@Input() missingValueString: cadena |
La cadena que se mostrará cuando falte un valor. |
@Input() acciones: ListCardActions[] |
La lista de acciones que se añadirán a la parte superior de la tarjeta. Estas emitirán la cadena dada al ser clicadas.
|
Ejemplo de uso:
<ipf-list-card
class="info-box"
missingValueString="N/A"
data-testid="debtor-agent-info"
[title]="Debtor Agent"
[itemList]="debtorAgentList"
[actions]="approvalActions"
></ipf-list-card>Tarjeta de Tabla
La tarjeta de tabla muestra datos en un formato similar a una tabla, con encabezados y columnas, similar a la tarjeta de lista en cuadrícula; sin embargo, la tarjeta de tabla puede tener más de una fila. A continuación se puede ver un ejemplo.
| Nombre | Descripción |
|---|---|
@Input() título: cadena |
El título que se mostrará en la tarjeta. |
@Input() columnas: string[] |
Las columnas que se mostrarán en la tarjeta. |
@Input() filas:TableCardRow[] |
Las filas que se mostrarán en la tarjeta. |
@Input() missingValueString: string |
La cadena que se mostrará cuando falte un valor. |
| Los valores en el título, las columnas y las entradas missingValueString deberán ser traducidos utilizando transloco. |
Ejemplo de uso:
<ipf-table-card
missingValueString="N/A"
data-testid="payload-dialog-table"
[title]="data.title + ' ' + data.createdAt"
[columns]="[t('objectId'), t('type'), t('name'), t('causedBy')]"
[rows]="tableRows"
></ipf-table-card>Tarjeta de Resumen
La tarjeta de resumen es para resaltar una pieza individual de información. A continuación se puede ver un ejemplo.
| Nombre | Descripción |
|---|---|
@Input() título: cadena |
El título que se mostrará en la tarjeta. |
@Input() resumen: string |
El resumen se mostrará en la tarjeta. |
Ejemplo de uso:
<ipf-summary-card
[title]="'Status'"
[summary]="'Allocated'"
></ipf-summary-card>