API-Referenz

Hier ist der vollständige Vertrag für board: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Noch keine Inputs dokumentiert.

Outputs

Noch keine Outputs dokumentiert.

Templates

Noch keine Templates dokumentiert.

CSS-Variablen

Gestalte jedes Pixel mit 24 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.

Spaltenlayout & Struktur

Steuert das Gesamtlayout, die Abstände und die Struktur der board-Spalten

Variable	Standard	Typ	Beschreibung
`--hub-column-bg`	`#f8f9fa`	color	Hintergrundfarbe für board-Spalten `#ffffff#f8f9fatransparent`
`--hub-column-color`	`#212529`	color	Schriftfarbe innerhalb der board-Spalten `#333333rgb(33, 37, 41)var(--bs-body-color)`
`--hub-column-border-color`	`#dee2e6`	color	Rahmenfarbe um board-Spalten `#e9ecefvar(--bs-border-color)transparent`
`--hub-column-border-width`	`1px`	length	Breite der Spaltenrahmen `02px0.5rem`
`--hub-column-border-radius`	`0.375rem`	length	Rahmenradius für Spaltenecken `00.5rem1rem16px`
`--hub-column-gap`	`1rem`	length	Abstand zwischen Spalten `0.5rem1.5rem2rem`
`--hub-column-padding`	`1rem`	length	Innenabstand innerhalb der Spalten `0.75rem1.25rem1.5rem`

Spalten-Header & -Footer

Passt das Erscheinungsbild von Spalten-Headern und -Footern an

Variable	Standard	Typ	Beschreibung
`--hub-column-cap-bg`	`#ffffff`	color	Hintergrundfarbe für Spalten-Header `#f8f9favar(--bs-light)transparent`
`--hub-column-cap-color`	`#212529`	color	Schriftfarbe für Spalten-Header `#495057var(--bs-dark)#333`
`--hub-column-cap-padding`	`0.75rem 1rem`	length	Innenabstand innerhalb der Spalten-Header `0.5rem 1rem1rem 1.25rem1rem`
`--hub-column-cap-border-bottom`	`1px solid #dee2e6`	border	Unterer Rahmen für Spalten-Header `2px solid #dee2e6none1px dashed #ccc`

Card-Styling

Passt das Erscheinungsbild einzelner Cards innerhalb der Spalten an

Variable	Standard	Typ	Beschreibung
`--hub-card-bg`	`#ffffff`	color	Hintergrundfarbe für Cards `#f8f9fargba(255,255,255,0.9)transparent`
`--hub-card-color`	`#212529`	color	Schriftfarbe für Cards `#333333var(--bs-body-color)#495057`
`--hub-card-border`	`1px solid #dee2e6`	border	Rahmen um Cards `2px solid #dee2e6none1px dashed #ccc`
`--hub-card-border-radius`	`0.375rem`	length	Rahmenradius für Card-Ecken `00.5rem0.75rem12px`
`--hub-card-padding`	`1rem`	length	Innenabstand innerhalb der Cards `0.75rem1.25rem1rem 1.5rem`
`--hub-card-margin`	`0.5rem 0`	length	Außenabstand um Cards `0.25rem 00.75rem 01rem 0`
`--hub-card-shadow`	`0 2px 4px rgba(0,0,0,0.1)`	shadow	Schlagschatten für Cards `0 1px 3px rgba(0,0,0,0.1)0 4px 8px rgba(0,0,0,0.15)none`

Drag-&-Drop-Zustände

Visuelles Feedback und Zustände für Drag-and-Drop-Interaktionen

Variable	Standard	Typ	Beschreibung
`--hub-card-hover-shadow`	`0 4px 8px rgba(0,0,0,0.15)`	shadow	Verstärkter Schatten beim Überfahren von Cards `0 6px 12px rgba(0,0,0,0.2)0 2px 6px rgba(0,0,0,0.1)none`
`--hub-card-dragging-opacity`	`0.5`	number	Deckkraft von Cards während des Ziehens `0.30.70.8`
`--hub-drop-zone-bg`	`rgba(0,123,255,0.1)`	color	Hintergrundfarbe für aktive Drop-Zonen `rgba(40,167,69,0.1)rgba(255,193,7,0.1)transparent`
`--hub-drop-zone-border`	`2px dashed #007bff`	border	Rahmenstil für aktive Drop-Zonen `3px solid #28a7451px dotted #ffc107none`

Animationen & Übergänge

Steuert Timing und Easing für Animationen und Übergänge

Variable	Standard	Typ	Beschreibung
`--hub-transition-duration`	`0.2s`	string	Dauer für Standardübergänge `0.15s0.3s0.4s`
`--hub-transition-easing`	`ease-in-out`	string	Easing-Funktion für Übergänge `easelinearcubic-bezier(0.4, 0, 0.2, 1)`

Styling und Theming

Es sind noch keine Styling-Beispiele dokumentiert. Dieser Abschnitt wird Anpassungsrezepte und Theming-Beispiele enthalten.