# @prismadelabs/prismaidtutorial

> prismaid tutorial

Latest version **1.0.7** (published 2019-02-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @prismadelabs/prismaidtutorial
pnpm add @prismadelabs/prismaidtutorial
yarn add @prismadelabs/prismaidtutorial
bun add @prismadelabs/prismaidtutorial
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2019-02-12 |
| First published | 2019-01-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 24.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Prismade Labs GmbH |
| Maintainers | prismadedevteam |

## Links

- npm: https://www.npmjs.com/package/@prismadelabs/prismaidtutorial
- Repository: https://github.com/PrismadeLabs/PrismaID-Tutorial
- Homepage: https://github.com/PrismadeLabs/PrismaID-Tutorial#readme
- Issues: https://github.com/PrismadeLabs/PrismaID-Tutorial/issues
- npm.io page: https://npm.io/package/@prismadelabs/prismaidtutorial

## Dependencies (1)

- [@prismadelabs/prismaidui](https://npm.io/package/@prismadelabs/prismaidui.md) ^1.0.0

## Recent versions

- 1.0.7 (latest) — 2019-02-12
- 1.0.6-beta.3 (beta) — 2019-01-30
- 1.0.6-beta.2 — 2019-01-30
- 1.0.6-beta.1 — 2019-01-29
- 1.0.6 — 2019-01-29
- 1.0.5 — 2019-01-24
- 1.0.4 — 2019-01-21
- 1.0.3 — 2019-01-21
- 1.0.2 — 2019-01-18
- 1.0.1 — 2019-01-14
- 1.0.0 — 2019-01-11

## README

# PrismaID Tutorial

![Version](https://img.shields.io/npm/v/@prismadelabs/prismaidtutorial.svg)
![Size](https://img.shields.io/bundlephobia/min/@prismadelabs/prismaidtutorial.svg)
![Types](https://img.shields.io/npm/types/@prismadelabs/prismaidtutorial.svg)

## Overview

The PrismaID Tutorial is intended to be used in a web application and it provides visual hints how to use a PrismaID tag.

## Using this component

- Put a script tag `<script src='https://unpkg.com/@prismadelabs/prismaidtutorial@1.0.5/dist/prismaidtutorial.js'></script>` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

## Use Tutorial in HTML

```html
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <title>PrismaID Tutorial</title>
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://unpkg.com/@prismadelabs/prismaidtutorial@1.0.5/dist/prismaidtutorial.js"></script>
</head>

<body style="margin: 0px">
    <prismaid-tutorial></prismaid-tutorial>
    <!-- you could specify parameters directly or later somewhere in script -->
    <!-- <prismaid-tutorial welcome-title="Hello Tutorial!"></prismaid-tutorial> -->
</body>

</html>
```

## Use Tutorial in Javascript

Once included you could work with the tutorial component the same way as you do with other components.

```javascript
const tutorialElement = document.querySelector('prismaid-tutorial')

tutorialElement.welcomTitle = "Hello Tutorial!"

tutorialElement.addEventListener('tutorialCompleted', () => {
    // do some action
})
```

## Assets

### Texture Packer

<!-- Auto Generated Below -->


## Properties

| Property            | Attribute             | Description                                                                                              | Type      | Default                   |
| ------------------- | --------------------- | -------------------------------------------------------------------------------------------------------- | --------- | ------------------------- |
| `finishButtonTitle` | `finish-button-title` | Finish screen "FINISH" button title                                                                      | `string`  | `"CHECK"`                 |
| `finishText`        | `finish-text`         | Finish screen "TEXT" - content                                                                           | `string`  | `"Finish Screen Text"`    |
| `holdText`          | `hold-text`           | Hold screen "TEXT" - content                                                                             | `string`  | `"Hold Screen Text"`      |
| `nextButtonTitle`   | `next-button-title`   | Welcome screen "NEXT" button title                                                                       | `string`  | `"NEXT"`                  |
| `placementText`     | `placement-text`      | Placement screen "TEXT" - content                                                                        | `string`  | `"Placement Screen Text"` |
| `slideToPage`       | `slide-to-page`       | Allows to scroll smoothly (false) or just by page - swipe gesture (true)                                 | `boolean` | `false`                   |
| `swipeText`         | `swipe-text`          | Swipe screen "TEXT" - content                                                                            | `string`  | `"Swipe Screen Text"`     |
| `themeColor`        | `theme-color`         | Color used to colorize buttons and background image, please use hex code format e.g. #043487             | `string`  | `""`                      |
| `useSlides`         | `use-slides`          | Defines a set of slides to be used.Valid values are: welcome,hold,swipe,fingerplacement,finish,nosupport | `string`  | `""`                      |
| `videoUrl`          | `video-url`           | Video path used on the finish screen                                                                     | `string`  | `""`                      |
| `welcomeSubtitle`   | `welcome-subtitle`    | Welcome screen "Sub Title" text                                                                          | `string`  | `"Welcome to"`            |
| `welcomeText`       | `welcome-text`        | Welcome screen "TEXT" - content                                                                          | `string`  | `"Welcome Screen Text"`   |
| `welcomeTitle`      | `welcome-title`       | Welcome screen "Title" text                                                                              | `string`  | `"DEMO"`                  |


## Events

| Event               | Description                                  | Type                |
| ------------------- | -------------------------------------------- | ------------------- |
| `tutorialCompleted` | Invoked after the "FINISH" button is pressed | `CustomEvent<void>` |


----------------------------------------------

---
_Source: https://npm.io/package/@prismadelabs/prismaidtutorial · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._