Komponent

FList

Status

Produktionsklar

Innehåll

• Användning av komponent
• API

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.

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

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

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.