Filter

一组用于单选过滤的单选按钮。选择一个选项会隐藏其他选项并显示重置按钮。

导入

import { Filter } from 'asterui'

示例

基础

带字符串选项的简单过滤器。点击选项选择，点击重置清除。

</>

Selected: None

import { Filter, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState<string | undefined>()
  
  return (
      <Space direction="vertical" size="md">
        <Filter
          options={['Svelte', 'Vue', 'React', 'Angular']}
          value={value}
          onChange={setValue}
        />
        <p className="text-sm text-base-content/70">
          Selected: {value || 'None'}
        </p>
      </Space>
    )
}

export default App

尺寸

可用的尺寸变体。

</>

import { Filter, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="lg">
        <Filter options={['Small', 'Medium', 'Large']} size="xs" />
        <Filter options={['Small', 'Medium', 'Large']} size="sm" />
        <Filter options={['Small', 'Medium', 'Large']} size="md" />
        <Filter options={['Small', 'Medium', 'Large']} size="lg" />
      </Space>
    )
}

export default App

对象选项

使用对象作为选项，支持自定义标签、值和禁用状态。

</>

Selected value: None

import { Filter, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState<string | undefined>()
  
  return (
      <Space direction="vertical" size="md">
        <Filter
          options={[
            { label: 'JavaScript', value: 'js' },
            { label: 'TypeScript', value: 'ts' },
            { label: 'Python', value: 'py' },
            { label: 'Rust', value: 'rust', disabled: true },
          ]}
          value={value}
          onChange={setValue}
        />
        <p className="text-sm text-base-content/70">
          Selected value: {value || 'None'}
        </p>
      </Space>
    )
}

export default App

无重置按钮

当你想要求选择时，隐藏重置按钮。

</>

import { Filter } from 'asterui'

function App() {
  return (
      <Filter
        options={['Option A', 'Option B', 'Option C']}
        showReset={false}
        defaultValue="Option A"
      />
    )
}

export default App

API

Filter

属性	描述	类型	默认值
options	过滤器选项	(string | FilterOption)[]	-
value	受控的选中值	string	-
defaultValue	非受控模式的默认值	string	-
onChange	选择改变时调用	(value: string | undefined) => void	-
name	单选组名称（如果未提供则自动生成）	string	-
size	按钮尺寸	'xs' | 'sm' | 'md' | 'lg'	'md'
showReset	显示重置按钮	boolean	true
resetLabel	重置按钮标签	React.ReactNode	'×'
className	额外的 CSS 类名	string	-
data-testid	用于测试的测试 ID	string	-

FilterOption

属性	描述	类型	默认值
label	选项的显示文本	string	-
value	选项的值	string	-
disabled	选项是否禁用	boolean	false
data-testid	用于测试的测试 ID	string	-

无障碍

• 使用原生单选输入以支持键盘和屏幕阅读器
• 选项使用 aria-label 提供可访问名称
• 重置按钮有 aria-label="Reset filter"
• 支持 Tab 和 Space/Enter 键盘导航