j-ToggleMore

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Je to jednoduchý komponent na prepínanie obsahu.

CSS môžete zmeniť pre svoje potreby.

Metódy:

component.toggle(force) môže prepínať komponent. Parameter force je voliteľný a vynúti hodnotu. napr. component.toggle(true); zobrazí ui-togglemore-after.

Je dobré vedieť:

Obsah j-ToggleMore je rozdelený na 2 časti: before a after. Každá časť musí byť definovaná. Komponent pridáva do každej časti triedy CSS, napríklad prvý div bude obsahovať ui-togglemore-before a druhý ui-togglemore-after.

Aby ste predišli "blikaniu", pridajte triedu hidden k druhému div.

<ui-component name="togglemore">
	<div>
		Content before
	</div>
	<div class="hidden">
		Content after
	</div>
</ui-component>

Použite ho so <ui-component name="togglemore">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Denis Granec. Zdroj: úložisko komponentov Componentator, licencia MIT.

example.html

<div style="width: 400px">
	<ui-component name="togglemore">
		<div>
			BEFORE long text
		</div>
		<div class="hidden">
			AFTER Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda eligendi pariatur perferendis expedita tempora, deserunt sunt, quas similique velit quo, harum odio explicabo ea dicta aliquam ipsa, veniam vitae nemo.
		</div>
	</ui-component>
</div>