Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mohsen77sk/angular-touch-keyboard

Virtual Keyboard for Angular applications.
https://github.com/mohsen77sk/angular-touch-keyboard

angular angular-keyboard angular-material keyboard onscreen-keyboard touch-keyboard virtual-keyboard

Last synced: 29 days ago
JSON representation

Virtual Keyboard for Angular applications.

Host: GitHub
URL: https://github.com/mohsen77sk/angular-touch-keyboard
Owner: mohsen77sk
License: mit
Created: 2022-07-29T13:07:43.000Z (over 2 years ago)
Default Branch: master
Last Pushed: 2024-09-19T17:02:26.000Z (3 months ago)
Last Synced: 2024-11-01T10:06:26.231Z (about 1 month ago)
Topics: angular, angular-keyboard, angular-material, keyboard, onscreen-keyboard, touch-keyboard, virtual-keyboard
Language: TypeScript
Homepage:
Size: 2.37 MB
Stars: 48
Watchers: 4
Forks: 16
Open Issues: 3
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-angular - angular-touch-keyboard - Virtual Keyboard for Angular applications. (Table of contents / Third Party Components)
fucking-awesome-angular - angular-touch-keyboard - Virtual Keyboard for Angular applications. (Table of contents / Third Party Components)
fucking-awesome-angular - angular-touch-keyboard - Virtual Keyboard for Angular applications. (Table of contents / Third Party Components)

README

        # AngularTouchKeyboard

[![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE) [![npm version](https://badge.fury.io/js/ngx-touch-keyboard.svg)](http://badge.fury.io/js/ngx-touch-keyboard) [![Build Status](https://github.com/mohsen77sk/angular-touch-keyboard/workflows/main/badge.svg)](https://github.com/mohsen77sk/angular-touch-keyboard/actions)

## What is this?

Virtual Keyboard for Angular applications.

![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/angularTouchKeyboard.png)

## Demo

[https://mohsen77sk.github.io/angular-touch-keyboard/](https://mohsen77sk.github.io/angular-touch-keyboard/)

## Install

### Step 1: Install [ngx-touch-keyboard](https://www.npmjs.com/package/ngx-touch-keyboard)

```sh

npm install @angular/cdk ngx-touch-keyboard

```

### Step 2: Import the module

Add `ngxTouchKeyboardModule` as an import in your app's root NgModule.

```typescript

import { ngxTouchKeyboardModule }  from 'ngx-touch-keyboard';

@NgModule({

  ...

  imports: [

    ...

    ngxTouchKeyboardModule,

  ],

  ...

})

export class AppModule { }

```

### Compatibility

#### Version [`3.0.0`]

* `@angular/core`: `^16.0.0` || `^17.0.0` || `^18.0.0`

* `@angular/cdk`: `^16.0.0` || `^17.0.0` || `^18.0.0`

#### Version [`2.0.0`]

* `@angular/core`: `^14.0.0` || `^15.0.0`

* `@angular/cdk`: `^14.0.0` || `^15.0.0`

## Localization

AngularTouchKeyboard is localized in 7 keyboard-specific locales:

* `en-US` English (United States) (default)

* `en-UK` English (United Kingdom)

* `fa-IR` Persian (Iran)

* `he-IL` Hebrew (Israel)

* `ka-GE` Georgian (Georgia)

* `ru-RU` Russian (Russia)

* `sv-SE` Swedish (Sweden)

## Usage

Simple usage example

```html

```

Locale usage example

```html

```

Material usage example

```html

  Default

  

  

     keyboard 

  

```

### Properties

| Property                     | Description                                                 |

| ---------------------------- | ----------------------------------------------------------- |

| `ngxTouchKeyboard`           | Required to initialize Virtual Keyboard to specified input. |

| `ngxTouchKeyboardDebug`      | Debug mode is on.                                           |

| `ngxTouchKeyboardFullScreen` | Full screen mode is on.                                     |

### Methods

Here's the list of all available methods:

| Methods               | Description           |

| --------------------- | --------------------- |

| `openPanel(): void`   | Open keyboard panel   |

| `closePanel(): void`  | Close keyboard panel  |

| `togglePanel(): void` | Toggle keyboard panel |

## Themes

### Built-in themes

* `default`: white theme

* `dark`: dark theme

You must put the class `dark` in the body to use the `dark` theme.

### Create custom theme

To customize the theme, you need to use css variables.

| Name                            | Description                           |

| ------------------------------- | ------------------------------------- |

| `--tk-color-text`               | color of text button                  |

| `--tk-background`               | color of background panel             |

| `--tk-background-button`        | color of background basic button      |

| `--tk-background-button-fn`     | color of background functional button |

| `--tk-background-button-active` | color of background active button     |

## Layouts

Depends on attribute inputmode, the keyboard layout is changed.

| inputmode             | Screenshot                                                                                               |

| --------------------- | -------------------------------------------------------------------------------------------------------- |

| `inputmode='text'`    | ![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/text.png)    |

| `inputmode='search'`  | ![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/search.png)  |

| `inputmode='email'`   | ![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/email.png)   |

| `inputmode='url'`     | ![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/url.png)     |

| `inputmode='numeric'` | ![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/number.png)  |

| `inputmode='decimal'` | ![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/decimal.png) |

| `inputmode='tel'`     | ![angular touch keyboard](https://mohsen77sk.github.io/angular-touch-keyboard/assets/images/tel.png)     |

## Development

The most useful commands for development are:

* `npm run start` to start a development server

* `npm run build-demo` to build the demo locally (it will be published automatically by GitHub Actions)

## License

[The MIT License (MIT)](LICENSE)