j-ToggleMore

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

Het is een eenvoudige component om inhoud te nemen.

Je kunt CSS wijzigen voor je behoeften.

Methoden:

component.toggle(force) kan de component afnemen. de parameter force Het is optioneel en zal de waarde versterken. component.toggle(true); zal laten zien ui-togglemore-after.

Goed om te weten:

De inhoud van de j-ToggleMore is verdeeld in 2 delen: before en after.Elke deel moet worden gedefinieerd.De component voegt CSS-klassen toe aan elk deel, bijvoorbeeld de eerste div bevat ui-togglemore-before en de tweede ui-togglemore-after.

Om 'blink' te vermijden, voeg de klasse hidden toe aan de tweede div.

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

Gebruik het met <ui-component name="togglemore">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator CDN door standaard). auteur: Denis Granec. bron: de Componentator Componenten repository, MIT licentie.

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>