Data Cards
<gstock-data-cards>
|
GstockDataCards
API
Propiedades
| Nombre | Descripción | Reflects | Tipo | Por defecto |
|---|---|---|---|---|
data
|
The data rows to be displayed as cards. Each row should have an ‘id’ property. |
DataGridRow[]
|
[]
|
|
size
|
The size variant of the data cards. Affects padding, font sizes, and overall spacing. |
|
'small' | 'medium' | 'large'
|
'medium'
|
selectable
|
When true, enables card selection functionality with checkboxes. |
|
boolean
|
false
|
multiSelect
multi-select
|
When true and selectable is enabled, allows multiple cards to be selected simultaneously. |
|
boolean
|
false
|
paginated
|
When true, enables pagination controls and limits the number of cards displayed per page. |
|
boolean
|
false
|
pageSize
page-size
|
The number of cards to display per page when pagination is enabled. |
|
number
|
25
|
currentPage
current-page
|
The current page number (1-based) when pagination is enabled. |
|
number
|
1
|
totalPages
total-pages
|
The total number of pages available. - If set to 0 or not provided: Calculated automatically from data.length and pageSize (virtual pagination) - If set to a value > 0: Used for server-side pagination where data contains only current page items |
|
number
|
0
|
totalItems
total-items
|
The total number of items across all pages. - If set to 0 or not provided: Calculated automatically from data.length (virtual pagination) - If set to a value > 0: Used for server-side pagination where data contains only current page items |
|
number
|
0
|
showPageSizeSelector
show-page-size-selector
|
When true, displays a selector for changing the page size in the pagination controls. |
|
boolean
|
false
|
loading
|
When true, displays a loading state with a progress indicator and hides the cards content. |
|
boolean
|
false
|
loadingMessage
loading-message
|
The message to display while the component is in a loading state. |
-
|
-
|
|
emptyMessage
empty-message
|
The message to display when there are no cards to show. |
-
|
-
|
|
cardRenderer
|
Function to render the content of each card. Receives the row data, row index, and options object with selection state. |
CardRenderer | undefined
|
-
|
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Aprende más sobre atributos y propiedades .
Eventos
| Nombre | React Event | Descripción | Event Detail |
|---|---|---|---|
gstock-data-cards-card-click-event
|
onGstockDataCardsCardClickEvent
|
Fired when a card is clicked. | - |
gstock-data-grid-selection-change-event
|
onGstockDataGridSelectionChangeEvent
|
Fired when the selection state changes. | - |
gstock-page-change-event
|
onGstockPageChangeEvent
|
Fired when the page changes. | - |
gstock-page-size-change-event
|
onGstockPageSizeChangeEvent
|
Fired when the page size changes. | - |
Aprende más sobre eventos .
Slots
| Nombre | Descripción |
|---|---|
| (default) | The default slot for additional content. |
toolbar
|
Toolbar content displayed above the cards. |
empty
|
Content displayed when there are no cards. |
Aprende más sobre slots .
Propiedades personalizadas
| Nombre | Descripción | Default |
|---|---|---|
--card-min-width
|
Controls the minimum width of each card. Default: 280px. | |
--card-gap
|
Controls the gap between cards. Default: var(–gstock-space-gap-lg). | |
--card-background
|
Controls the card background color. | |
--card-border-color
|
Controls the card border color. | |
--card-border-width
|
Controls the card border width. | |
--card-border-radius
|
Controls the card border radius. | |
--card-padding
|
Controls the padding inside each card. | |
--card-selected-background
|
Controls the background color of selected cards. | |
--card-hover-background
|
Controls the background color of hovered cards. |
Aprende más sobre propiedades personalizadas .
Partes
| Nombre | Descripción |
|---|---|
container
|
The component’s outermost container. |
cards-grid
|
The CSS grid container for all cards. |
card
|
Individual card containers. |
card-content
|
The content area inside each card. |
selection-checkbox
|
Selection checkboxes on each card. |
pagination-container
|
The pagination wrapper. |
pagination
|
The pagination component. |
pagination-loading
|
The pagination loading indicator. |
empty-state
|
The empty state container. |
loading
|
The loading state container. |
toolbar
|
Toolbar slot container. |
Aprende más sobre partes CSS .