@blueprintui/typewriter (beta)

• Documentation
• Stackblitz Demo

Simple and lightweight key navigation utilities and components.

npm install @blueprintui/typewriter

Keylist

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/[email protected]/include/keylist.js/+esm';
</script>
<bp-keylist loop>
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</bp-keylist>

Keylist Block

Keylist has three directions: inline, block, and all. The default is inline. The block direction is useful for creating a vertical list of items. The loop attribute will loop the list of items when the user reaches the end of the list.

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/[email protected]/include/keylist.js/+esm';
</script>
<bp-keylist loop direction="block">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</bp-keylist>

Keygrid

Keygrid follows the aria grid navigation patterns. Keygrid computes the number of columns by computing the number of items from the CSS property `grid-template-columns`. If the columns are dynamic you can explicity set the column count <bp-keynav columns="4">.

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/[email protected]/include/keynav.js/+esm';
</script>
<bp-keynav layout="grid" columns="4">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</bp-keynav>