ForgeКомпоненти
bg

Компоненти

j-Typed

jComponent 20 · jcomponent@20 component Примерът е зареден с jComponent 20

Конфигуриране:

Конфигурацията е същата като Стъпка.jsЕдинствената разлика е, че всички ключове са по-ниски. това е да се поддържа съгласуваност с други компоненти. id

  • NEW: selector {String} може да съдържа нестен елемент за рендериране на текст
  • NEW: text {String} във формуляра Text 1|Text 2|Text 3|Text N в противен случай текстът се зарежда според path
  • typespeed {Number} в милисекунди (предварително: 0)
  • startdelay {Number} в милисекунди (предварително: 0)
  • backspeed {Number} в милисекунди (предварително: 0)
  • smartbackspace {Boolean} това ще се отклони само от думите след "Това е" (предварително: true)
  • shuffle {Boolean} затваря лентите (предварително: true)
  • backdelay {String} време преди задвижване (предварително: 700)
  • fadeout {Boolean} изпада вместо задния пространство (дефолт: false)
  • Класа на fadeoutclass {String} css за фъстъчна анимация (предварително: typed-fade-out)
  • fadeoutdelay {Number} Закъснение в милисекунди (дефинирано: 500)
  • loop {Boolean} Задължително се изтегляне (по подразбиране: false)
  • loopcount {String/Number} Количеството лопове (по подразбиране: Infinity)
  • showcursor {Boolean} Използвайте курсора (дефолт) true)
  • cursorchar {String} Карактеристиката на курсора (дефолт: |)
  • autoinsertcss {Boolean} въвежда CSS за курсора и fadeOut в HTML <head> (предварително: true)
  • contenttype {String} съдържаниеТип html или null за жалбоподаване (предварително: html)

Глобални събития:

И отново, както и Стъпка.jsДобавено 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) {})

Използвайте го с <ui-component name="typed">Когато компонентът все още не е зареден, jComponent Изтегляне на първия адрес в DEF.fallback (След това Componentator Автор: Денис Гран. източник: The Componentator Съставни съставки, лиценз на 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>