# Dell 设计系统

## Dell 设计系统 界面预览

提交本地查询、查看一条结果，并通过“清除”恢复库存列表。

## Dell 设计系统 设计参考

DDS v3 基础规范及经过验证的 Vanilla 3.2.0 Storybook。颜色值取自 Text Input 令牌表中的浅色模式预览，并非通用主题。预览使用独立的 HTML/CSS 规则；代码示例则加载真实的、带版本号的 DDS CDN。

### 间距

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --dds-spacing-xs | 4px / 0.25rem | 图标与标签的邻近关系。 |
| --dds-spacing-sm | 8px / 0.5rem | 相邻的搜索操作。 |
| --dds-spacing-md | 12px / 0.75rem | 紧凑的对象行。 |
| --dds-spacing-lg | 16px / 1rem | 结果内容内边距。 |
| --dds-spacing-xl | 24px / 1.5rem | 搜索区域与结果之间的间距。 |
| --dds-spacing-2xl | 32px / 2rem | 主页面内边距。 |
| --dds-spacing-3xl | 40px / 2.5rem | 区块间距。 |
| --dds-spacing-4xl | 48px / 3rem | 主要区块分界。 |
| --dds-spacing-5xl | 64px / 4rem | 较大的布局间距。 |
| --dds-spacing-6xl | 80px / 5rem | 宽松的版面布局。 |
| --dds-spacing-7xl | 96px / 6rem | 列表中最大的间距步进值。 |
### 浅色模式语义颜色示例

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| --dds-color-text-primary | #1D2C3B | 主要结果标签。 |
| --dds-color-background-surface-secondary | #EBF1F6 | 次要内容表面。 |
| --dds-color-border-brand-base | #00468B | 品牌色输入框边框。 |
| --dds-color-background-surface-inactive | #E1E1E1 | 未激活字段表面。 |
| --dds-color-border-inactive-base | #7E7E7E | 未激活边界。 |
| --dds-color-text-inactive | #B6B6B6 | 未激活标签；不可用于正文。 |
### 字体层级中的选定角色

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| Display 1 ≥1024px | 72px / 88px; weight 300 | 大号编辑式标题，不适用于密集的结果列表。 |
| Heading 1 ≥1024px | 48px / 56px; weight 300 | 宽版页面标题。 |
| Heading 1 <1024px | 40px / 48px; weight 300 | 紧凑页面标题。 |
| Heading 4 ≥1024px | 24px / 32px; weight 400 | 区块标题。 |
| Heading 4 <1024px | 20px / 28px; weight 400 | 紧凑区块标题。 |
| Body 2 | 16px / 24px; weight 400 | 默认段落角色。 |
| Body 3 | 14px / 20px; weight 400 | 密集元数据。 |
| Caption | 12px / 20px; weight 400 | 字段辅助内容。 |
| Button 1 | 16px / 24px; weight 500 | 默认操作标签。 |
### 搜索组合

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| InputGroup(element) | Initializer exported by @dds/components | 分组容器创建后，再初始化它。 |
| dds__input-group | Input and addon wrapper | 让输入框前后的插槽紧邻输入框。 |
| dds__text-input | Native input class | 查询和结果由应用负责管理。 |
| dds__input-addon | Accessory wrapper | 装饰性前置图标或清除操作。 |
| dds__button--ghost | Low-emphasis button modifier | 搜索/清除示例使用此变体。 |
| dds__button--icon-only | Icon-only button modifier | 仍需为按钮提供 aria-label。 |
### 样式加载

| 名称 / 规则 | 值 / 配置 | 用途 |
| --- | --- | --- |
| dds-styles.css | All-in-one starter | 包含组件样式、令牌、字体和辅助包。 |
| dds-tokens.css | Global and semantic tokens | 不包含组件令牌。 |
| dds-components.css | All component styles and component tokens | 采用分离式打包方案时，需与令牌和字体一同加载。 |
| dds-fonts.css | CDN font definitions | 为 DDS 字体渲染而加载。 |
| dds-grid.css | Grid classes | 单独的布局包。 |
| dds-icons.css | Icon classes | 仅靠此项不会加载图标字体；请参阅图标配置。 |
## Dell 设计系统 完整指南

实用指南，介绍如何为真实界面选择、应用和评审此系统。

完整指导、实现起点和源代码链接。

## Dell 设计系统 DDS v3 及其实现边界

### 这是组合方案，不是搜索服务

> DDS 将可复用的视觉基础与产品行为分开。对于这个库存界面，实用的集成点是 InputGroup：带有辅助插槽的原生输入框。没有可调用的 Search 构造器，设计系统也不会获取设备数据。应用将输入草稿、已应用的查询和选中的设备分别保存为独立值。这样一来，键入和提交之间的区别一目了然。

阅读配套规范

### 选择一个版本

以下公开的开发者示例面向 Vanilla 3.2.0。其 CSS 和 JavaScript 使用相同版本。现有的 v2 集成采用不同的打包方式；采用这些导入项之前，应先遵循迁移文档。当前软件包仅供 Dell 内部使用；文档中提供的 CDN 则为评估此组合方案提供了具体途径，无需虚构一个公开的 npm 注册表。

阅读配套规范

## Dell 设计系统 语义化界面表面与边界

### 使用已发布的角色名称

参考表记录了官方组件文档中的浅色模式输入值。产品代码应在加载 DDS 样式后使用语义 CSS 变量。主文本与次级表面构成清晰易读的结果区域；品牌边框用于标识输入框边界。非激活前景色有意弱化，不应作为默认的元数据颜色。

阅读配套规范

### 不要重新定义 DDS 令牌

全局颜色基元为语义角色提供基础，语义角色再支持组件级设计决策。应用开发者应引用语义角色，而不是覆盖全局色阶。深色外观需要实际支持的令牌模式；仅更改页面背景会导致字段、标签和焦点颜色不一致。本地示例保持浅色模式。

阅读配套规范

## Dell 设计系统 不改变文档结构的响应式排版

### 一个语义标题，两种视觉字号

页面标题在所有视口中都保持为 h1。宽屏布局采用文档规定的 Heading 1 字号 48/56；视口宽度低于 1024px 时采用 40/48。此示例使用系统回退字体，因为它是独立的本地实现；原生样式表会提供 DDS 字体资源。描述使用 Body 2，紧凑的设备元数据则使用 Body 3。

阅读配套规范

### 为真实名称留出空间

设备型号、办公地点或支持状态都可能换行。请确保标识符清晰可读，不要截断资产标签的唯一副本。紧凑布局会调整视觉层级和列排列，同时保持标签与对应值之间的关联。

阅读配套规范

## Dell 设计系统 分栏视图的四像素节奏

### 按关联关系分配间距等级

相关操作之间使用 sm，结果行内使用 lg，查询区域与结果区域之间使用 xl。较宽屏幕上的外层容器可使用 2xl。这些是应用对已发布间距级别的具体运用，并非官方规定每个搜索页面都必须采用这些确切的内边距。

阅读配套规范

### 密度与重排

DDS 描述了紧凑、默认和舒适三种网格。此示例的搜索控件采用舒适布局，同时允许每条结果中的元数据保持紧凑。在窄屏上，已选设备面板会排在结果列表之后，以保持阅读顺序。详情面板不会固定定位，因此不会遮挡最后一条结果。

- 在所有屏幕宽度下，都将搜索标签和辅助说明置于字段上方。

- 当行内空间不足时，让提交操作移至字段下方。

- 将已选设备详情移至结果下方，避免出现水平滚动。

阅读配套规范

## Dell 设计系统 搜索结构与行为

### 有意采用手动提交

前置搜索图标仅作装饰；可见标签用于说明库存范围。仅当输入内容不为空时，才显示末尾的清除控件。此处采用手动模式，通过表单提交，因此按 Enter 与点击可见的“搜索设备”按钮效果相同。仅更改输入内容不会影响已应用的结果集。

阅读配套规范

### 自动搜索是另一种交互约定

DDS 也描述了一种自动模式，会在输入第四个字符后开始搜索。对于文档说明采用该模式的界面，不要添加输入一个字符就立即筛选的行为。如果切换到自动搜索，请移除手动提交按钮，并有意实现触发阈值、取消操作和结果播报。此示例选择手动模式。

阅读配套规范

## Dell 设计系统 草稿、已应用的查询与选择

### 此示例中的状态转换

清除操作会重置输入内容和已应用的筛选条件，恢复完整的示例库存，并将焦点移回字段。选择是独立的按钮操作：它会显示资产详情，但不修改查询。无结果状态会显示已应用的搜索词，并提供明确的重置方式。它不会声称搜索了远程库存。

1. 输入资产名称或标签；提交前当前结果保持不变。

2. 提交表单，并根据筛选后的本地数组更新结果数量。

3. 查看某条结果或清除查询；焦点保留在触发操作的控件上。

阅读配套规范

## Dell 设计系统 标签、地标与播报

### 明确标示实际搜索范围

此表单是名为“设备库存”的搜索地标。输入时，持久可见的标签和辅助说明会一直显示。清除图标应为带有 aria-label 的按钮，而不是绑定点击处理程序的 span。装饰性符号应对辅助技术隐藏。结果数量通过礼貌提示状态消息播报；它会在提交后更新，而不是在每次按键时都播报。

阅读配套规范

### 选择不等于导航

每条结果都使用真实按钮，具有按下状态和完整的无障碍名称。详情标题会标明当前查看的项目。由于此示例没有管理后端，因此不会使用链接假装可以打开设备管理页面。当前选中项同时通过边框和文本标签显示。

阅读配套规范

## Dell 设计系统 加载真实资源并初始化组合控件

### 从文档所述的资源包开始

对于已获授权的内部应用，请从 Dell Artifactory 安装 @dds/components，并通过项目样式表管线导入其 dds-styles.css。对于独立概念验证，请使用下方列出的固定版本公共 CDN 链接。确保标记加载后再初始化 InputGroup。提交、清除和筛选的事件处理程序仍由应用代码负责。

阅读配套规范

### 组合控件正常工作后再进行优化

完整样式表是最直接的起点。选择性集成需要全局/语义令牌和字体，以及每个实际使用的组件样式表。仅加载令牌会缺少组件令牌；仅加载图标类不会载入字体。移除这些支持资源包可能导致控件看似存在，实际视觉呈现却不完整。

阅读配套规范

## Dell 设计系统 验证搜索交互约定

### 一项实用的本地测试

输入 Latitude 但不提交，并确认旧的结果数量仍然保留。提交后查看匹配的设备。搜索一个不存在的标签，确认出现无结果状态，然后清除并确认所有示例设备都已恢复。再使用键盘输入，并在窄屏上重复测试。这些检查仅用于验证此示例，不能证明下游 Dell 产品或网络集成符合要求。

阅读配套规范

## Dell 设计系统组件示例

### 完整的独立交互示例

将完整文档保存为 index.html，并在浏览器中打开。这是对 DDS v3 间距、字体和已记录浅色模式输入控件颜色的独立 HTML/CSS 解读；字体使用系统回退字体。

```
<!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>
```

代码参考

- 本文档自带搜索行为。请使用 DDS 原生示例，检查 InputGroup 如何根据固定版本的样式表和脚本进行初始化。

### 完整的原生实现入口

此处汇总了从设置到完整实现的内容，并附有重点说明 API。请按照设置中的文档说明，满足软件包和构建前置条件。

```
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>
```

代码参考

- 保存为 index.html，并在本地启动服务，同时确保网络可访问文档中所述的 DDS 3.2.0 CDN。这会执行真实的 InputGroup 初始化和本地筛选；不连接 Dell 后端。内部 npm 替代方案：npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ 。嵌入式预览是离线的 HTML/CSS 解读，并非该 CDN 的运行效果。

### 使用 InputGroup 和应用自有搜索功能

此设置组合使用原生输入框和附加组件、初始化 InputGroup，并为真实的表单提交绑定行为。前置符号是本地装饰字符，不代表依赖图标字体。

```
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
```

代码参考

- 经过核实的 v3 文档中没有独立的搜索 API。

- 仅图标按钮应使用 aria-label；筛选功能由应用提供。

## Dell 设计系统 Agent 设置

### 实现起点

保存为 index.html，并在本地启动服务，同时确保网络可访问文档中所述的 DDS 3.2.0 CDN。这会执行真实的 InputGroup 初始化和本地筛选；不连接 Dell 后端。内部 npm 替代方案：npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ 。嵌入式预览是离线的 HTML/CSS 解读，并非该 CDN 的运行效果。

```
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>
```

### 适用于你项目的提示词

```
使用完整的 DDS 3.2.0 InputGroup 组合，构建范围明确的设备库存搜索。保留手动提交、可见的范围标签、本地结果播报和清除功能。使用 DDS 语义令牌和响应式字体；不要虚构搜索 API，也不要替换为旧版 v2 导入项。
```

## Dell 设计系统 来源与范围

独立的 DDS v3 参考资料。内部包需要访问 Dell 注册表；文档中提供了用于原型开发的公开版本化 CDN。此示例不代表 Dell 身份验证、资产管理连接或官方认证。

- 安装 DDS 3.2.0 内部包访问、公开原型 CDN 和必需的样式包。

- 搜索实现 搜索由 InputGroup 组合实现；没有独立的搜索 API。

- 搜索设计 手动和自动搜索行为、范围标签与地标。

- 间距 包含 11 个语义间距级别。

- 排版 默认和紧凑间距阶梯。

- 输入控件令牌 输入字段中使用的已记录语义颜色。

- 令牌架构 全局、语义和组件令牌的边界。

- 网格 密度与 4 像素节奏。

## Dell 设计系统 相关资源

### Duet 设计系统

通过日期范围工作流，研究 Duet 的 LocalTapiola 色彩和间距比例；其中包括 ISO 日期值、明确的范围验证、组件焦点方法，以及独立的开源选择器边界。

### Elastic UI

构建一个 Elastic UI 日志浏览器，采用经过验证的 Borealis 尺度、原生表格和搜索控件、严重程度筛选、本地保存的事件，以及完整的 React 源代码。

### Emplifi Soul

阅读 Soul 的数据表规范，了解其 6 像素间距、分层配色角色和紧凑的 Inter 字体。比较批量选择、缺失数据表示和汇总行，然后查看经过核实的私有 React 包入口。


- [实现参考](https://www.delldesignsystem.com/components/search)
- [来源](https://www.delldesignsystem.com/foundations/spacing)
- [来源](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [来源](https://www.delldesignsystem.com/foundations/typography/)
- [来源](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [来源](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [阅读配套规范](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [阅读配套规范](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [阅读配套规范](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [阅读配套规范](https://www.delldesignsystem.com/getting-started/tokens)
- [阅读配套规范](https://www.delldesignsystem.com/foundations/typography/)
- [阅读配套规范](https://www.delldesignsystem.com/foundations/spacing)
- [阅读配套规范](https://www.delldesignsystem.com/foundations/grid)
- [阅读配套规范](https://www.delldesignsystem.com/components/search)
- [代码参考](https://www.delldesignsystem.com/components/search)
- [代码参考](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [安装 DDS 3.2.0 内部包访问、公开原型 CDN 和必需的样式包。](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [搜索实现 搜索由 InputGroup 组合实现；没有独立的搜索 API。](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [搜索设计 手动和自动搜索行为、范围标签与地标。](https://www.delldesignsystem.com/components/search)
- [间距 包含 11 个语义间距级别。](https://www.delldesignsystem.com/foundations/spacing)
- [排版 默认和紧凑间距阶梯。](https://www.delldesignsystem.com/foundations/typography/)
- [输入控件令牌 输入字段中使用的已记录语义颜色。](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [令牌架构 全局、语义和组件令牌的边界。](https://www.delldesignsystem.com/getting-started/tokens)
- [网格 密度与 4 像素节奏。](https://www.delldesignsystem.com/foundations/grid)