https://github.com/sinanmtl/vue-focus-keyboard

A keyboard component for Vue. Start to write immediately. No input element definition. Plug and play!
https://github.com/sinanmtl/vue-focus-keyboard

component focus keyboard plug-and-play quick vue

Last synced: 4 days ago
JSON representation

A keyboard component for Vue. Start to write immediately. No input element definition. Plug and play!

• Host: GitHub
• URL: https://github.com/sinanmtl/vue-focus-keyboard
• Owner: SinanMtl
• License: mit
• Created: 2018-03-14T10:55:24.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-03-28T11:57:21.000Z (over 6 years ago)
• Last Synced: 2024-11-13T04:38:23.938Z (4 days ago)
• Topics: component, focus, keyboard, plug-and-play, quick, vue
• Language: Vue
• Size: 316 KB
• Stars: 62
• Watchers: 5
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Focus Keyboard

[![npm version](https://badge.fury.io/js/vue-focus-keyboard.svg)](https://www.npmjs.com/package/vue-focus-keyboard)

[![npm](https://img.shields.io/npm/dt/vue-focus-keyboard.svg)](https://www.npmjs.com/package/vue-focus-keyboard)

> A keyboard component for Vue. Start to write immediately. No input element definition. Plug and play!- [Demo](https://sinanmtl.github.io/vue-focus-keyboard/)

## Installation and usage

Install the Vue Focus Keyboard component for your project

```bash

npm install vue-focus-keyboard --save

```

Then, add component into your app

```javascript

import FocusKeyboard from 'vue-focus-keyboard';

Vue.use(FocusKeyboard)

```

Use HTML template

```html

```

## Props

### `theme`

There are 2 theme in Vue Focus Keyboard. They are `dark` and `light` (default: `dark`). You can use one of them with `theme` prop.

```html

```

### `keyboardWidth`

Also, you can set keyboard's width.

```html

```

### `keyboard`

You don't like current keyboards? Well, set your custom keyboard layout. You can view default layouts in `src/layout.js` file

```javascript

export default {

  data () {

    return {

      customLayout: {

        default: [

          // Normal layout

        ],

        shifted: [

          // Layout when press shift button

        ],

        capsed: [

          // Layout when press capslock button

        ],

        alted: [

          // Layout when press alt button

        ],

        shifted_capsed: [

          // Layout when press shift + capslock button

        ],

        shifted_alted: [

          // Layout when press shift + alt button

        ]

      },

    }

  }

}

```

Then, set your keyboard.

```html

```

## License

MIT.