操作与导航 / COMPONENT ATLAS

筛选标签页FilterTabs

切换列表的筛选条件,用轻缓移动的底线表达当前选项。

亲手试一试。

01 / LIVE PREVIEW
● FilterTabs

STATES / 示例状态

当前切换
在左侧预览中体验这枚组件。
INTERACTIVE SPECIMEN · 跟随全站主题

用法

02 / USAGE

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

RUST · DIOXUS RSX
let mut filter = use_signal(|| "all".to_string());
rsx! {
    FilterTabs {
        items: vec![("all", "全部"), ("published", "已发布")],
        active_value: filter(),
        on_change: move |value| filter.set(value),
    }
}

主要属性

03 / PROPERTIES
属性 / 类型默认值说明
itemsVec<(&'static str, &'static str)>必填选项的值与标签。
active_valueString必填当前选中的值。
on_changeEventHandler<String>必填切换后返回新值。

操作方式

04 / INTERACTION
Tab移动焦点Space / Enter切换筛选
YGGDRASIL · 每一个细节,都有回应。src/components/ui.rs
© 2026 Yggdrasil