Adobe Spectrum-Designsystem.

Name / Regel	Wert / Konfiguration	Verwendung
`theme`	`defaultTheme`	Erforderliches Theme-Objekt auf Root-Ebene, importiert aus @adobe/react-spectrum.
`colorScheme`	`light \| dark`	Explizite Überschreibung der Betriebssystemeinstellung.
`scale`	`medium \| large`	Skalierung für präzise und grobe Zeigegeräte; normalerweise sollte Provider die Auswahl übernehmen.
`locale`	`BCP 47 language tag`	Kontext für Gebietsschema und Schreibrichtung.
`breakpoints`	`custom name → pixel width`	In diesem Leitfaden werden tablet: 640 und desktop: 1024 explizit festgelegt, um widersprüchliche Standardwerte auf der Referenzseite zu vermeiden.
`isDisabled / isReadOnly`	`boolean group defaults`	Verschachtelte Provider und einzelne Props können das Verhalten der Gruppe überschreiben.

Basiszuordnungen für Dimensionen

Name / Regel	Wert / Konfiguration	Verwendung
`size-50`	`4px base`	Kleiner Abstand.
`size-100`	`8px base`	Zugehörige Steuerelemente.
`size-150`	`12px base`	Abstand in der Symbolleiste.
`size-200`	`16px base`	Abstand in der Inspektorgruppe.
`size-250`	`20px base`	Mittlerer Abstand.
`size-300`	`24px base`	Innenabstand des Panels.
`size-400`	`32px base`	Größerer Gruppenabstand.
`size-500`	`40px base`	Abstand zwischen Abschnitten.
`size-600`	`48px base`	Großzügige Struktur.
`size-1000`	`80px base`	Fester Illustrationsbereich.
`size-2400`	`192px base`	Beispielbreite des Inspektors.
`size-6000`	`480px base`	Große Fläche mit begrenzter Größe.

Style-Props und adaptive Werte

Name / Regel	Wert / Konfiguration	Verwendung
`marginStart / marginEnd`	`DimensionValue`	Logischer Abstand; für die Unterstützung der Schreibrichtung left/right vorziehen.
`padding / backgroundColor`	`View style props`	Eine eigene äußere Fläche erstellen, statt interne native Steuerelemente zu überschreiben.
`width`	`size-* \| CSS length \| calc(...)`	Beispiel: calc(100% - size-2000).
`responsive value`	`{base: value, tablet: value}`	Die Schlüssel entsprechen den expliziten Provider-Breakpoints.
`UNSAFE_style / UNSAFE_className`	`last-resort escape hatch`	Nicht auf private DOM-Strukturen oder Styles von Komponenten setzen.
`single-line-height`	`32 base mapping`	Die semantische Dimension verwenden, statt zu behaupten, alle Steuerelemente seien immer 32px groß.

Vertrag für die Auswahl in Collections

Name / Regel	Wert / Konfiguration	Verwendung
`selectionMode`	`none \| single \| multiple`	Das Beispiel verwendet multiple für eine Stapelauswahl.
`selectedKeys`	`Set of row keys \| all`	Bei kontrolliertem Zustand muss der all-Sentinel behandelt werden.
`onSelectionChange`	`callback with selection`	Die Auswahl nicht als Genehmigung oder erfolgreichen Export interpretieren.
`disallowEmptySelection`	`boolean`	Nützlich für eine erforderliche Einzelauswahl; bei optionalen Export-Stapeln weggelassen.
`TableHeader → Column`	`column anatomy`	Spalten für dynamisches Rendering mit stabilen Schlüsseln versehen.
`TableBody → Row → Cell`	`row anatomy`	Datensatz-IDs gewährleisten eine stabile Identität der Collection.

Zusammenspiel von Auswahlfeld und Text

Name / Regel	Wert / Konfiguration	Verwendung
`label`	`persistent text`	Die Auswahl des Exportformats benennen.
`selectedKey`	`one item key`	Kontrolliertes Format, etwa png oder jpeg.
`onSelectionChange`	`key callback`	Ein anderer Vertrag als bei einem DOM-Event-Handler.
`Item key`	`stable key`	Wertidentität unabhängig von der sichtbaren Beschriftung.
`Heading level`	`1–6`	Semantische Überschriftenebene; die native Gestaltung ergibt sich aus dem Kontext.
`Button onPress`	`press callback`	Aktivierung über verschiedene Eingabemethoden statt einer eigenen, nur mit der Maus bedienbaren Aktion.

Adobe Spectrum-Designsystem: vollständiger Leitfaden

Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.

DESIGN-adobe-spectrum.md

Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.

Leitfaden herunterladen

Adobe Spectrum-Designsystem: v3 bewusst wählen und Spectrum-Generationen nicht mischen

Was dieses Beispiel installiert

Adobe dokumentiert Spectrum 2 inzwischen neben der v3-Bibliothek. Diese Seite entscheidet sich für @adobe/react-spectrum@3, da dessen Verträge für Provider, Collections und Style-Props ein vollständiges, dokumentiertes Beispiel zur Asset-Prüfung bilden. Ein Rezept für v3 ist für eine bestehende v3-Anwendung nützlich, sollte aber nicht als neueste Spectrum-Implementierung bezeichnet werden. Wer eine neue Nutzung in Betracht zieht, sollte vor der Wahl einer Generation die verlinkte Migrationsreferenz prüfen.
Aus diesem OpenDesign-Leitfaden

Der praktische Unterschied zeigt sich im Code. v3 übergibt size-300 über Style-Props und stellt Provider defaultTheme bereit. Der Migrationsleitfaden überträgt diese Konventionen in ein anderes Styling-API. Nur den Paketnamen auszutauschen, migriert das Beispiel nicht; Komponentenimporte, Styling und unterstützte Eigenschaften müssen gemeinsam geprüft werden.

Adobe Spectrum-Designsystem: Provider koordiniert Erscheinungsbild, Skalierung und Gebietsschema

Ein Root, mehrere unabhängige Einstellungen

Provider stellt die Umgebung für Tabelle, Auswahlfeld und Schaltfläche bereit. Das Theme-Objekt enthält Definitionen für Farbschema und Skalierung. colorScheme kann die Betriebssystemeinstellung überschreiben, während scale Eingabeeigenschaften berücksichtigt. Diese Einstellungen sind voneinander unabhängig: Eine dunkle Desktop-Fläche erfordert keine großen Touch-Ziele, und ein heller Touchscreen sollte nicht versehentlich ein dichtes Maus-Layout übernehmen.

Für den normalen Produktionseinsatz sollte scale automatisch festgelegt werden. Bei einer Komponentenuntersuchung kann die explizite Auswahl von medium oder large beim Vergleich der Steuerelemente helfen, sollte aber als Einstellung für die Prüfung beschrieben werden. locale legt den Sprachkontext fest, übersetzt jedoch nicht die Projektdaten. Kampagnennamen, Prüfnotizen und Rezeptbeschriftungen bleiben Inhalte der Anwendung.

Adobe Spectrum-Designsystem: Unterstützte Dimensionen und externe Layout-Props verwenden

Eine benannte Skalierung ist mehr als eine Pixel-Kurzform

Die Basiszuordnung von size-100 ist 8, von size-200 16 und von size-300 24. Die Referenztabelle enthält weitere nützliche Stufen. Eine Dimension vom Typ size-* kann sich an die Plattformskalierung anpassen; ein Wert vom Typ static-size-* tut dies absichtlich nicht. Diesen Unterschied beim Festlegen der Größe eines Inspektors oder eines Interaktionsziels beachten. Werden alle auf dem Desktop aufgelösten Werte in CSS übernommen, geht die Anpassung verloren, die die Komponenten-Umgebung bereitstellt.

Flex und View geben dem Beispiel eine stabile äußere Struktur, ohne die Interna von TableView umzuschreiben. Die Tabelle kann mit flex wachsen und sich mit minWidth={0} verkleinern; der Inspektor ist auf der Basisstufe gestapelt und erhält am expliziten Tablet-Breakpoint eine begrenzte Größe. Das Padding gehört auf die View, der die Fläche gehört. Die Dokumentation rät davon ab, interne Farben, Rahmen und Typografie über unsichere Umgehungslösungen zu überschreiben.

Adobe Spectrum-Designsystem: Native Farben und Typografie dem Theme überlassen

Eine Beispielpalette von einem Token-Export unterscheiden

Die Vorschau zeigt eine dezente graue Arbeitsfläche, neutrale Steuerelemente und farbenfrohe Originalillustrationen. Diese Illustrationsfarben sind keine zertifizierten Spectrum-Tokenwerte. Im nativen Beispiel beziehen unterstützte Komponenten ihr Erscheinungsbild aus defaultTheme. Für eine eigene native Fläche sollten die dokumentierten Werte von backgroundColor verwendet werden, statt anzunehmen, dass ein einzelner ermittelter Hexwert in beiden Farbschemata funktioniert.

Heading bietet in seinem Kontext sowohl semantische Struktur als auch eine Spectrum-Darstellung. Der Seitentitel verwendet level={1}; Text dient für gewöhnliche Inhalte wie die Anzahl der ausgewählten Elemente. Die eigene HTML-Vorschau verwendet eine von der Anwendung ausgewählte Systemschrift als Fallback sowie eigene Schriftgrößen. Sie veranschaulicht den Arbeitsablauf und die relative Hierarchie, behauptet jedoch nicht, dass die Schrift im umgebenden OpenDesign oder die Typografie der Illustrationen der Spectrum-Schriftenspezifikation entspricht.

Adobe Spectrum-Designsystem: Eine Collection-Tabelle umfasst Schlüssel, Spalten und Auswahlsemantik

Auswahl ist ein Datenvertrag

Die Tabelle wird aus TableHeader und Column sowie TableBody, Row und Cell aufgebaut. Jedes Asset hat eine stabile ID. Über selectedKeys und onSelectionChange wird die Auswahl gesteuert, sodass der Exportinspektor die Anzahl aus demselben Zustand ableiten kann. Ein Asset lässt sich umbenennen, ohne seine Identität zu ändern. Würde die Position der Zeile als Identität dienen, wäre die Auswahl nach einer Neusortierung instabil.

Die Auswahl kann der Platzhalter für „alle“ sein. Das Setup löst ihn vor dem Erstellen eines Rezepts in alle aktuellen Assets auf. Ein leeres Set bleibt zulässig, da die Stapelverarbeitung optional ist; disallowEmptySelection wird absichtlich nicht aktiviert. Lege in einer Remote- oder paginierten Anwendung fest, was „alle“ für diese Datenquelle bedeutet, statt einfach anzunehmen, dass die aktuell gerenderten Zeilen die vollständige Sammlung darstellen.

Asset-Identität: stabiler Schlüssel, der für die Sammlung verwendet wird.
Ansicht: Welches Motiv im eigenständigen Beispiel größer angezeigt wird.
Stapel-Auswahl: Welche Schlüssel im vorbereiteten Rezept enthalten sind.

Adobe Spectrum Designsystem: Picker und Button vervollständigen den Exportinspektor

Das Format wird unabhängig vom Stapel gesteuert

Picker verwendet ein sichtbares Label und stabile Item-Schlüssel. selectedKey ist png oder jpeg; onSelectionChange liefert den ausgewählten Schlüssel. Das unterscheidet sich davon, event.target.value aus einem nativen Select auszulesen. Das ausgewählte Format bleibt erhalten, wenn der Stapel geleert wird. So kann eine prüfende Person die Auswahl anpassen, ohne ein Preset neu erstellen zu müssen.

Button verwendet onPress zur Aktivierung und isDisabled, wenn keine Assets ausgewählt sind. Das native Beispiel serialisiert IDs und Format in ein lokales Rezept. Es verarbeitet keine Bilddaten, erstellt keine echte Exportdatei und kontaktiert keinen Asset-Dienst. Diese klare Abgrenzung ist sinnvoll: Die Aktion und ihre Eingaben sind konkret, auch wenn die Konvertierungs-Engine nicht Teil des Designsystems ist.

Adobe Spectrum Designsystem: Passe die Komposition an, statt die Grafik zusammenzudrücken

Den Breakpoint-Vertrag festlegen

Dieses Beispiel definiert tablet:640 und desktop:1024. Diese Festlegung ist explizit, da die Provider-Seite derzeit widersprüchliche Standardwerte in den Erläuterungen und den generierten API-Metadaten enthält. Responsive Werte beziehen sich auf genau diese Schlüssel. Der Inspektor nimmt zunächst die volle Breite ein und rückt dann neben die flexible Tabelle. Die Anwendung legt diese Breakpoints fest; sie sind kein neuer allgemeingültiger Spectrum-Standard.

Die eigenständige Illustration zeigt eine große Arbeitsfläche mit einem Inspektor an der Seite und einer Miniaturansichten-Leiste. Auf kleinen Bildschirmen wird der Inspektor in den normalen Dokumentfluss verschoben, während das Motiv sein Seitenverhältnis beibehält. Text wie Abmessungen und Format steht außerhalb der Grafik. So bleibt er lesbar und verändert das geprüfte Motiv nicht.

Adobe Spectrum Designsystem: Prüfen, Auswählen und Vorbereiten sind unterschiedliche Aktionen

Die Demonstration testbar machen

Wenn du auf eine Miniaturansicht klickst, ändern sich die große Illustration und ihre beschreibenden Metadaten. Über ein Kontrollkästchen lässt sich der Exportstapel ändern. Durch diese Trennung kann ein nicht ausgewähltes Asset geprüft werden, ohne es versehentlich zu exportieren. Die Vorschau zeigt die Anzahl der ausgewählten Assets an und behält das Format bei, während die prüfende Person den Stapel ändert.

Native TableView stellt die Interaktionen der Sammlung bereit. Das HTML-Beispiel verwendet gewöhnliche Schaltflächen und Kontrollkästchen und bildet nicht das vollständige Tastaturmodell des Rasters nach. Beide bieten eine per Tastatur erreichbare Möglichkeit, die gezeigten Aktionen auszuführen. Das Ergebnis des Rezepts wird als Text ausgegeben und ist nicht nur ein vorübergehender visueller Effekt. So lässt sich genau prüfen, welche IDs und welches Format vorbereitet wurden.

Adobe Spectrum Designsystem: Integriere zuerst den nativen Ausschnitt, bevor du das Tool erweiterst

Einen echten Exportdienst an einer klar definierten Stelle anbinden

Installiere die v3-Suite in einer bestehenden React-App und verwende dann den vollständigen Eintrag weiter unten. Das Beispiel enthält Provider, Importe, Sammlungsdaten, Auswahlstatus, Formatstatus und Ergebnisstatus. In einer Produktionsintegration würde die Rezeptvorbereitung durch eine Exportanfrage ersetzt und das bestätigte Ergebnis für jedes Asset angezeigt. Benenne die lokale Antwort nicht in „Export abgeschlossen“ um, bevor dieser Dienst existiert.

Verwende bei der Migration zu Spectrum 2 die Zuordnungen von Adobe für Abmessungen, Breakpoints und Komponentenänderungen. Prüfe das Auswahlverhalten und die Beibehaltung des Formats erneut; auch eine optisch ähnliche Tabelle kann einen anderen Vertrag haben. Halte die Quellgeneration explizit fest, damit künftige Mitwirkende keinen v3-Provider mit inkompatiblen Beispielen kombinieren.

Wähle ein Asset aus und prüfe, ob seine ID im lokalen Rezept erscheint.
Wähle alle Assets aus, ändere PNG zu JPEG und prüfe die vollständige Auswahl.
Leere die Auswahl und prüfe, ob die Aktion deaktiviert wird, während das Format ausgewählt bleibt.
Verkleinere das Ansichtsfenster und prüfe, ob Prüfen, Auswählen und die Rezeptausgabe weiterhin erreichbar sind.

Adobe Spectrum Designsystem-Komponentenbeispiele

Vollständige, eigenständige interaktive Demo

Speichere das vollständige Dokument als index.html und öffne es in einem Browser. Eigenständige Interpretation des dokumentierten v3-Ablaufs für Sammlungen und Inspektor in HTML/CSS. Farbpalette und Motive dienen der Veranschaulichung; weder die native Spectrum-Laufzeit noch eine Bildkonvertierung sind enthalten.

html

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Spectrum asset inspector study</title><style>*{box-sizing:border-box}body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#2c2c2c;background:#f5f5f5}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #999;border-radius:16px;background:white;color:inherit;padding:5px 16px;font-weight:600}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #1473e6;outline-offset:3px}button:disabled{opacity:.45;cursor:not-allowed}header{padding:16px 24px;background:white;border-bottom:1px solid #ddd;display:flex;justify-content:space-between;gap:16px;align-items:center}header b{font-size:16px}header span{font-size:12px;color:#666}.workspace{display:grid;grid-template-columns:160px minmax(0,1fr) 230px;min-height:540px}.rail{padding:20px 16px;border-right:1px solid #ddd}.rail h2,.inspector h2{font-size:14px;margin:0 0 16px}.thumb{margin-bottom:20px}.thumb button{width:100%;border-radius:4px;padding:6px;background:transparent;border:2px solid transparent}.thumb button[aria-pressed=true]{border-color:#1473e6;background:#e7f1ff}.thumb label{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:6px}.thumb input{accent-color:#1473e6}.mini{height:70px;display:grid;place-items:center;font-size:26px;font-weight:800;letter-spacing:-2px;background:linear-gradient(125deg,#fcab64,#ee6e63);color:#472c52;border-radius:2px}.thumb:nth-of-type(2) .mini{background:linear-gradient(125deg,#c4bdff,#8b7ddd)}.thumb:nth-of-type(3) .mini{background:linear-gradient(125deg,#9ed5c8,#449c8c)}.canvas-wrap{padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.canvas-meta{align-self:stretch;display:flex;justify-content:space-between;margin-bottom:20px;font-size:12px;color:#666;gap:12px}.art{width:min(100%,540px);aspect-ratio:4/3;background:linear-gradient(130deg,#ffbd7c,#ed8178);color:#412754;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate}.art:before{content:'';position:absolute;z-index:-1;width:70%;aspect-ratio:1;border:45px solid rgba(255,240,197,.65);border-radius:50%;left:-24%;bottom:-25%}.art:after{content:'';position:absolute;z-index:-1;width:60%;aspect-ratio:1;background:rgba(217,69,117,.32);border-radius:50%;right:-25%;top:-25%}.art small{letter-spacing:3px;font-size:11px;font-weight:700}.art h1{font-size:clamp(28px,5vw,64px);line-height:.96;margin:16px 0 18px;letter-spacing:-3px;font-weight:800}.art p{font-size:12px;margin:0}.art[data-art=square]{aspect-ratio:1;background:linear-gradient(130deg,#d8d0ff,#9588dd)}.art[data-art=story]{aspect-ratio:9/16;max-height:470px;width:auto;min-width:210px;background:linear-gradient(130deg,#caeee2,#69b7a5)}.art[data-art=story] h1{font-size:40px;letter-spacing:-2px}.canvas-note{font-size:12px;color:#666;margin-top:16px}.inspector{background:white;padding:24px 20px;border-left:1px solid #ddd}.inspector dl{margin:0 0 24px}.inspector dt{font-size:12px;color:#666;margin-top:16px}.inspector dd{margin:4px 0 0;overflow-wrap:anywhere}.inspector hr{border:0;border-top:1px solid #ddd;margin:24px 0}.inspector label{display:block;font-size:12px;font-weight:600;margin-bottom:6px}.inspector select{width:100%;border:1px solid #999;border-radius:4px;padding:8px;background:white}.selected-count{font-size:12px;margin:16px 0}.primary{background:#1473e6;border-color:#1473e6;color:white;width:100%}.primary:hover{background:#0d66d0}.result{margin:0 24px 20px;padding:16px;background:white;border:1px solid #ddd;border-radius:4px}.result[hidden]{display:none}.result h2{font-size:16px;margin:0 0 8px}.result pre{white-space:pre-wrap;font:12px/1.5 ui-monospace,monospace}.result p{font-size:12px;margin:0}footer{padding:12px 24px;color:#666;font-size:12px;border-top:1px solid #ddd;background:white}@media(max-width:760px){.workspace{grid-template-columns:110px minmax(0,1fr)}.rail{padding:16px 8px}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid #ddd;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}.inspector h2{grid-column:1/-1;margin:0}.inspector dl{margin:0}.inspector hr{display:none}.canvas-wrap{padding:16px}.art h1{letter-spacing:-1px}.art p{padding:0 12px}.canvas-meta{display:block}.art:before{border-width:24px}header span{display:none}.inspector dt:first-child{margin-top:0}}@media(max-width:440px){.workspace{grid-template-columns:1fr}.rail{border-right:0;border-bottom:1px solid #ddd;display:flex;gap:8px}.rail h2{display:none}.thumb{flex:1;min-width:0;margin:0}.mini{height:44px;font-size:20px}.thumb label{font-size:11px}.art[data-art=story]{max-height:390px}.canvas-meta{display:flex}.inspector{grid-template-columns:1fr 1fr;padding:20px 16px}header{padding:16px}.result{margin:0 16px 16px}}
</style></head><body><header><b>Campaign library <span>/ Autumn collection</span></b><button id="select-all">Select all</button></header><main><div class="workspace"><nav class="rail" aria-label="Artwork variants"><h2>Assets</h2><div class="thumb"><button data-id="hero" aria-label="Inspect campaign master" aria-pressed="true"><div class="mini" aria-hidden="true">Made.</div></button><label><input type="checkbox" value="hero" checked>Master</label></div><div class="thumb"><button data-id="square" aria-label="Inspect social square" aria-pressed="false"><div class="mini" aria-hidden="true">Made.</div></button><label><input type="checkbox" value="square">Square</label></div><div class="thumb"><button data-id="story" aria-label="Inspect vertical story" aria-pressed="false"><div class="mini" aria-hidden="true">Made.</div></button><label><input type="checkbox" value="story">Story</label></div></nav><section class="canvas-wrap" aria-label="Selected artwork"><div class="canvas-meta"><span id="art-name">Campaign master</span><span id="dimensions">1600 × 1200</span></div><div class="art" id="art" data-art="hero" role="img" aria-label="Original orange campaign artwork with the words Made for what comes next"><div><small>AUTUMN COLLECTION</small><h1>Made for<br>what comes<br>next.</h1><p>Small ideas. A different perspective.</p></div></div><p class="canvas-note">Original artwork · illustrative preview</p></section><aside class="inspector"><h2>Export inspector</h2><dl><dt>Selected artwork</dt><dd id="detail-name">Campaign master</dd><dt>Source dimensions</dt><dd id="detail-dimensions">1600 × 1200 px</dd><dt>Review</dt><dd>Draft artwork</dd></dl><hr><div><label for="format">Export format</label><select id="format"><option value="png">PNG</option><option value="jpeg">JPEG</option></select><p class="selected-count" id="selected-count">1 asset selected</p><button class="primary" id="prepare">Prepare recipe</button><p style="font-size:12px;color:#666">Creates a local recipe only. No files are converted.</p></div></aside></div><section class="result" id="result" hidden><h2>Local export recipe</h2><pre id="recipe"></pre><p role="status" id="status"></p></section></main><footer>React Spectrum v3 collection study · HTML/CSS interpretation with illustrative colors. Inspecting an artwork and selecting it for export are independent.</footer><script>
const assets={hero:{name:'Campaign master',dimensions:'1600 × 1200',color:'orange'},square:{name:'Social square',dimensions:'1080 × 1080',color:'purple'},story:{name:'Vertical story',dimensions:'1080 × 1920',color:'green'}};const boxes=[...document.querySelectorAll('.thumb input')],$=id=>document.getElementById(id);document.querySelectorAll('[data-id]').forEach(button=>button.onclick=()=>{document.querySelectorAll('[data-id]').forEach(b=>b.setAttribute('aria-pressed',String(b===button)));const id=button.dataset.id,a=assets[id];$('art').dataset.art=id;$('art').setAttribute('aria-label','Original '+a.color+' campaign artwork with the words Made for what comes next');$('art-name').textContent=$('detail-name').textContent=a.name;$('dimensions').textContent=a.dimensions;$('detail-dimensions').textContent=a.dimensions+' px';});function update(){let n=boxes.filter(b=>b.checked).length;$('selected-count').textContent=n+' asset'+(n===1?'':'s')+' selected';$('prepare').disabled=n===0;$('select-all').textContent=n===boxes.length?'Clear selection':'Select all';$('result').hidden=true;}boxes.forEach(b=>b.onchange=update);$('format').onchange=()=>{$('result').hidden=true;};$('select-all').onclick=()=>{const all=boxes.every(b=>b.checked);boxes.forEach(b=>b.checked=!all);update();};$('prepare').onclick=()=>{const ids=boxes.filter(b=>b.checked).map(b=>b.value);$('recipe').textContent=JSON.stringify({format:$('format').value,assets:ids},null,2);$('status').textContent='Recipe prepared for '+ids.length+' assets. No image files were converted.';$('result').hidden=false;};
</script></body></html>

Die Motive sind eigens erstellte Beispielinhalte. Beim Vorbereiten eines Rezepts entstehen Auswahlmetadaten, keine konvertierten Bilddateien. Dieses Dokument lädt weder Spectrum v3 noch Spectrum 2.

Vollständiger Einstieg für die native Implementierung

Die vollständige Implementierung aus dem Setup, hier zusammen mit den gezielten Erläuterungen zu API zusammengestellt. Beachte die in den Setup-Anweisungen dokumentierten Voraussetzungen für Pakete und Builds.

jsx

// Terminal: npm install @adobe/react-spectrum@3
// Existing React app with <div id="root"></div>; entry: src/main.jsx
import * as React from 'react';
import {createRoot} from 'react-dom/client';
import {Provider, defaultTheme, Flex, View, Heading, Text, Button,
  TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item}
  from '@adobe/react-spectrum';
const assets = [
  {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'},
  {id: 'square', name: 'Social square', dimensions: '1080 × 1080'},
  {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'}
];
function AssetReview() {
  const [keys, setKeys] = React.useState(new Set(['hero']));
  const [format, setFormat] = React.useState('png');
  const [recipe, setRecipe] = React.useState('');
  const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id));
  return <Provider theme={defaultTheme} breakpoints={{tablet: 640, desktop: 1024}}>
    <View padding="size-300">
      <Heading level={1}>Campaign exports</Heading>
      <Flex direction={{base: 'column', tablet: 'row'}} gap="size-300">
        <TableView aria-label="Campaign assets" selectionMode="multiple"
          selectedKeys={keys} onSelectionChange={setKeys} flex minWidth={0}>
          <TableHeader><Column key="name">Asset</Column><Column key="dimensions">Dimensions</Column></TableHeader>
          <TableBody items={assets}>{asset => <Row key={asset.id}>
            <Cell>{asset.name}</Cell><Cell>{asset.dimensions}</Cell>
          </Row>}</TableBody>
        </TableView>
        <Flex direction="column" gap="size-200" width={{base:'100%',tablet:'size-2400'}}>
          <Picker label="Export format" selectedKey={format} onSelectionChange={setFormat}>
            <Item key="png">PNG</Item><Item key="jpeg">JPEG</Item>
          </Picker>
          <Text>{selected.length} assets selected</Text>
          <Button variant="accent" isDisabled={!selected.length} onPress={() =>
            setRecipe(JSON.stringify({format, assets:selected.map(a=>a.id)}, null, 2))}>
            Prepare recipe
          </Button>
        </Flex>
      </Flex>
      <p role="status">{recipe ? 'Local recipe prepared. No image files were converted.' : ''}</p>
      {recipe && <pre style={{whiteSpace:'pre-wrap'}}>{recipe}</pre>}
    </View>
  </Provider>;
}
createRoot(document.getElementById('root')).render(<AssetReview />);

Vollständiges Beispiel für Sammlungen und Inspektor mit v3 in einer bestehenden React-App. Es erstellt ein Exportrezept im lokalen Status, aber keine Bilddateien. Behalte die aufgelöste Paketversion in der Lockdatei bei und kombiniere diesen Einstieg nicht mit Spectrum-2-Importen.

Die Auswahl kann „alle“ sein und ist nicht auf ein Set beschränkt

Normalisiere den Vertrag der Sammlung, bevor du den Stapel berechnest oder die Aktion aktivierst. Dieses Fragment verwendet die Assets und Schlüssel aus dem vollständigen Setup.

jsx

const selected = keys === 'all'
  ? assets
  : assets.filter(asset => keys.has(asset.id));
<Button variant="accent" isDisabled={selected.length === 0}
  onPress={() => setRecipe(JSON.stringify({format, assets: selected.map(a => a.id)}))}>
  Prepare recipe
</Button>

Stabile IDs bleiben bei Sortierung und Umbenennung erhalten.
Ein leerer Stapel deaktiviert nur die Rezeptaktion; das aktuelle Format bleibt erhalten.

Responsiver Inspektor mit expliziten Breakpoint-Namen

Verwende dieselben Schlüssel für Provider und die responsiven Props. Die Zahlen sind bewusst gewählte Anwendungskonfiguration.

jsx

<Provider theme={defaultTheme} breakpoints={{tablet:640, desktop:1024}}>
  <Flex direction={{base:"column", tablet:"row"}} gap="size-300">
    <View flex minWidth={0}>Asset table</View>
    <View width={{base:"100%",tablet:"size-2400"}}>Export inspector</View>
  </Flex>
</Provider>