# j-Intro

> j-Intro: NEW: delay {Number} a delay for next button between clicks; NEW: nexticon {String} a done icon (default: ti ti-chevron-right)

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 73e2696cfef57960ba8e9d20e61f28fad4e0f49b14ebf7bc41973767332a75bc
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

__Configuration__:

- `if {String}` condition for showing of the intro, it's compared with the value within of `path`
- `next {String}` optional, text for the next step button (default: `Next`)
- `close {String}` optional, text for the close step button (default: `Done`)
- `page {String}` optional, a link to method `function(page) {}` it's executed when page is changed
- `exec {String}` optional, a link to method `function() {}` it's executed when the intro is closed
- `check {String}` optional, a link to method `function(done) {}` it's executed when is clicked on button last button
- `remove {Boolean}` optional, when `true` then the component will be removed after close (default: `false`)
- `closebutton {Boolean}` shows close button at the right top corner (default: `false`)
- `width {Number}` a maximum width (default: `400`)
- `height {Number}` height (default: `300`)
- __NEW__: `delay {Number}` a delay for `next` button between clicks
- __NEW__: `nexticon {String}` a done icon (default: `ti ti-chevron-right`)
- __NEW__: `doneicon {String}` a done icon (default: `ti ti-check-circle`)

__Good to know__:
- each button with `name="next"` will be used as `next` button
- each button with `name="close"` will be used as `close` button
- a link with `next` class provides will be used as a `next` button
- a link with `close` class provides will be used as a `close` button

Use it with `<ui-component name="intro">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<ui-component name="intro" path="showme" config="if:myintro" class="hidden">
	<figure>A</figure>
	<figure>B</figure>
	<figure>C</figure>
	<figure>D</figure>
	<figure>E</figure>
</ui-component>

<script>
	SET('showme', 'myintro', 2000);
</script>
```