FCrudButton migreringsguide
Innehåll
FCrudButton
är deprekerad och ersatt med FTableButton för tabeller eller knapp för andra användningsområden.
Proparna
action
är ersatt med slot attributesupdateItem()
respektivedeleteItem()
.icon
är ersatt med propicon
påFTableButton
samtFIcon
för övriga användningsområden.label
är ersatt med proplabel
påFTableButton
samt vanlig text i knapp för övriga användningsområden.
Tabell
<f-crud-dataset>
- <template #default>
+ <template #default="{ updateItem, deleteItem }">
<f-interactive-table :rows>
<template #caption> Tabell </template>
<template #default="{ row }">
<f-table-column title="Åtgärder">
- <f-crud-button action="modify" :item="row" icon>
- Ändra {{ row.name }}
- </f-crud-button>
- <f-crud-button action="delete" :item="row" icon>
- Ta bort {{ row.name }}
- </f-crud-button>
+ <f-table-button icon="pen" @click="updateItem(item)">
+ Ändra {{ item.name }}
+ </f-table-button>
+ <f-table-button icon="trashcan" @click="deleteItem(item)">
+ Ta bort {{ item.name }}
+ </f-table-button>
</f-table-column>
</template>
</f-interactive-table>
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>
- Ändra {{ item.name }}
- </f-crud-button>
- <f-crud-button action="delete" :item icon>
- Ta bort {{ item.name }}
- </f-crud-button>
+ <button
+ type="button"
+ class="button button--small button--tertiary"
+ @click="updateItem(item)"
+ >
+ <f-icon name="pen">
+ <title>Ändra {{ item.name }}</title>
+ </f-icon>
+ </button>
+ <button
+ type="button"
+ class="button button--small button--tertiary"
+ @click="deleteItem(item)"
+ >
+ <f-icon name="pen">
+ <title>Ta bort {{ item.name }}</title>
+ </f-icon>
+ </button>
</template>
</f-list>
</template>
API
Props
-
action: string
-
The action to be performed by the button. Must be one of the following values: "delete" or "modify".
-
icon: boolean
Optional -
Determines if an icon should be displayed on the button.
Default:
false
-
item: object
-
The item that the action will be performed on.
-
label: boolean
Optional -
Determines if the button should display a label. If false, the button will use a visually hidden text for accessibility.
Default:
false
Slots
-
default
-
Slot used to provide custom content for the button text.