@quickey/ui NPM

`@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.