@quickey/ui

Quickey UI elements

Intro

The Quickey UI package contains UI elements. This elements will save you development time when integrating Quickey into your app. For example, if you want to show your users a list of Quickey actions, you can use the Quickey Legend element:

Install

Quickey UI can be installed via npm:

$ npm install --save @quickey/ui

Or via yarn:

$ yarn add @quickey/ui

Or using the CDN:

<script src="https://unpkg.com/@quickey/ui@latest/umd/quickey.ui.js"></script>

Or the minified version:

<script src="https://unpkg.com/@quickey/ui@latest/umd/quickey.ui.min.js"></script>

CSS

Quickey UI contains css so you need to load it in order to make things look pretty. 💅

Use the CDN:

<script src="https://unpkg.com/@quickey/ui@latest/umd/quickey.css"></script>

Or, if you're using a bundler (like webpack) with sass-loader, you can import the element style directly.

import "@quickey/ui/lib/legend/styles/legend.scss";

Peer Dependencies

You should install @quickey/core in order to use this package.

Usage

const { createQuickey } = "@quickey/core";
import { createQuickeyLegend } from "@quickey/ui";

// Or when using the UMD module

const { createQuickey } = Quickey.core;
const { createQuickeyLegend } = Quickey.ui;

createQuickey([{
    id: "cheats",
    title: "Cheat Codes",
    actions: [...]
}, {
    id: "game",
    title: "Game Play",
    actions: [...]
}]);

const unmount = createQuickeyLegend({
    ids: ["cheats", "game"],
    el: document.querySelector(".legend")
});

For your convenience, we created this Fiddle, so you can take Quickey UI for a quick spin.

List of UI elements

• Quickey Legend
• ...

API

Quickey Legend

createQuickeyLegend([options])

Type: function

Creates and renders a new Quickey Legend element. It returns a function for unmounting the element from the DOM.

options

Type: object

ids

Type: Array

A list of Quickey ids.

el

Type: Element

The element container.

title

Type: string - optional

Default: Keyboard Shortcuts

Legend title.

showCredits

Type: boolean - optional

Default: true

Show footer credits.

searchBarPlaceholder

Type: string - optional

Default: Search for shortcut...

Placeholder for the legend search input.

style

Type: object - optional

If you want to add some css styles to the root element, use this object.

← Go back to Quickey