j-ToggleMore

jComponent 20 · jcomponent@20 component Exemplu încărcat cu jComponent 20

Este o componentă simplă pentru a trage conținutul.

Puteți schimba CSS pentru nevoile dvs.

Metode:

component.toggle(force) Se poate folosi componenta. parametrii force este opțional și va forța valoarea. component.toggle(true); Va arăta ui-togglemore-after.

bine să știi:

Conținutul j-ToggleMore este împărțit în 2 părți: before și after. Fiecare parte trebuie definită. Componentul adaugă clase CSS fiecărei părți, de exemplu, primul div va conține ui-togglemore-before și al doilea ui-togglemore-after.

Pentru a evita "blink", adăugați clasa hidden la al doilea div.

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

Utilizați-l cu <ui-component name="togglemore">Când componenta nu este încă încărcată, jComponent Descărcați-l la prima utilizare de la adresa DEF.fallback (în cazul Componentator Cuvânt cheie: Denis Granec, Sursă Componentator Componente de stocare, MIT licență.

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>