j-ToggleMore

jComponent 20 · jcomponent@20 component Przykład załadowany z jComponent 20

Jest to prosty element do rozwijania treści.

Możesz zmienić CSS w zależności od potrzeb.

Metody:

component.toggle(force) Możesz rozwinąć element. parametry force Jest to opcjonalne i będzie miało wartość. component.toggle(true); będzie pokazywać ui-togglemore-after.

Dobrze wiedzieć:

Zawartość j-ToggleMore jest podzielona na 2 części: before i after.Każda część musi być zdefiniowana.Komponent dodaje klasy CSS do każdej części, na przykład pierwszy div będzie zawierać ui-togglemore-before i drugi ui-togglemore-after.

Aby uniknąć "blink" dodaj klasę hidden do drugiej div.

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

Użyj go z <ui-component name="togglemore">Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu DEF.fallback (Wydaje się Componentator Autor: Denis Granec Źródło: Componentator Zestaw składników, licencja 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>