Referencia API

Inputs

Todavía no hay inputs documentados.

Outputs

Todavía no hay outputs documentados.

Templates

Todavía no hay templates documentados.

Variables CSS

Column Layout & Structure

Control the overall layout, spacing, and structure of board columns

`--hub-column-bg`

Tipo: color

Por defecto:#f8f9fa

Background color for board columns

Ejemplos:

#ffffff#f8f9fatransparent

`--hub-column-color`

Tipo: color

Por defecto:#212529

Text color within board columns

Ejemplos:

#333333rgb(33, 37, 41)var(--bs-body-color)

`--hub-column-border-color`

Tipo: color

Por defecto:#dee2e6

Border color around board columns

Ejemplos:

#e9ecefvar(--bs-border-color)transparent

`--hub-column-border-width`

Tipo: length

Por defecto:1px

Width of column borders

Ejemplos:

02px0.5rem

`--hub-column-border-radius`

Tipo: length

Por defecto:0.375rem

Border radius for column corners

Ejemplos:

00.5rem1rem16px

`--hub-column-gap`

Tipo: length

Por defecto:1rem

Spacing between columns

Ejemplos:

0.5rem1.5rem2rem

`--hub-column-padding`

Tipo: length

Por defecto:1rem

Internal padding within columns

Ejemplos:

0.75rem1.25rem1.5rem

Column Headers & Footers

Customize the appearance of column headers and footers

`--hub-column-cap-bg`

Tipo: color

Por defecto:#ffffff

Background color for column headers

Ejemplos:

#f8f9favar(--bs-light)transparent

`--hub-column-cap-color`

Tipo: color

Por defecto:#212529

Text color for column headers

Ejemplos:

#495057var(--bs-dark)#333

`--hub-column-cap-padding`

Tipo: length

Por defecto:0.75rem 1rem

Padding inside column headers

Ejemplos:

0.5rem 1rem1rem 1.25rem1rem

`--hub-column-cap-border-bottom`

Tipo: border

Por defecto:1px solid #dee2e6

Bottom border for column headers

Ejemplos:

2px solid #dee2e6none1px dashed #ccc

Card Styling

Customize the appearance of individual cards within columns

`--hub-card-bg`

Tipo: color

Por defecto:#ffffff

Background color for cards

Ejemplos:

#f8f9fargba(255,255,255,0.9)transparent

`--hub-card-color`

Tipo: color

Por defecto:#212529

Text color for cards

Ejemplos:

#333333var(--bs-body-color)#495057

`--hub-card-border`

Tipo: border

Por defecto:1px solid #dee2e6

Border around cards

Ejemplos:

2px solid #dee2e6none1px dashed #ccc

`--hub-card-border-radius`

Tipo: length

Por defecto:0.375rem

Border radius for card corners

Ejemplos:

00.5rem0.75rem12px

`--hub-card-padding`

Tipo: length

Por defecto:1rem

Internal padding within cards

Ejemplos:

0.75rem1.25rem1rem 1.5rem

`--hub-card-margin`

Tipo: length

Por defecto:0.5rem 0

Margin around cards

Ejemplos:

0.25rem 00.75rem 01rem 0

`--hub-card-shadow`

Tipo: shadow

Por defecto:0 2px 4px rgba(0,0,0,0.1)

Box shadow for cards

Ejemplos:

0 1px 3px rgba(0,0,0,0.1)0 4px 8px rgba(0,0,0,0.15)none

Drag & Drop States

Visual feedback and states for drag-and-drop interactions

`--hub-card-hover-shadow`

Tipo: shadow

Por defecto:0 4px 8px rgba(0,0,0,0.15)

Enhanced shadow when hovering over cards

Ejemplos:

0 6px 12px rgba(0,0,0,0.2)0 2px 6px rgba(0,0,0,0.1)none

`--hub-card-dragging-opacity`

Tipo: number

Por defecto:0.5

Opacity of cards while being dragged

Ejemplos:

0.30.70.8

`--hub-drop-zone-bg`

Tipo: color

Por defecto:rgba(0,123,255,0.1)

Background color for active drop zones

Ejemplos:

rgba(40,167,69,0.1)rgba(255,193,7,0.1)transparent

`--hub-drop-zone-border`

Tipo: border

Por defecto:2px dashed #007bff

Border style for active drop zones

Ejemplos:

3px solid #28a7451px dotted #ffc107none

Animations & Transitions

Control timing and easing for animations and transitions

`--hub-transition-duration`

Tipo: string

Por defecto:0.2s

Duration for standard transitions

Ejemplos:

0.15s0.3s0.4s

`--hub-transition-easing`

Tipo: string

Por defecto:ease-in-out

Easing function for transitions

Ejemplos:

easelinearcubic-bezier(0.4, 0, 0.2, 1)

Estilos y theming

Todavía no hay ejemplos de estilos documentados. Esta sección incluirá recetas de personalización y ejemplos de theming.