快速无风格的React命令菜单组件 - cmdk

⌘K是一个命令菜单React组件，也可以作为一个可访问的组合框使用。你渲染项目，它自动过滤和排序。⌘K支持一个完全可组合的API。所以你可以将项目包装在其他组件中，甚至作为静态JSX。

基本用法

1.安装并导入cmdk。

# NPM
$ npm i cmdk

import { Command } from 'cmdk'

2.创建一个基本的命令菜单。

const CommandMenu = () => {
  return (
    <Command label="Command Menu">
      <Command.Input />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Letters">
          <Command.Item>a</Command.Item>
          <Command.Item>b</Command.Item>
          <Command.Separator />
          <Command.Item>c</Command.Item>
        </Command.Group>
        // ...
        <Command.Item>x</Command.Item>
        // ...
      </Command.List>
    </Command>
  )
}

3.或者在弹出的对话框中显示命令菜单。

const CommandMenu = () => {
  const [open, setOpen] = React.useState(false)
  React.useEffect(() => {
    const down = (e) => {
      if (e.key === 'k' && e.metaKey) {
        setOpen((open) => !open)
      }
    }
    document.addEventListener('keydown', down)
    return () => document.removeEventListener('keydown', down)
  }, [])
  return (
    <Command.Dialog open={open} onOpenChange={setOpen} label="Global Command Menu">
      <Command.Input />
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>
        <Command.Group heading="Letters">
          <Command.Item>a</Command.Item>
          <Command.Item>b</Command.Item>
          <Command.Separator />
          <Command.Item>c</Command.Item>
        </Command.Group>
        // ...
        <Command.Item>x</Command.Item>
      </Command.List>
    </Command.Dialog>
  )
}

预览

The postFast Unstyled Command Menu Component For React - cmdkappeared first onReactScript.