94 lines
2.6 KiB
Markdown
94 lines
2.6 KiB
Markdown
# <qr-code>
|
|
|
|
Web Component for generating QR Codes, using (a [fork](https://github.com/educastellano/qr.js) of) [qr.js](https://github.com/lifthrasiir/qr.js) lib.
|
|
|
|
> Maintained by [Eduard Castellano](https://github.com/educastellano).
|
|
|
|
## Demo
|
|
|
|
> [Check it live](http://educastellano.github.io/qr-code/demo).
|
|
|
|
## Usage
|
|
|
|
* **NPM and Browserify** ([polyfill](https://github.com/WebComponents/webcomponentsjs) and the component):
|
|
|
|
Install:
|
|
|
|
```sh
|
|
npm install webcomponents.js
|
|
npm install webcomponent-qr-code
|
|
```
|
|
|
|
Import:
|
|
|
|
```js
|
|
require('webcomponents.js');
|
|
require('webcomponent-qr-code');
|
|
```
|
|
|
|
* **Bower** ([polyfill](https://github.com/WebComponents/webcomponentsjs), [qr.js](https://github.com/educastellano/qr.js) and the component):
|
|
|
|
Install:
|
|
|
|
```sh
|
|
bower install webcomponentsjs
|
|
bower install webcomponent-qr-code
|
|
```
|
|
|
|
Import:
|
|
|
|
```html
|
|
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
|
|
<script src="bower_components/qrjs/qr.js"></script>
|
|
<script src="bower_components/webcomponent-qr-code/src/qr-code.js"></script>
|
|
```
|
|
|
|
> You can also import the component with [HTML Imports](http://w3c.github.io/webcomponents/spec/imports/), but you still need to import the polyfill and the qr.js lib separately:
|
|
>
|
|
> ```html
|
|
> <link rel="import" href="bower_components/webcomponent-qr-code/src/qr-code.html">
|
|
> ```
|
|
|
|
* **Start using it!**
|
|
|
|
```html
|
|
<qr-code data="hello world!"></qr-code>
|
|
```
|
|
|
|
|
|
|
|
## Options
|
|
|
|
Attribute | Options | Default | Description
|
|
--- | --- | --- | ---
|
|
`data` | *string* | `null` | The information encoded by the QR code.
|
|
`format` | `png`, `html`, `svg` | `png` | Format of the QR code rendered inside the component.
|
|
`modulesize` | *int* | `5` | Size of the modules in *pixels*.
|
|
`margin` | *int* | `4` | Margin of the QR code in *modules*.
|
|
|
|
|
|
## Contributing
|
|
|
|
1. Fork it!
|
|
2. Create your feature branch: `git checkout -b my-new-feature`
|
|
3. Commit your changes: `git commit -m 'Add some feature'`
|
|
4. Push to the branch: `git push origin my-new-feature`
|
|
5. Submit a pull request :D
|
|
|
|
## History
|
|
|
|
* v0.1.7 April 11, 2015
|
|
* Support for SVG
|
|
* v0.1.6 April 10, 2015
|
|
* Default attributes
|
|
* qr.js removed and used as a dependency
|
|
* Available in NPM
|
|
* v0.1.1 March 31, 2015
|
|
* Framework-agnostic webcomponent (no use of Polymer)
|
|
* Available in Bower
|
|
* v0.0.1 September 18, 2013
|
|
* Started project using [boilerplate-element](https://github.com/customelements/boilerplate-element)
|
|
|
|
## License
|
|
|
|
[MIT License](http://opensource.org/licenses/MIT)
|