j-ToggleMore

jComponent 20 · jcomponent@20 component Példa betöltve a jComponent 20-szal

Egyszerű összetevő a tartalom megragadásához.

A CSS-t az Ön igényeinek megfelelően módosíthatja.

módszerek:

component.toggle(force) A paraméterek megközelíthetők. a paraméter force Ez az érték, és az érvényesítést. component.toggle(true); Megmutatja ui-togglemore-after.

Jó tudni:

A tartalom a j-ToggleMore Két részre oszlik: before és afterA komponens hozzáadja a CSS osztályokat minden részhez, például először div Tartalmazza ui-togglemore-before és a második ui-togglemore-after.

A "blink" elkerülése érdekében a második div-hez hozzáadjuk a hidden osztályot.

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

Használja a <ui-component name="togglemore">Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről DEF.fallback (Azt a Componentator CDN default). szerző: Denis Granec. forrás: a Componentator Az összetevők raktár, MIT licenc.

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>