页面布局 / COMPONENT ATLAS

搜索入口SearchIconLink

全站顶部导航栏右侧的核心搜索入口。与主题切换按钮对齐，组件内部自动响应全局路由变更：在处于搜索页面时，自动高亮并挂载平滑的 nav-indicator 激活指示线；同时内置完整的无障碍属性 (aria-label、title、aria-current) 与平滑颜色过渡。

亲手试一试。

01 / LIVE PREVIEW
● SearchIconLink
SCENE / 演示场景
ROUTE / 路由模拟
https://yggdrasil.site/aboutHeader 预览
Yggdrasil

CURRENT STATUS / 当前状态

默认待命 · 常规页面 (/about)

当前图标呈现 text-paper-secondary，鼠标悬浮时平滑过渡至强调色。

A11Y SEMANTICS / 无障碍语义

aria-label = "搜索"

title = "搜索"

aria-current = (none)

屏幕阅读器与辅助工具可精准感知当前定位。

INTERACTION / 交互提示

点击上方搜索图标直接联动

通过 on_click 事件拦截即可就地演示激活与指示条过渡效果。

🌲路由自动感知

组件内部通过 use_route::<Route>() 自动感知是否匹配 Route::Search，零额外代码即可同步高亮状态。

🎨图标组视觉统一

与 ThemeToggle 主题切换按钮共享一致的内边距、圆角与过渡时长，维持导航栏右侧图标组严格对齐。

♿无障碍可达性

内置 aria-label="搜索" 与 aria-current 状态宣告，全键盘操作友好，支持右键新标签页打开。

STATES / 示例状态

默认态激活指示导航栏协同快捷搜索联动
本地演示，内容不会保存。
INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

下方展示组件的调用方式。

RUST · DIOXUS RSX
Header {
    nav_items: build_nav_items(route),
    right_content: rsx! {
        SearchIconLink {}
        ThemeToggle {}
    },
    max_width: "max-w-4xl",
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
activeOption<bool>None可选显式覆盖激活状态。默认自动响应当前路由 (Route::Search)。
on_clickOption<EventHandler<MouseEvent>>None可选点击事件处理。提供时将拦截默认路由跳转，用于呼出搜索弹层等自定义交互。

操作方式

04 / INTERACTION
Tab / Shift+Tab在页面导航项与搜索入口之间切换焦点。Enter / Space激活搜索入口，跳转至搜索页面或呼出检索浮层。⌘ K / Ctrl+K全站全局搜索快捷唤起倡导热键。
YGGDRASIL · 每一个细节，都有回应。src/components/header.rs
© 2026 Yggdrasil