FCrudButton migreringsguide

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:

  • action ersätts med updateItem(item) eller deleteItem(item) i menyåtgärdens onClick eller knappens @click.
  • icon anges på en action i menu-kolumnen eller med icon-left på FButton.
  • label anges med actionens label eller som knappens text i FButton.

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: boolean Optional

Determines if an icon should be displayed on the button.

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.

Slots

default

Slot used to provide custom content for the button text.

Sök

Esc för att stänga Pil upp/ner för att navigera Enter för att välja

Välj version

Var god vänta, laddar versionsdata...