Zum Inhalt springen
Fieldbook
Menü
Anmelden
DE

Schaltflächen

Channel tile row

Channel tile row: Eine umlaufende Reihe quadratischer Symbolkacheln unter einer kleinen Beschriftung, wobei jede Kachel beim Schweben in ihre eigene reservierte Farbe überblendet.

Channel tile row verwenden

Channel tile row verwendet das Vorschauformat „Karte“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

EinstellungTypStandardwertVorschaugrenzen
captiontextReach the teamBis zu 32 Zeichen
tileSizenumber50Von 32 bis 84; Schrittweite 2
gapnumber10Von 0 bis 24; Schrittweite 1
accentcolor#313638Keine weitere Grenze in den Metadaten.
perTileTintbooleantrueKeine weitere Grenze in den Metadaten.
Für welche Frameworks ist Channel tile row verfügbar?

Channel tile row ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Channel tile row?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: motion.

Welche Details zur Barrierefreiheit sind in Channel tile row erkennbar?

Der React-Quellcode von Channel tile row enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Channel tile row reduzierte Bewegung?

Channel tile row liest die Bewegungseinstellung im React-Quellcode über useReducedMotion(). Von der Einstellung abhängige Ausdrücke in index.tsx: delay: reduced ? 0 : index * 0.05; reduced ? false : { opacity: 0, y: 6 }. Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Icon reveal chip von Fieldbook aus der Kategorie Schaltflächen.
2476Icon reveal chipSchaltflächenEin kleiner umrissener Chip, der beim Schweben mit seinem Akzent überflutet, während die Beschriftung nach links gleitet und ein verstecktes Glyph von rechts eingeblendet wird.
Standbild der UI-Komponente Rising disc icon row von Fieldbook aus der Kategorie Schaltflächen.
2417Rising disc icon rowSchaltflächenEine Reihe ringförmiger Symbolschaltflächen, bei denen beim Schweben eine gefüllte Scheibe hinter ihrem Ring hervorgehoben wird und die Glyphe im leeren Umriss abgedunkelt bleibt.
Standbild der UI-Komponente Shrinking cap icon row von Fieldbook aus der Kategorie Schaltflächen.
2037Shrinking cap icon rowSchaltflächenEine Reihe runder Symbolschaltflächen, deren Füllung sich hinter einer dunklen Kappe verbirgt, die beim Schweben zusammenfällt und die Farbe vom Rand nach innen freilegt.
Standbild der UI-Komponente Collapsing share button von Fieldbook aus der Kategorie Schaltflächen.
2553Collapsing share buttonSchaltflächenEine beschriftete Pille, die zu einer runden Glyphe schrumpft, während ein Streifen Verbindungsplättchen in den Raum schwebt, den sie hinterlassen hat.
Standbild der UI-Komponente Expanding icon pill von Fieldbook aus der Kategorie Schaltflächen.
2714Expanding icon pillSchaltflächenEine runde Symbolschaltfläche, die sich beim Schweben in eine beschriftete Pille ausdehnt und bei Eintreffen einer Akzentfüllung ihre Glyphe gegen ein Wort eintauscht.
Standbild der UI-Komponente Four edge wipe icon button von Fieldbook aus der Kategorie Schaltflächen.
2157Four edge wipe icon buttonSchaltflächenEine quadratische Symbolschaltfläche, deren Glyphe kleiner wird, während vier geneigte Felder von jeder Kante nach innen gleiten und die Kachel mit einer Akzentfarbe überfluten.