Komponent

FList

Status

Produktionsklar

Lista används när användaren behöver gå igenom ett antal poster för att hitta en särskild post som ska visas eller hanteras.

Ange nyckel (keyAttribute)

Med keyAttribute så kan du ange namnet för en nyckel (key) som finns i varje list-ojekt och innehåller ett värde som kan användas för att identifiera olika objekt. Om detta anges, så måste varje objekt innehålla denna nyckel med ett unikt värde.

Att använda keyAttribute är valfritt och behövs inte anges om du inte har nåt naturligt id att ange för dina objekt. Men om det är tänkt att objekten ska laddas om från REST-api eller liknande så måste du använda keyAttribute för att aktuell status för dina objekt ska kunna bibehållas.

-<f-list :items="myitems">
+<f-list :items="myitems" key-attribute="id">

// The key "id" is used for "keyAttribute".
const myItems = [
    { id: "a", name: "Banan" },
    { id: "b", name: "Äpple" },
];

Användning av komponent

Komponent motsvarar följande HTML element: Unordered List

API

Props

items: T[]

The items to be listed. The items will be listed in the given array order.

keyAttribute: string Optional

Unique attribute in items. V-for directive in vue requires a unique key to be able to optimize reuse of components.

Default: undefined

selectable: boolean Optional

If true the list will be selectable.

Default: false

checkbox: boolean Optional

Only applies if selectable:true Disable checkbox in interactive list and create a <a>-wrapper for each item, making them clickable

Default: true

v-model: T[] | undefined Optional

V-model will bind to value containing selected items.

Default: () => undefined

v-model:active: T | undefined Optional

V-model will bind to value containing the current active item.

Default: () => undefined

elementId: string Optional

Unique item id that will be used instead of the automatically generated one.

Default: () => ElementIdService.generateElementId()

Events

change

Emitted when item is activated, i.e. clicked

Arguments:

• <anonymous>: T

click

Emitted when item is activated, i.e. clicked

Arguments:

• <anonymous>: T

select

Emitted when item is selected.

Arguments:

• <anonymous>: T

unselect

Emitted when item is unselected.

Arguments:

• <anonymous>: T

update:active

V-model active event.

Arguments:

• <anonymous>: T

update:modelValue

V-model event to update value property.

Arguments:

• <anonymous>: Array

Slots

default

Slot for displaying an item. The item object is available through v-slot="{ <propertyName> }", e.g. v-slot="{ item }".

Bindings:

• item: unknown

empty

Slot for displaying a message when list is empty. Default text is 'Listan är tom' (key fkui.list.empty).

screenreader

Slot for screen reader text when checkbox (to selecte item) get focus. The item object is available through v-slot="{ <propertyName> }", e.g. v-slot="{ item }".

Bindings:

• item: T — The object to be screen read.