Diagramme

Raised Slice Donut

Raised Slice Donut: Ein Donut, bei dem ein Slice dauerhaft über den Ring angehoben wird, indem sein Außenradius erweitert wird, und die Erhöhung beim Schweben zu jedem anderen Slice gleitet.

Weekly focus hours

Point at any slice to compare it with the raised one.

Deep work18h · 45%

40 hours logged across 5 categories.The raise returns to deep work whenever you look away.

Raised Slice Donut verwenden

Raised Slice Donut 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.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`accent`	`color`	`#38BDF8`	Keine weitere Grenze in den Metadaten.
`activeIndex`	`number`	`0`	Von 0 bis 4; Schrittweite 1
`raise`	`number`	`10`	Von 0 bis 24; Schrittweite 1
`holeRatio`	`number`	`0.55`	Von 0.2 bis 0.75; Schrittweite 0.05
`hueRange`	`number`	`90`	Von 20 bis 180; Schrittweite 5

Für welche Frameworks ist Raised Slice Donut verfügbar?

Raised Slice Donut 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 Raised Slice Donut?

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

Welche Details zur Barrierefreiheit sind in Raised Slice Donut erkennbar?

Der React-Quellcode von Raised Slice Donut enthält: Attribute und Ereignisbehandler (aria-hidden, aria-label, aria-live, onKeyDown, tabIndex); explizite Rollen (button, group); Tastenvergleiche (ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Escape). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Raised Slice Donut reduzierte Bewegung?

Raised Slice Donut liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). 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 Donut share chart von Fieldbook aus der Kategorie Diagramme.

2336Donut share chartDiagrammeEin Donut aus fünf Scheiben mit einer hohlen Mitte und haarfeinen Lücken, der sich auf der Halterung öffnet und diejenige Scheibe anhebt, über der sich der Zeiger befindet.

Standbild der UI-Komponente Donut with total von Fieldbook aus der Kategorie Diagramme.

2337Donut with totalDiagrammeEin Donut-Diagramm, das die laufende Summe in ein eigenes Loch einfügt und diese Anzeige auf das Segment austauscht, auf dem sich der Mauszeiger befindet oder der fokussiert ist.

Standbild der UI-Komponente Engraved label pie von Fieldbook aus der Kategorie Diagramme.

2348Engraved label pieDiagrammeEin solides Kreisdiagramm, das jeden Kategorienamen in seinem eigenen Segment in einer invertierten Farbe einfügt, sodass die Aufschlüsselung ohne äußere Beschriftungen oder Führungslinien angezeigt wird.

Standbild der UI-Komponente Leader line pie von Fieldbook aus der Kategorie Diagramme.

2377Leader line pieDiagrammeEin solides Kreisdiagramm, dessen Werte außerhalb des Kreises liegen und jeweils durch eine aus zwei Segmenten bestehende Führungslinie an ihren Ausschnitt gebunden sind.

Standbild der UI-Komponente Outside Value Pie von Fieldbook aus der Kategorie Diagramme.

2395Outside Value PieDiagrammeEin solides Kreisdiagramm mit bloßen Zahlen, die direkt außerhalb jedes Segments schweben und so positioniert sind, dass jede Beschriftung von der Mitte nach außen zeigt, ohne Verbindungslinien.

Standbild der UI-Komponente Seamless share pie von Fieldbook aus der Kategorie Diagramme.

2420Seamless share pieDiagrammeEine feste Torte, deren Scheiben Kante an Kante miteinander verbunden sind und zwischen denen keine Lücken oder Striche vorhanden sind. Das Schweben ist also das Einzige, was verrät, wo ein Teil endet und der nächste beginnt.