搜索栏
搜索栏用来输入关键字并提交。结果由页面放进 results 插槽，展开和收起也由页面控制。
结果行用 <md-gen-menu-item>。
| 标签 | 何时使用 |
|---|---|
<md-search-bar> | 输入关键字并提交 |
<md-gen-menu-item> | 一行结果 |
import 'genv4/search-bar/search-bar.js';
import 'genv4/gen-menu/gen-menu-item.js';宽窄由组件自己的宽度决定，小于 560px 是窄屏。open 和输入框里有没有文字无关。结果最大高度用 --md-search-bar-results-max-height 设置。
窄屏的结果浮在胶囊下面，不把后面的内容往下推。下面「窄屏有结果」的外框加高，把这六行包在框里。
宽屏无输入
Link to “宽屏无输入”<md-search-bar placeholder="搜索" style="width: 640px"></md-search-bar>宽屏有结果
Link to “宽屏有结果”<md-search-bar placeholder="搜索" value="设计" open style="width: 640px; --md-search-bar-results-max-height: 240px">
<md-gen-menu-item slot="results" selected>设计系统</md-gen-menu-item>
<md-gen-menu-item slot="results">设计规范</md-gen-menu-item>
<md-gen-menu-item slot="results">设计组件</md-gen-menu-item>
<md-gen-menu-item slot="results">设计令牌</md-gen-menu-item>
<md-gen-menu-item slot="results">设计文档</md-gen-menu-item>
<md-gen-menu-item slot="results">设计资源</md-gen-menu-item>
</md-search-bar>窄屏无输入
Link to “窄屏无输入”<md-search-bar placeholder="搜索" style="width: 400px"></md-search-bar>窄屏有结果
Link to “窄屏有结果”<md-search-bar placeholder="搜索" value="设计" open style="width: 400px; --md-search-bar-results-max-height: 240px">
<md-gen-menu-item slot="results" selected>设计系统</md-gen-menu-item>
<md-gen-menu-item slot="results">设计规范</md-gen-menu-item>
<md-gen-menu-item slot="results">设计组件</md-gen-menu-item>
<md-gen-menu-item slot="results">设计令牌</md-gen-menu-item>
<md-gen-menu-item slot="results">设计文档</md-gen-menu-item>
<md-gen-menu-item slot="results">设计资源</md-gen-menu-item>
</md-search-bar>下表适用于 <md-search-bar>。
| 属性 | HTML 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
value | value | string | '' | 输入框里的文字。只有空格时视为没有文字。 |
placeholder | placeholder | string | '' | 没有文字时的占位内容。默认空，由页面填写。 |
open | open | boolean | false | 结果区是否展开。开关由页面设置。 |
| 事件 | 类型 | 冒泡 | 穿透 | 说明 |
|---|---|---|---|---|
input | InputEvent | 是 | 是 | 文字变化，包含清除 |
submit | CustomEvent<{value: string}> | 是 | 是 | 按 Enter 或点击实心箭头。空值不发出 |
mic | CustomEvent | 是 | 是 | 点击麦克风。组件不识别语音 |
| 名称 | 说明 |
|---|---|
results | 结果行，放 <md-gen-menu-item>。只在 open 时显示。 |
用组件 CSS 变量覆盖。下面只列出 Sass 里标记为支持的变量。
搜索栏 <md-search-bar>
Link to “搜索栏 <md-search-bar>” | 变量 | 默认值 |
|---|---|
--md-search-bar-action-size | 40px |
--md-search-bar-capsule-color | hsl(from var(--md-sys-color-surface, #ffffff) h s l / 80%) |
--md-search-bar-capsule-shadow | 0 0 10px hsl(from var(--md-sys-color-shadow, #000) h s l / 12%) |
--md-search-bar-capsule-shape | 32px |
--md-search-bar-caret-color | --md-sys-color-primary |
--md-search-bar-clear-container-color | --md-sys-color-surface-container-high |
--md-search-bar-field-color | --md-sys-color-surface |
--md-search-bar-field-gap | 4px |
--md-search-bar-field-height | 48px |
--md-search-bar-field-shape | 24px |
--md-search-bar-icon-color | --md-sys-color-on-surface |
--md-search-bar-icon-size | 24px |
--md-search-bar-input-text-color | --md-sys-color-on-surface |
--md-search-bar-input-text-line-height | 20px |
--md-search-bar-input-text-size | 14px |
--md-search-bar-input-text-weight | 400 |
--md-search-bar-leading-size | 48px |
--md-search-bar-narrow-padding | 4px |
--md-search-bar-narrow-submit-size | 40px |
--md-search-bar-placeholder-color | --md-sys-color-on-surface-variant |
--md-search-bar-results-color | --md-sys-color-surface |
--md-search-bar-results-gap | 4px |
--md-search-bar-results-max-height | none |
--md-search-bar-results-offset | 8px |
--md-search-bar-results-padding-block | 2px |
--md-search-bar-results-shadow | 0 2px 6px hsl(from var(--md-sys-color-shadow, #000) h s l / 12%), 0 1px 2px hsl(from var(--md-sys-color-shadow, #000) h s l / 30%) |
--md-search-bar-results-shape | 16px |
--md-search-bar-scrollbar-color | --md-sys-color-outline |
--md-search-bar-scrollbar-inset-block | 12px |
--md-search-bar-scrollbar-inset-inline | 4px |
--md-search-bar-scrollbar-size | 4px |
--md-search-bar-submit-container-color | --md-sys-color-primary |
--md-search-bar-submit-icon-color | --md-sys-color-on-primary |
--md-search-bar-thumb-min-size | 16px |
--md-search-bar-wide-gap | 12px |
--md-search-bar-wide-padding | 8px |
--md-search-bar-wide-submit-size | 48px |