KProductRowAction Interface
Defines a single action button displayed on a product card in e-commerce block components. Pass an array of these to the :actions prop of KEcommerceProductList.
Define actions and bind them to a product list block.
<template lang="pug">
KEcommerceProductList(
:dataProvider="provider"
:actions="productActions"
)
</template>
<script lang="ts" setup>
import type { KProductRowAction, KProductItemData } from '@katlux/providers'
const productActions: KProductRowAction[] = [
{
label: 'Add to Cart',
icon: 'cart-plus',
color: 'primary',
action: (item: KProductItemData) => {
cart.add(item)
}
},
{
label: 'Remove',
icon: 'trash',
color: 'danger',
action: (item: KProductItemData) => {
products.delete(item.id)
}
}
]
</script>| Property | Type | Required | Description |
|---|
| label | string | ✓ | Button label text displayed to the user. |
| action | (item: KProductItemData) => void | ✓ | Callback invoked when the button is clicked, receiving the full product item. |
| icon | string | — | Icon name to display alongside the label. |
| color | 'primary' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark' | 'default' | — | Button colour variant. Defaults to 'default'. |