<gstock-board-item value="item-1">Board Item</gstock-board-item>

Apariencia

Tamaño

Utilice el atributo size para cambiar el tamaño del item del tablero.

<gstock-board-item size="small">Small</gstock-board-item>
<gstock-board-item size="medium">Medium</gstock-board-item>
<gstock-board-item size="large">Large</gstock-board-item>

Estados

Deshabilitado

Utilice el atributo disabled para deshabilitar un elemento específico de la lista.

<gstock-board-item value="item-1" disabled>Disabled</gstock-board-item>

Slots

Prefijo y Sufijo

Los elementos pueden incluir contenido adicional usando diferentes slots como prefix, suffix, etc.

<gstock-board-item value="item-1">
  <gstock-icon slot="prefix" name="star"></gstock-icon>
  Board Item
  <gstock-badge slot="suffix" variant="info" size="small">Nuevo</gstock-badge>
</gstock-board-item>

Handle Personalizado

Utilice el atributo handle para especificar qué parte del elemento actúa como el controlador de arrastre.

<gstock-board-item value="item-1" handle=".custom-handle">
  <gstock-icon-button
    slot="prefix"
    class="custom-handle"
    icon="more-vertical"
    variant="plain"
    size="small"></gstock-icon-button>
  Drag from the icon button on the left
</gstock-board-item>

Contenido interactivo

Utilice el estilo pointer-events: auto; en los elementos que necesiten interacción por parte del usuario, por ejemplo para que un botón se pueda presionar.

<gstock-board-item value="item-1">
  <gstock-icon slot="prefix" name="star"></gstock-icon>
  Element with interactive button
  <gstock-button slot="suffix" variant="outlined" size="small" style="pointer-events: auto">
    Add
  </gstock-button>
</gstock-board-item>