Изучите Spectrum v3 от React на примере таблицы творческих ресурсов с возможностью выбора и панели настройки экспорта. Разберитесь в темах Provider и масштабе полей ввода, поддерживаемых стилевых свойствах, коллекциях с ключами и различиях между v3 и более новой реализацией Spectrum 2.
Оригинальная интерпретация HTML/CSS документированной коллекции v3 и рабочего процесса инспектора. Палитра и иллюстрации приведены для примера; среда выполнения Spectrum и преобразование изображений не используются. · Справочник по реализации
02
Справочник по дизайн-системе Adobe Spectrum
API Spectrum v3 и таблицы соответствия размеров React. Числовые значения в столбце размеров показывают базовое преобразование из таблицы миграции Adobe; значения size-*, зависящие от масштаба, могут адаптироваться для сенсорного управления. Это не экспорт токенов Spectrum 2. Цвета в предварительном просмотре и пользовательские иллюстрации выбраны для приложения.
Adobe Spectrum: выбирайте дизайн-система v3 осознанно; не смешивайте поколения Spectrum
Что устанавливает этот пример
Теперь Adobe документирует Spectrum 2 наряду с библиотекой v3. На этой странице рассматривается @adobe/react-spectrum@3: его контракты для Provider, коллекций и свойств стилей составляют полноценный документированный пример проверки ресурсов. Рецепт для v3 пригодится существующему приложению на v3, но его не следует представлять как самую новую реализацию Spectrum. Прежде чем принимать решение о внедрении, изучите указанную ссылку на руководство по миграции и выберите подходящее поколение.
Практическая разница видна в коде. В v3 размер 300 передаётся через свойства стиля, а defaultTheme — в Provider. В руководстве по миграции показано, как перенести эти соглашения на другой подход к стилизации API. Замены только имени пакета недостаточно: импорты компонентов, стилизацию и поддерживаемые свойства нужно проверить вместе.
Adobe Spectrum Провайдер дизайн-системы координирует оформление, масштаб и локаль
Один корневой элемент, несколько независимых настроек
Provider задаёт окружение, используемое таблицей, средством выбора и кнопкой. Объект темы содержит определения цветовой схемы и масштаба. colorScheme может переопределить настройки операционной системы, а масштаб учитывает характеристики устройств ввода. Это независимые настройки: тёмный интерфейс рабочего стола не требует крупных сенсорных областей, а светлый экран с сенсорным управлением не должен случайно перенимать плотную компоновку для мыши.
В обычной рабочей среде оставьте автоматический выбор масштаба. При изучении компонента можно явно выбрать средний или крупный масштаб, чтобы сравнить элементы управления, но это следует обозначить как настройку для проверки. Параметр locale задаёт языковой контекст, а не переводит данные проекта. Названия кампаний, заметки к проверкам и названия рецептов остаются содержимым приложения.
Дизайн-система Adobe Spectrum: используйте поддерживаемые размеры и внешние свойства компоновки
Именованная шкала — это больше, чем сокращённая запись в пикселях
Базовое соответствие: размер 100 — 8, размер 200 — 16, а размер 300 — 24. В справочной таблице приведены и другие полезные значения. Размерность size-* может адаптироваться с учётом масштаба платформы, тогда как static-size-* намеренно остаётся неизменной. Учитывайте это различие при настройке размеров инспектора или области взаимодействия. Если скопировать все итоговые значения для настольной версии в CSS, адаптация, обеспечиваемая окружением компонента, будет утрачена.
Flex и View обеспечивают примеру устойчивую внешнюю структуру, не изменяя внутреннее устройство TableView. Таблица может растягиваться с помощью flex и сжиматься с помощью minWidth={0}; на базовом уровне инспектор располагается вертикально, а на явно заданном планшетном брейкпоинте получает ограниченный размер. Отступы задаются у View, которому принадлежит поверхность. Документация не рекомендует переопределять внутренние цвета, границы и типографику с помощью небезопасных обходных механизмов.
Дизайн-система Adobe Spectrum: предоставьте теме управление нативными цветами и типографикой
Отделите палитру образцов от экспорта токенов
В предварительном просмотре — сдержанный серый холст, нейтральные элементы управления и оригинальная яркая иллюстрация. Цвета этой иллюстрации не являются сертифицированными значениями токенов Spectrum. В нативном примере внешний вид поддерживаемых компонентов определяется defaultTheme. Для собственной нативной поверхности используйте документированные значения backgroundColor, а не предполагайте, что один выбранный образец hex-кода подойдёт для обеих цветовых схем.
Heading задаёт не только оформление Spectrum в контексте, но и семантическую структуру. Для заголовка страницы используется level={1}; Text — для обычного содержимого, например количества выбранных элементов. В пользовательском предварительном просмотре HTML используются выбранный приложением системный шрифт в качестве резервного и заданные размеры шрифта. Это демонстрация рабочего процесса и относительной иерархии, а не утверждение, что шрифт окружающего OpenDesign или типографика иллюстрации соответствуют спецификации шрифтов Spectrum.
Дизайн-система Adobe Spectrum: таблица коллекции с ключами, столбцами и логикой выбора
Выбор — часть контракта данных
Таблица построена из TableHeader и Column, а также TableBody, Row и Cell. У каждого ресурса есть постоянный id. Благодаря selectedKeys и onSelectionChange выбор контролируется, поэтому панель экспорта может рассчитывать количество элементов на основе того же состояния. Пользователь может переименовать ресурс, не меняя его идентификатор. Если использовать в качестве идентификатора позицию строки, выбор станет ненадёжным при изменении порядка элементов.
В качестве значения выбора может использоваться специальное значение all. Перед созданием рецепта этот пример преобразует его в список всех текущих ресурсов. Пустой Set тоже допустим, поскольку пакетный выбор необязателен; свойство disallowEmptySelection намеренно не включено. В приложении с удалёнными данными или постраничной навигацией определите, что означает all для этого источника данных, а не предполагайте, что отрисованные строки составляют всю коллекцию.
Идентификатор ресурса: постоянный ключ коллекции.
Просмотр: какая иллюстрация показана крупнее в отдельном образце.
Пакетный выбор: какие ключи войдут в подготовленный рецепт.
Дизайн-система Adobe Spectrum: Picker и Button дополняют панель инспектора экспорта
Формат задаётся независимо от пакетного выбора
В Picker используется видимая метка и постоянные ключи Item. selectedKey принимает значение png или jpeg; onSelectionChange возвращает выбранный ключ. Это отличается от получения event.target.value из нативного select. Формат сохраняется и после очистки пакета, поэтому проверяющий может изменить выбор, не создавая пресет заново.
Для активации Button использует onPress, а при отсутствии выбранных ресурсов становится недоступной благодаря isDisabled. В нативном примере идентификаторы и формат сериализуются в локальный рецепт. Пример не преобразует изображения, не создаёт готовый файл экспорта и не обращается к сервису ресурсов. Это наглядная граница реализации: действие и его входные данные заданы явно, хотя механизм преобразования находится за пределами дизайн-системы.
Дизайн-система Adobe Spectrum: адаптируйте композицию, а не сжимайте иллюстрацию
Задайте контракт контрольных точек
В этом примере заданы tablet:640 и desktop:1024. Такое решение указано явно, поскольку сейчас на странице Provider значения по умолчанию противоречат друг другу в пояснительном тексте и сгенерированных метаданных API. Адаптивные значения ссылаются именно на эти ключи. На базовом размере панель инспектора занимает всю ширину, а затем располагается рядом с гибкой таблицей. За эти контрольные точки отвечает приложение; это не новый универсальный стандарт Spectrum.
В отдельном образце иллюстрации показан большой холст с боковой панелью инспектора и лентой миниатюр. На небольшом экране панель инспектора переходит в обычный поток документа, а пропорции иллюстрации сохраняются. Размеры и формат указаны за пределами иллюстрации: эти сведения остаются читаемыми и не влияют на просматриваемое изображение.
Дизайн-система Adobe Spectrum: просмотр, выбор и подготовка — разные действия
Сделайте демонстрацию пригодной для проверки
Нажатие на миниатюру меняет крупное изображение и его описательные метаданные. Флажок меняет состав пакета экспорта. Независимость этих действий позволяет просматривать невыбранный ресурс, не добавляя его случайно в экспорт. Предварительный просмотр показывает количество выбранных элементов, а формат сохраняется при изменении пакета.
Нативный TableView предоставляет взаимодействие с коллекцией; в образце HTML используются обычные кнопки и флажки, которые не воспроизводят полную модель клавиатурной навигации по таблице. В обоих вариантах можно выполнять показанные действия с клавиатуры. Результат представлен текстом, а не только временным визуальным эффектом, поэтому проверяющий может точно увидеть, какие идентификаторы и формат подготовлены.
Дизайн-система Adobe Spectrum: сначала интегрируйте нативную часть, затем расширяйте инструмент
Подключите реальный сервис экспорта в явно обозначенной точке
Установите набор v3 в существующее приложение React, затем используйте полный пример ниже. В нём показаны провайдер, импорты, данные коллекции, состояние выбора, состояние формата и состояние результата. В рабочей интеграции подготовку рецепта следует заменить запросом на экспорт и показывать подтверждённый результат для каждого ресурса. Не называйте локальный ответ «Экспорт завершён», пока такой сервис не подключён.
При переходе на Spectrum 2 используйте таблицы соответствия Adobe для размеров, контрольных точек и изменений компонентов. Ещё раз проверьте поведение выбора и сохранение формата: визуально похожая таблица всё равно может иметь другой контракт. Явно указывайте используемую версию, чтобы будущие участники проекта не смешивали Provider для v3 с несовместимыми примерами.
Выберите один ресурс и убедитесь, что его id появился в локальном рецепте.
Выберите все ресурсы, смените PNG на JPEG и проверьте полный список выбранных элементов.
Очистите выбор и убедитесь, что кнопка действия становится недоступной, а формат остаётся выбранным.
Уменьшите ширину окна просмотра и убедитесь, что просмотр, выбор и вывод рецепта остаются доступными.
Сохраните весь документ как index.html и откройте его в браузере. Оригинальная интерпретация HTML/CSS документированного рабочего процесса с коллекцией и панелью инспектора v3. Палитра и иллюстрации служат для примера; нативная среда выполнения Spectrum и преобразование изображений не используются.
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>
Иллюстрация — оригинальный пример содержимого. Подготовка рецепта создаёт метаданные выбора, а не преобразованные файлы изображений; этот документ не загружает Spectrum v3 или Spectrum 2.
Полный пример нативной реализации
Полная реализация из раздела настройки собрана здесь вместе с пояснениями к отдельным частям API. Следуйте документированным требованиям к пакетам и сборке из раздела настройки.
Полный пример коллекции и панели инспектора для v3 в существующем приложении React. Он создаёт рецепт экспорта в локальном состоянии, а не файлы изображений. Зафиксируйте разрешённую версию пакета в lockfile и не смешивайте этот пример с импортами Spectrum 2.
Значением выбора может быть all, а не только Set
Перед расчётом пакета или включением действия приведите контракт коллекции к единому виду. В этом фрагменте используются assets и keys из полной настройки.
В справочном тексте для Provider и таблице сгенерированных значений по умолчанию указаны разные контрольные точки; явная карта устраняет неоднозначность.
Логические отступы marginStart и marginEnd лучше адаптируются, чем физические отступы слева и справа.
04
Дизайн-система Adobe Spectrum: настройка агента
Отправная точка для реализации
Полный пример коллекции и панели инспектора для v3 в существующем приложении React. Он создаёт рецепт экспорта в локальном состоянии, а не файлы изображений. Зафиксируйте разрешённую версию пакета в lockfile и не смешивайте этот пример с импортами Spectrum 2.
Используйте @adobe/react-spectrum v3 с Provider и defaultTheme. Создайте таблицу TableView с ключами и панель инспектора экспорта, используя Picker, Item, Flex, View и Button. Обрабатывайте выбор как Set или all, сохраняйте формат при изменении выбора и называйте результат локальным рецептом, пока не подключён настоящий сервис преобразования. Явно задайте ключи контрольных точек tablet/desktop и используйте поддерживаемые свойства стилей. Не смешивайте API v3 и Spectrum 2.
05
Дизайн-система Adobe Spectrum: источники и область применения
Разбор реализации OpenDesign по актуальной документации React Spectrum v3 с использованием @adobe/react-spectrum. Также доступен Spectrum 2 с другими API; на этой странице v3 не называется самой новой версией реализации. Отдельный предварительный просмотр панели ресурсов — оригинальная интерпретация HTML/CSS с иллюстративными изображениями и цветами, выбранными приложением, а не нативный компонент Spectrum или редактор изображений с управлением цветом.
