Board

<gstock-board> | GstockBoard

API

Propiedades

Nombre Descripción Reflects Tipo Por defecto
disabled Disables the entire list and prevents all items from being dragged. Reflects boolean false
orientation The orientation of the list. Reflects 'vertical' | 'horizontal' 'vertical'
showFeedback
show-feedback 		When true, provides visual feedback during drag operations. Reflects boolean true
keyboardSorting
keyboard-sorting 		When true, items can be sorted by keyboard navigation (arrow keys + space/enter). Reflects boolean false
updateComplete

A read-only promise that resolves when the component has finished updating.

Aprende más sobre atributos y propiedades .

Eventos

Nombre React Event Descripción Event Detail
gstock-sort-event onGstockSortEvent Emitted when items are reordered. -
gstock-drag-start-event onGstockDragStartEvent Emitted when dragging starts. -
gstock-drag-end-event onGstockDragEndEvent Emitted when dragging ends. -

Aprende más sobre eventos .

Slots

Nombre Descripción
default The board items. Should contain <gstock-board-item> elements.

Aprende más sobre slots .

Métodos

Nombre Descripción
handleItemDragStart(
item: GstockBoardItem ,
event: DragEvent
) 		Handles when a sortable item starts being dragged.
handleItemDragEnd(
item: GstockBoardItem ,
_event: DragEvent
) 		Handles when a sortable item finishes being dragged.
handleItemDrop(
targetItem: GstockBoardItem ,
event: DragEvent
) 		Handles when an item is dropped on another sortable item.
moveItem(
fromIndex: number ,
toIndex: number
) 		Programmatically moves an item from one position to another.
getItemOrder( ) Gets the current order of items as an array of their values.
setItemOrder(
values: string[]
) 		Sets the order of items based on an array of values.

Aprende más sobre métodos .

Propiedades personalizadas

Nombre Descripción Default
--gap The gap between board items.
--background-color The background color of the list.
--border-radius The border radius of the list.
--padding The padding of the list.

Aprende más sobre propiedades personalizadas .

Partes

Nombre Descripción
base The component’s base wrapper.
list The list container.

Aprende más sobre partes CSS .

Dependencias

Este componente importa automáticamente las siguientes dependencias.