Board Item
<gstock-board-item>
|
GstockBoardItem
Examples
<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="drag-indicator" 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" class="board-item-action">
Add
</gstock-button>
</gstock-board-item>
<style>
.board-item-action {
pointer-events: auto;
}
</style>