https://github.com/biophoton/angular-signature-pad

SignaturePad for angular
https://github.com/biophoton/angular-signature-pad

Last synced: 3 months ago
JSON representation

SignaturePad for angular

• Host: GitHub
• URL: https://github.com/biophoton/angular-signature-pad
• Owner: BioPhoton
• License: mit
• Created: 2017-10-01T22:55:40.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-08T09:24:33.000Z (about 6 years ago)
• Last Synced: 2024-04-14T09:45:24.333Z (9 months ago)
• Language: TypeScript
• Size: 1.54 MB
• Stars: 54
• Watchers: 6
• Forks: 32
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Angular SignaturePad

This project provides components and utils for digital signatures. 

Use it to draw smooth signatures based on HTML5 canvas and uses variable width Bézier curve interpolation. 

[SignaturePad](https://github.com/szimek/signature_pad) is used as the vanilla implementation.

![Angular-Signature-Pad](https://raw.githubusercontent.com/BioPhoton/angular-signature-pad/master/resources/demo.gif)

# DEMO

- [ ] [Live Demo](https://biophoton.github.io/angular-signature-pad)

- [ ] [cli-project](https://github.io/BioPhoton/angular-signature-pad)

## Quick code example

``` html

// app.component.html

CLEAR

```

## Installing

1. Load library

``` bash

$ npm install angular-signature-pad --save

```

2. Import module

``` typescript

// src/app/app.module.ts

...

// IMPORT YOUR LIBRARY

import { AngularSignaturePadModule } from 'angular-signature-pad';

@NgModule({

  imports: [

    ...

    AngularSignaturePadModule.forRoot()

  ]

  ...

})

export class AppModule { }

```

3. Use Component

```typescript

// src/app/app.component.html

value:


  {{sigPad.value | json}}



Clear

```

## Styles

To apply the default styles just import the `styles.scss` file from the `node_modules/angular-signature-pad` folder.

```scss

// src/styles.scss

@import "../node_modules/angular-signature-pad/styles";

```

### Custom styles

The SignaturePadCard and SignaturePadCardGroup component have a default styling set over the `[theme]` property.  

It is applied over the `.raised` class internally. 

To create your own theme create a class i.e. `.my-theme` and combine  

it with the default class of the signature pad. `.signature-pad-card.my-theme`.

Apply it to the component over the `[theme]` property binding.

1. Create styles

```scss

.signature-pad-card.my-theme {

  ...

  .signature-pad {

    ...

  }

  .signature-pad-canvas {

    ...

  }

  .actions {

    ...

    .clear {

     ...

    }

  }

  .feedback {

   ... 

  }

}

```

2. Apply styles to the theme property binding

```html

```