定价

SearchPopup

Figma 源代码

可组合的搜索面板，内置 SearchInput 和可选数据结果，支持无分组、分组标题与显式复杂内容。运行时依赖 @snowui-design-system/components 和 Components；不包含搜索算法、最近浏览、热度或业务路由规则。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于复用搜索输入与结果的标准布局。SearchBox 是打开入口；SearchPopup 是面板，默认静态呈现。设置 backdrop 可启用共享模态遮罩；无遮罩时，锚定触发器使用继承的 Popover 模版或内嵌模式。

  • items 生成文字或链接结果，group 可选；showGroupTitles 控制分组标题。

  • children 替换全部内置结果；显式标题用 Text as="group-title"，项用 MenuItem as="item"。

  • search=false 后可显式提供 SearchInput as="content"；该输入直接配置，不消费 parts。

导入

import { SearchPopup } from '@snowui-design-system/components';

用法

自定义内容

API 参考

属性 类型 默认值 示例 描述
backdrop BackdropVariant | false false backdrop={value} false 保持原静态或锚定模式；opaque、blur、transparent 启用 Dialog 共享模态遮罩。
closeOnOutside boolean true closeOnOutside 模态模式点击遮罩关闭；与遮罩视觉独立。
value string | number "" value="Example" 搜索输入值，支持 bind:value；过滤由消费方负责。
search boolean true search 是否生成默认 SearchInput；显式输入时关闭。
title string — title="Example" 可选面板标题，位于结果区顶部；children 模式由显式内容接管。
showGroupTitles boolean true showGroupTitles 是否生成 items 的来源分组标题；不改变顺序。
items SearchPopupItem[] [] items={items} value、label、href 必填；group、disabled 可选；按输入顺序呈现，连续相同 group 只显示一次。
children Snippet — <SearchPopup>Content</SearchPopup> 替换全部默认结果与标题；不再读取 items / title / showGroupTitles。
parts ComponentPartsOf<{ SearchInput: typeof SearchInput; MenuItem: typeof MenuItem; Text: typeof Text }> — parts={partsOptions} 配置实际生成的输入、结果和标题；value、children、身份、disabled 由所属数据控制。