忍者键

与Vanilla JS,Vue,以及React合作的网站的键盘快捷界面.

演示

https://ninja-keys-demo.vercel.app/ (原始内容存档于2018-09-27)

动机

许多应用程序支持用户点击的常见模式 ⌘+ 键页:1 (或 缩写+ 键页:1),并出现了搜索UI对话框. 最近我在Notion, Slack, Linear, Vercel和Algolia上看到过这个, 但我肯定还有更多的. Apple Spotlight,Alfred和Raycast应用也有类似的模式,但快捷方式不同. 已有一些图书馆为此而建,但它们过于具体框架,如 只学习 或者说 只反应 然而,我的不是银弹,如果你需要更多的框架整合,也检查一下.

我需要一个键盘接口来导航 与静态网站没有任何框架. 同时,我还有几个Vue项目 其中类似的东西可能是有用的, 所以我决定试试看 Web 组件 财务报告和审定财务报表 升元素。 。 。 .

一体化

• Vue 3 示例 - 代码框
• Vue 2 示例 - 代码框
• 反应示例 - 代码框
• 反应/下一个JS
• 静态 Html - 密码箱
• Svelte - 密码箱
• 固态JS 包装器

特征

• 键盘导航
• 光和暗主题构建于
• 材质字体和自定义 svg 图标的内置图标支持
• 嵌入式菜单 - 可使用树或平面数据结构
• 自动注册快捷键
• 根搜索 - 例如,如果搜索"黑暗",它会在"Theme"子菜单中找到它
• 自定义视图的 CSS 变量
• 自定义可打开/关闭等的热键. 选择最适合您网站的内容 .

为什么叫"忍者"?

因为它从哪里出现 并迅速执行任何行动... 或者因为它允许您的用户成为键盘忍者QQ

从国家预防机制安装

npm i ninja-keys

如果您使用 Web 包装、 卷起、 vite 或其他构建系统, 则导入 .

import 'ninja-keys';

从 CDN 安装

主要用于没有构建系统的HTML/JS中.

<script type="module" src="https://unpkg.com/ninja-keys?module"></script>

模块脚本

<script type="module">
  import {NinjaKeys} from 'https://unpkg.com/ninja-keys?module';
</script>

使用量

在您的 HTML 中添加标签 .

<ninja-keys> </ninja-keys>

<script>
  const ninja = document.querySelector('ninja-keys');
  ninja.data = [
    {
      id: 'Projects',
      title: 'Open Projects',
      hotkey: 'ctrl+N',
      icon: 'apps',
      section: 'Projects',
      handler: () => {
        // it's auto register above hotkey with this handler
        alert('Your logic to handle');
      },
    },
    {
      id: 'Theme',
      title: 'Change theme...',
      icon: 'desktop_windows',
      children: ['Light Theme', 'Dark Theme', 'System Theme'],
      hotkey: 'ctrl+T',
      handler: () => {
        // open menu if closed. Because you can open directly that menu from it's hotkey
        ninja.open({ parent: 'Theme' });
        // if menu opened that prevent it from closing on select that action, no need if you don't have child actions
        return {keepOpen: true};
      },
    },
    {
      id: 'Light Theme',
      title: 'Change theme to Light',
      icon: 'light_mode',
      parent: 'Theme',
      handler: () => {
        // simple handler
        document.documentElement.classList.remove('dark');
      },
    },
    {
      id: 'Dark Theme',
      title: 'Change theme to Dark',
      icon: 'dark_mode',
      parent: 'Theme',
      handler: () => {
        // simple handler
        document.documentElement.classList.add('dark');
      },
    },
  ];
</script>

图书馆内部采用平面数据结构,如上例. 但也可以使用树结构如下:

{
  id: 'Theme',
  children: [
    { id: 'light' title: 'light_mode', },
    { id: 'System Theme',
      children: [
        { title: 'Sub item 1' },
        { title: 'Sub item 2' }
      ]
    }
  ]
}

属性

数据

矩阵 INinjaAction - 下面的接口属性

方法

活动

构成部分广泛活动

两者 handler 行动和组成部分活动 selected 用户提交表单或选择项目时释放 .

不过事件 selected 可用于处理边缘大小写,因此不建议在此写入每个动作逻辑. 使用动作比较好 handler 属性.

例如,如果一个用户输入搜索查询,并且有空列表,听这个事件就可以处理.

ninja.addEventListener('change', (event) => {
  console.log('ninja on change', event.detail);
  // detail = {search: 'your search query', actions: Array<NinjaAction>}
})
ninja.addEventListener('selected', (event) => {
  console.log('ninja on selected', event.detail);
  // detail = {search: 'your search query', action: NinjaAction | undefined }
  if (event.detail.action){
  // perform API search for example
  }
   
})

主题

组件支持一个黑暗主题外框. 你只需要加个课.

<ninja-keys class="dark"></ninja-keys>

如果您需要更多样式控制, 请使用下面的 CSS 变量 .

CSS 变量

示例

ninja-keys {
  --ninja-width: 400px;
}

CSS 阴影部件

允许您从样式中样式特定元素. 由于风格被Shadow DOM所封装,因此为所有属性创建css变量会很烦人. 这就是为什么你可以使用 ::part 以自定义查找组件. 它的支持 所有现代浏览器

使用部件的示例样式

ninja-keys::part(actions-list) {
  padding: 8px;
}
ninja-keys::part(ninja-action) {
  border-radius: 8px;
  border-left: none;
}

ninja-keys::part(ninja-selected) {
  background: rgba(51, 51, 51, 0.1);
}


ninja-keys::part(ninja-input) {
  color: #14b8a6;
}

ninja-keys::part(ninja-input)::placeholder {
  color: #f43f5e;
}

ninja-keys::part(ninja-input-wrapper) {
  background: rgba(244, 63, 93, 0.3);
}

图标

默认情况下,组件使用来自 https://fonts.google.com/icons (中文(简体) )

例如,你可以刚刚设置 mdIcon 改为 light_mode 用来制作太阳图标.

要为您的网站添加材料图标, 您需要添加到您的 HTML 中, 例如

<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

如果您想要自定义图标, 您可以使用 svg 或者说 img 插入一个 icon 用于操作的属性 ninja-icon 课. 示例

{
  title: 'Search projects...',
  icon: `<svg xmlns="http://www.w3.org/2000/svg" class="ninja-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
  </svg>`,
  section: 'Projects',
},

您也可以使用 CSS 变量更改宽度和字体

ninja-keys {
  --ninja-icon-size: 1em;
}

更改或隐藏页脚

<ninja-keys> 
  <div slot="footer">You can use a custom footer or empty div to hide it</div>
</ninja-keys>

Dev 服务器

npm run start

线性

要插入项目运行 :

npm run lint

格式化

高级 用于代码格式化。 已经按照李特的作风进行了预构.

许可证

版权(c) 谢尔盖·斯莱佐夫 嘿@ sergei.ws (英语)

许可证根据 麻省理工学院执照。 。 。 .