@ blueprintui/ 打字机

• 文档

简单而轻巧的关键导航设施和部件.

npm install @blueprintui/typewriter

内置导航

bp-keynav-list 与 layout="inline" 创建一个水平键导航列表。 这个 loop 属性将在用户到达列表末尾时循环焦点.

<script type="module">
  import '@blueprintui/typewriter/include/keynav-list.js';
</script>
<bp-keynav-list layout="inline" loop>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</bp-keynav-list>

块导航

bp-keynav-list 与 layout="block" 创建一个垂直键导航列表,用于菜单和垂直项列表.

<script type="module">
  import '@blueprintui/typewriter/include/keynav-list.js';
</script>
<bp-keynav-list layout="block" loop>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</bp-keynav-list>

网格导航

bp-keynav-list 与 layout="grid" 跟着阿里亚 网格导航 模式。 它计算CSS的列数 grid-template-columns 属性。 如果列是动态的,请用 <bp-keynav-list columns="4">。 。 。 .

<script type="module">
  import '@blueprintui/typewriter/include/keynav-list.js';
</script>
<bp-keynav-list layout="grid" columns="4">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</bp-keynav-list>

密钥导航控制器

这个 KeynavController 可以用作自定义组件需要关键导航行为的Lit反应控制器.

import { KeynavController } from '@blueprintui/typewriter';