github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-02-22 01:29:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated README with buttonTheme example

Browse Source
This commit is contained in:
Francisco Hodge 2018-06-29 21:43:22 -04:00
parent d88912cd23
commit 5a7fef7643
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
README.md
View File

@ -5,7 +5,7 @@
<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard.png" align="center"></a>
> The easily customisable and responsive on-screen virtual keyboard for Javascript projects.
<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/keyboard.png" align="center" width="100%">
<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/k2.png" align="center" width="100%">
## Installation
@ -153,12 +153,33 @@ display: {
### theme
> A prop to add your own css classes. You can add multiple classes separated by a space.
> A prop to add your own css classes _to the keyboard wrapper_. You can add multiple classes separated by a space.
```js
theme: "hg-theme-default"
```
### buttonTheme
> A prop to add your own css classes _to one or several buttons_. You can add multiple classes separated by a space.
```js
buttonTheme: [
{
class: "myCustomClass",
buttons: "Q W E R T Y q w e r t y"
},
{
class: "anotherCustomClass",
buttons: "Q q"
},
...
]
```
[![Edit simple-keyboard customization demo - npm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vj8jvz2q4l?module=%2Fsrc%2Findex.js)
### debug
> Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
@ -329,8 +350,6 @@ For example:
## Demo
<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/demo.gif" align="center" width="600">
[https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)
[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr)