FileInput

文件输入组件，支持多个文件、文件类型过滤和各种样式。

导入

import { FileInput } from 'asterui'

示例

基础文件输入

简单的文件输入。

</>

import { FileInput } from 'asterui'

function App() {
  return (
      <FileInput />
    )
}

export default App

接受类型

仅接受特定文件类型的文件输入。

</>

Images only

PDF files only

Images and PDFs

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <div>
          <label className="block text-sm font-medium mb-2">Images only</label>
          <FileInput accept="image/*" />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">PDF files only</label>
          <FileInput accept=".pdf" />
        </div>
        <div>
          <label className="block text-sm font-medium mb-2">Images and PDFs</label>
          <FileInput accept="image/*,.pdf" />
        </div>
      </Space>
    )
}

export default App

多个文件

允许选择多个文件。

</>

import { FileInput } from 'asterui'

function App() {
  return (
      <FileInput multiple />
    )
}

export default App

尺寸

不同的文件输入尺寸。

</>

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <FileInput size="xs" />
        <FileInput size="sm" />
        <FileInput size="md" />
        <FileInput size="lg" />
      </Space>
    )
}

export default App

颜色

不同的颜色变体。

</>

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <FileInput color="primary" />
        <FileInput color="secondary" />
        <FileInput color="accent" />
        <FileInput color="success" />
        <FileInput color="warning" />
        <FileInput color="error" />
      </Space>
    )
}

export default App

样式

带边框和幽灵样式。

</>

import { FileInput, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md">
        <FileInput bordered color="primary" />
        <FileInput ghost color="secondary" />
      </Space>
    )
}

export default App

API

FileInput

属性	描述	类型	默认值
accept	接受的文件类型	string	-
multiple	允许多文件选择	boolean	false
onChange	变化处理器	(e: ChangeEvent) => void	-
disabled	禁用输入	boolean	false
size	输入尺寸	'xs' | 'sm' | 'md' | 'lg'	'md'
color	输入颜色	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'	-
bordered	显示边框	boolean	false
ghost	幽灵样式	boolean	false
className	额外的 CSS 类名	string	-
data-testid	用于测试的测试 ID	string	-

无障碍

• 使用原生 <input type="file"> 以获得完整的键盘支持
• 始终与描述性的 <label> 配对以提高可访问性
• accept 属性帮助用户选择适当的文件