j-ToggleMore

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

Είναι ένα απλό συστατικό για να ταιριάζει το περιεχόμενο.

Μπορείτε να αλλάξετε το CSS για τις ανάγκες σας.

Μέθοδοι:

component.toggle(force) Μπορείτε να χρησιμοποιήσετε το παράμετρο force Είναι προαιρετική και θα επιβάλει την αξία. component.toggle(true); Θα δείξει ui-togglemore-after.

Καλό να ξέρεις:

Το περιεχόμενο του j-ToggleMore χωρίζεται σε 2 μέρη: before και after.Κάθε μέρος πρέπει να οριστεί.Το συστατικό προσθέτει κλάσεις CSS σε κάθε μέρος, για παράδειγμα το πρώτο div θα περιέχει το ui-togglemore-before και το δεύτερο ui-togglemore-after.

Για να αποφύγετε το "blink" προσθέστε την τάξη hidden στο δεύτερο div.

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

Χρησιμοποιήστε το με <ui-component name="togglemore">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Denis Granec. Πηγή: The Componentator Ετικέτες Αξιολόγηση, 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>