FCrudButton migreringsguide
Innehåll
FCrudButton är deprekerad.
För enskilda knappar använder du FButton.
I tabeller använder du i stället en menu-kolumn i FTable.
När du placerar tabellen i FCrudDataset kopplar du menyåtgärdernas onClick till updateItem(item) och deleteItem(item), som du når via en template ref på FCrudDataset.
Utanför tabeller får du samma funktioner som slot-props i defaultslotten.
Så ersätter du propsen:
actionersätts medupdateItem(item)ellerdeleteItem(item)i menyåtgärdensonClickeller knappens@click.iconanges på en action imenu-kolumnen eller medicon-leftpåFButton.labelanges med actionenslabeleller som knappens text iFButton.
Tabell
Se Tabell med redigering för ett exempel med menu-kolumn.
Lista och övrigt
<f-crud-dataset>
- <template #default>
+ <template #default="{ updateItem, deleteItem }">
<f-list :items>
<template #default="{ item }">
- <f-crud-button action="modify" :item icon>
+ <f-button
+ icon-left="pen"
+ size="small"
+ variant="tertiary"
+ @click="updateItem(item)"
+ >
Ändra {{ item.name }}
- </f-crud-button>
- <f-crud-button action="delete" :item icon>
+ </f-button>
+ <f-button
+ icon-left="pen"
+ size="small"
+ variant="tertiary"
+ @click="deleteItem(item)"
+ >
Ta bort {{ item.name }}
- </f-crud-button>
+ </f-button>
</template>
</f-list>
</template>
API
Props
-
action: "delete" | "modify" -
The action to be performed by the button. Must be one of the following values: "delete" or "modify".
-
icon: booleanOptional -
Determines if an icon should be displayed on the button.
-
item: object -
The item that the action will be performed on.
-
label: booleanOptional -
Determines if the button should display a label. If false, the button will use a visually hidden text for accessibility.
Slots
-
default -
Slot used to provide custom content for the button text.