Board

<gstock-board> | GstockBoard

API

Properties

Name Description Reflects Type Default
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.

Learn more about attributes and properties .

Events

Name React Event Description 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. -

Learn more about events .

Slots

Name Description
default The board items. Should contain <gstock-board-item> elements.

Learn more about slots .

Methods

Name Description
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.

Learn more about methods .

Custom Properties

Name Description 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.

Learn more about custom properties .

CSS Parts

Name Description
base The component’s base wrapper.
list The list container.

Learn more about CSS parts .

Dependencies

This component automatically imports the following dependencies.