1.0.7 • Published 7 years ago

@prismadelabs/prismaidtutorial

Licence

MIT

Version

1.0.7

Deps

Size

24.7 MB

Vulns

Weekly

Summary Dependency Versions

PrismaID Tutorial

Version Size Types

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

<!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.

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

tutorialElement.welcomTitle = "Hello Tutorial!"

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

Assets

Texture Packer

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>`