Создайте поиск устройств с ограниченной областью поиска с помощью DDS v3: семантические цвета, адаптивная типографическая шкала, токены отступов и композиция InputGroup, поведение фильтрации которой задаётся приложением.
Независимая интерпретация HTML/CSS отступов, типографики и задокументированных цветов полей ввода в светлой теме DDS v3; системный резервный шрифт. · Справочник по реализации
02
Справочник по дизайну дизайн-система Dell
Основы DDS v3 и проверенная Storybook-версия Vanilla 3.2.0. Цветовые значения — это примеры для светлой темы из таблицы токенов Text Input, а не универсальная тема. В предпросмотре эти правила применяются в независимых HTML/CSS; в примере кода загружается настоящая CDN-версия DDS с указанием версии.
Дизайн-система Dell DDS v3 и границы его реализации
Композиция, а не служба поиска
DDS отделяет переиспользуемые визуальные основы от поведения продукта. Для этого списка подходящая точка интеграции — InputGroup: нативное поле ввода со слотами для дополнительных элементов. Конструктора Search нет, и дизайн-система не выполняет поиск устройств. Приложение хранит введённый текст, применённый запрос и выбранное устройство как отдельные значения. Благодаря этому разница между вводом и отправкой запроса видна пользователю.
Пример для разработчиков ниже рассчитан на Vanilla 3.2.0. Его CSS и JavaScript используют одну и ту же версию. В существующих интеграциях v2 применяется другая упаковка; перед переходом на эти импорты следуйте документации по миграции. Текущий пакет предназначен для внутреннего использования в Dell; в документации приведён CDN, позволяющий оценить эту композицию без ссылки на несуществующий публичный реестр npm.
Дизайн-система Dell Семантические поверхности и границы
Используйте опубликованные названия ролей
В справочной таблице указаны значения полей ввода для светлого режима из официальной документации компонентов. После загрузки стилей DDS в коде продукта следует использовать семантические переменные CSS. Основной текст и вторичная поверхность формируют удобную для чтения область результатов; граница фирменного цвета обозначает край поля ввода. Неактивный цвет переднего плана намеренно приглушён и не должен использоваться для метаданных по умолчанию.
Глобальные цветовые примитивы задают семантические роли, которые, в свою очередь, используются для принятия решений на уровне компонентов. При разработке приложения обращайтесь к семантическим ролям, а не переопределяйте глобальную палитру. Для тёмного оформления нужен фактически поддерживаемый режим токенов; если изменить только фон страницы, цвета полей, меток и фокуса перестанут сочетаться. Локальный пример остаётся в светлом режиме.
Дизайн-система Dell Адаптивная типографика без изменения структуры документа
Один семантический заголовок, два визуальных размера
Заголовок страницы остаётся h1 при любом размере экрана. Используются документированные размеры Heading 1: 48/56 для широких экранов и 40/48 при ширине менее 1024px. В примере применяются системные резервные шрифты, поскольку это независимая локальная интерпретация; штатная таблица стилей предоставляет ресурсы шрифтов DDS. Для описаний используется Body 2, а для компактных метаданных устройств — Body 3.
Модель устройства, название офиса или статус поддержки могут переноситься на новую строку. Идентификаторы должны оставаться читаемыми; не обрезайте единственную копию инвентарного номера. В компактном макете меняются визуальная иерархия и расположение столбцов, но связь метки со значением сохраняется.
Дизайн-система Dell Шаг в четыре пикселя для разделённого представления
Соотносите шаги шкалы с расстояниями между элементами
Используйте sm между связанными действиями, lg внутри строк результатов и xl между запросом и областью результатов. На широких экранах для внешней оболочки можно использовать 2xl. Это примеры применения опубликованной шкалы в приложении, а не официальные предписания использовать именно такие отступы на каждой странице поиска.
Начальный символ поиска — декоративный; область поиска определяет видимая метка. Кнопка очистки в конце поля отображается, только если введён текст. В ручном режиме форма отправляется явно, поэтому клавиша Enter и видимая кнопка Search devices действуют одинаково. Пока пользователь только вводит текст, текущий набор результатов не меняется.
DDS также описывает автоматический режим, в котором поиск начинается после ввода четвёртого символа. Не добавляйте фильтрацию после ввода одного символа в интерфейс, для которого документирован такой режим. При переходе на автоматический поиск уберите кнопку ручной отправки и продуманно реализуйте порог запуска, отмену запросов и объявление результатов. В приведённом примере выбран ручной режим.
Дизайн-система Dell Черновик, применённый запрос и выбор
Переходы между состояниями в примере
Очистка сбрасывает и поле ввода, и применённый фильтр, возвращает полный пример списка устройств и переводит фокус обратно в поле. Выбор — отдельное действие кнопки: оно показывает сведения об устройстве, не меняя запрос. Если ничего не найдено, отображаются применённая фраза и явный способ сбросить поиск. Интерфейс не утверждает, что выполнен поиск по удалённому списку устройств.
Введите название или инвентарный номер устройства; текущие результаты не изменятся до отправки запроса.
Отправьте форму и обновите количество результатов по отфильтрованному локальному массиву.
Просмотрите результат или очистите запрос; оставьте фокус на элементе, инициировавшем действие.
Дизайн-система Dell Метки, области страницы и объявления
Явно обозначьте область поиска
Форма — это область поиска с именем Device inventory. Постоянные метка и пояснение остаются видимыми и во время ввода. Значок очистки — кнопка с aria-label, а не span с обработчиком щелчка. Декоративные символы скрыты от вспомогательных технологий. Количество результатов объявляется вежливым сообщением состояния и меняется после отправки, а не при каждом нажатии клавиши.
Каждый результат — настоящая кнопка с состоянием нажатия и полным доступным именем. Заголовок сведений указывает, какой элемент просматривается. Ни одна ссылка не имитирует переход на страницу управления устройствами, поскольку у этого примера нет серверной части для управления. Текущий выбор обозначен и рамкой, и текстовой меткой.
Дизайн-система Dell Подключите реальные ресурсы и инициализируйте группу
Начните с документированного пакета
Для авторизованного внутреннего приложения установите @dds/components из Dell Artifactory и подключите dds-styles.css через конвейер таблиц стилей проекта. Для автономного прототипа используйте приведённые ниже ссылки на публичный CDN с фиксированной версией. Инициализируйте InputGroup после добавления разметки. Обработчики отправки, очистки и фильтрации остаются частью кода приложения.
Введите Latitude, не отправляя запрос, и убедитесь, что прежнее количество результатов не меняется. Отправьте запрос и проверьте найденное устройство. Выполните поиск по отсутствующему инвентарному номеру, проверьте состояние «ничего не найдено», затем очистите запрос и убедитесь, что снова отображаются все устройства из примера. Повторите проверки с клавиатуры и на узком экране. Эти проверки подтверждают работу примера, но не сертифицируют продукт Dell или сетевую интеграцию на его основе.
Сохраните полный документ как index.html и откройте его в браузере. Независимая интерпретация DDS v3: HTML/CSS, типографика и документированные цвета для полей ввода в светлом режиме; системный резервный шрифт.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Device inventory — DDS v3 study</title><style>*{box-sizing:border-box}body{margin:0;font:16px/24px Arial,sans-serif;color:#1d2c3b;background:white}header{padding:16px 32px;border-bottom:1px solid #c5d4e3;color:#00468b}main{padding:32px;max-width:1200px;margin:auto}h1{font-size:48px;line-height:56px;font-weight:300;margin:16px 0}h2{font-size:24px;line-height:32px;font-weight:400}label{display:block;font-weight:bold;margin-bottom:8px}.search{display:flex;gap:8px;align-items:stretch}.input{border:1px solid #00468b;display:flex;align-items:center;flex:1;min-width:0}.input span{padding:8px 12px}input{border:0;padding:12px 0;width:100%;min-width:0;font:inherit;background:transparent;color:inherit}button{font:inherit;cursor:pointer;padding:8px 16px;background:white;color:#00468b;border:1px solid #00468b}button:hover{background:#ebf1f6}button:focus-visible,input:focus-visible{outline:3px solid #00468b;outline-offset:3px}.input button{border:0}.submit{background:#00468b;color:white}.submit:hover{background:#003567}.helper{font-size:14px;line-height:20px;color:#516478}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:24px}.result{display:flex;text-align:left;align-items:center;gap:16px;width:100%;padding:16px;margin-bottom:12px;border:1px solid #c5d4e3;color:#1d2c3b}.result[aria-pressed=true]{border:2px solid #00468b;padding:15px;background:#ebf1f6}.result strong{display:block}.result small{display:block;font-size:14px}.device{width:64px;height:40px;border:3px solid #516478;border-radius:3px;background:linear-gradient(140deg,#dcebf6,#86afce);position:relative;flex-shrink:0}.device:after{content:'';position:absolute;bottom:-8px;left:-7px;right:-7px;height:4px;background:#516478;border-radius:0 0 4px 4px}.device.desktop{width:28px;height:48px;background:#c5d4e3;margin:0 18px}.device.desktop:after{display:none}aside{background:#ebf1f6;padding:24px;align-self:start}aside h2{margin-top:0}dt{font-size:12px;color:#516478;margin-top:16px}dd{margin:4px 0 0}footer{padding:16px 32px;border-top:1px solid #c5d4e3;font-size:12px;line-height:20px;color:#516478}#empty{padding:24px;background:#ebf1f6}#count{font-size:14px;margin:24px 0 0}@media(max-width:1023px){h1{font-size:40px;line-height:48px}}@media(max-width:650px){main{padding:16px}.layout{grid-template-columns:1fr}.search{flex-wrap:wrap}.input{flex-basis:100%}.submit{width:100%}header,footer{padding:16px}}</style><header>DEVICE OPERATIONS <span style="float:right;font-size:12px">Local sample inventory</span></header><main><h1>Find a device</h1><p>Review model, location and support coverage in one place.</p><form role="search" aria-label="Device inventory" id="form"><label for="query">Search devices</label><p class="helper" id="help">Enter a model or asset tag. Results change after you submit.</p><div class="search"><div class="input"><span aria-hidden="true">⌕</span><input id="query" type="search" aria-describedby="help"><button type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div><button class="submit" type="submit">Search devices</button></div></form><p id="count" role="status"></p><div class="layout"><section aria-label="Matching devices"><div id="results"></div><div id="empty" hidden>No devices match this query. Clear the search to view the sample inventory.</div></section><aside aria-label="Device details"><span class="helper">SELECTED DEVICE</span><h2 id="name"></h2><dl><dt>Asset tag</dt><dd id="tag"></dd><dt>Location</dt><dd id="location"></dd><dt>Support coverage</dt><dd id="coverage"></dd><dt>Record source</dt><dd>Local demonstration data</dd></dl></aside></div></main><footer>Independent HTML/CSS interpretation of DDS v3. Published light-mode colors, spacing and type sizes; system fallback font. No Dell services are connected.</footer><script>
const devices=[{name:'Latitude 7450',tag:'LT-104',location:'London · Design studio',coverage:'Through 30 June 2027',kind:'laptop'},{name:'Precision 5680',tag:'PR-208',location:'Berlin · Engineering lab',coverage:'Through 15 March 2028',kind:'laptop'},{name:'OptiPlex 7020',tag:'OP-316',location:'Amsterdam · Front desk',coverage:'Through 20 August 2027',kind:'desktop'}];let selected=devices[0],applied='';const $=id=>document.getElementById(id);function render(){const matches=devices.filter(d=>(d.name+' '+d.tag).toLowerCase().includes(applied.toLowerCase()));$('count').textContent=matches.length+' matching device'+(matches.length===1?'':'s')+(applied?' for “'+applied+'”':'');$('results').replaceChildren();$('empty').hidden=matches.length>0;for(const d of matches){const b=document.createElement('button');b.className='result';b.setAttribute('aria-pressed',String(d===selected));const pic=document.createElement('span');pic.className='device '+d.kind;pic.setAttribute('aria-hidden','true');const label=document.createElement('span'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=d.name;small.textContent=d.tag+' · '+d.location.split(' · ')[0];label.append(strong,small);b.append(pic,label);b.onclick=()=>{selected=d;render()};$('results').append(b)}for(const key of ['name','tag','location','coverage'])$(key).textContent=selected[key]}
$('form').onsubmit=e=>{e.preventDefault();applied=$('query').value.trim();render()};$('query').oninput=()=>{$('clear').hidden=!$('query').value};$('clear').onclick=()=>{$('query').value='';applied='';$('clear').hidden=true;render();$('query').focus()};render();
</script></html>
В этом документе реализовано собственное поведение поиска. Чтобы проверить инициализацию InputGroup на закреплённых версиях таблицы стилей и скрипта, воспользуйтесь нативным примером DDS.
Полный пример нативной реализации
Полная реализация из раздела настройки собрана здесь вместе с пояснениями к отдельным частям API. Следуйте документированным требованиям к пакетам и сборке из раздела настройки.
Сохраните файл как index.html и откройте его локально с доступом к сети, чтобы загрузить документированный CDN DDS 3.2.0. Здесь используются настоящая инициализация InputGroup и локальная фильтрация; серверная часть Dell не подключается. Внутренняя альтернатива с npm: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . Встроенный предварительный просмотр — это автономная интерпретация HTML/CSS, а не работа с этим CDN.
InputGroup с поиском, управляемым приложением
В примере нативное поле ввода объединено с дополнительными элементами, инициализируется InputGroup и подключается отправка настоящей формы. Начальный символ — локальный декоративный знак; использование шрифта значков не предполагается.
javascript
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
В проверенной документации v3 нет отдельного Search API.
Для кнопок только со значком используйте aria-label; фильтрацию обеспечивает приложение.
04
Дизайн-система Dell Настройка агента
Отправная точка для реализации
Сохраните файл как index.html и откройте его локально с доступом к сети, чтобы загрузить документированный CDN DDS 3.2.0. Здесь используются настоящая инициализация InputGroup и локальная фильтрация; серверная часть Dell не подключается. Внутренняя альтернатива с npm: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . Встроенный предварительный просмотр — это автономная интерпретация HTML/CSS, а не работа с этим CDN.
Создайте поиск по ограниченному списку устройств, используя полную композицию InputGroup из DDS 3.2.0. Сохраните ручную отправку, видимую метку области поиска, локальное объявление результатов и возможность очистки. Используйте семантические токены DDS и адаптивную типографику; не придумывайте Search API и не заменяйте импорты устаревшими импортами v2.
05
Дизайн-система Dell Источники и область применимости
Независимое справочное руководство по DDS v3. Для доступа к внутреннему пакету нужны права на реестр Dell; для прототипирования в документации указан публичный CDN с фиксированной версией. Это не означает, что работа выполнена от имени Dell, подключена система управления ресурсами или получена официальная сертификация.
