j-Typed

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Basé sur Étiquette.js par Mme Bordeaux
La valeur doit être array

Configuration :

Config est le même Étiquette.jsLa seule différence est que toutes les clés sont inférieures.Cela consiste à maintenir la cohérence avec d'autres composants.La seule configuration ajoutée est id

NEW: selector {String} peut contenir un élément nés pour le rendu du texte
NEW: text {String} dans le formulaire Text 1|Text 2|Text 3|Text N sinon le texte est chargé selon le path
typespeed {Number} en milliseconds (defaut : 0)
startdelay {Number} en milliseconds (defaut : 0)
backspeed {Number} en milliseconds (defaut : 0)
smartbackspace {Boolean} ce ne serait que des mots en arrière après "Ceci est un" (defaut: true)
shuffle {Boolean} pour les filets (defaut : true)
backdelay {String} avant le bacspacing (defaut: 700)
fadeout {Boolean} se décline au lieu de backspace (defaut : false)
fadeoutclass {String} css pour l'animation fade (defaut: typed-fade-out)
fadeoutdelay {Number} retard en milliseconds (defaut : 500)
loop {Boolean} Les lignes de couverture (defaut : false)
loopcount {String/Number} quantité de loops (defaut : Infinity)
Le cursor d'affichage showcursor {Boolean} (defaut : true)
Caractère de cursor cursorchar {String} (defaut : |)
autoinsertcss {Boolean} insère CSS pour le cursor et fadeOut dans HTML <head> (defaut: true)
contenttype {String} contenuType html ou null pour plaintext (defaut: html)

Événements mondiaux :

Encore une fois, comme Étiquette.jsParamètres de component

ON('typed.onComplete', function(typed, component) {})
ON('typed.preStringTyped', function(pos, typed, component) {})
ON('typed.onStringTyped', function(pos, typed, component) {})
ON('typed.onLastStringBackspaced', function(typed, component) {})
ON('typed.onTypingPaused', function(pos, typed, component) {})
ON('typed.onTypingResumed', function(pos, typed, component) {})
ON('typed.onReset', function(typed, component) {})
ON('typed.onStop', function(pos, typed, component) {})
ON('typed.onStart', function(pos, typed, component) {})
ON('typed.onDestroy', function(typed, component) {})

Utilisez-le avec <ui-component name="typed">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Denis Granec. Source : le référentiel de composants Componentator, licence MIT.

example.html

<div style="height:100px">
	<ui-component name="typed" path="messages" config="loop:true" style="white-space:pre"></ui-component>
</div>
<div style="height:50px">
	<ui-component name="typed" path="messages2" config="loop:true;typespeed:100;backspeed:50"></ui-component>
</div>

<script>
	var messages = 'npm install total.js^1000\n`+ <b>total.js@3.1.0</b>` ^1000\n`added <b>1 package</b> from 23 contributors and audited 1 package in <b>1.348s</b>` ^1000\n`found 0 vulnerabilities`';
	var messages2 = ['Hello world!', '<b>Total.js</b> is awesome!', 'jComponent is <b>awesome</b>!', 'Lorem ipsum', 'Lorem dolor'];

	var count = 0;
	ON('typed.onComplete', function(typed, component) {
		if (typed.el.id === 'myconsole') {
			count++;

			if (count === 5)
				typed.loop = false;
		}
	});
</script>