Blocuri de conținut pliabili
Collapsibles vă permit să ascundă sau să afișeze conținut, care este util pentru depozitarea pieselor de informații.
Pentru a crea un bloc pliabil de conținut, atribuiți data-role="collapsible" de data-role="collapsible" atribut la un container. În interiorul containerului (div) , se adaugă un antet (H1-H6) sau elementul de legendă, urmat de orice elementele de limbaj HTML pe care doriți să fie extins:
Exemplu
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
Încearcă - l singur » În mod implicit, conținutul este închis. Pentru a extinde conținutul atunci când se încarcă pagina, utilizarea de data-collapsed="false" sa data-collapsed="false" :
Exemplu
<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm
now expanded by default.</p>
</div>
Încearcă - l singur » Imbricate Blocuri pliabile
Blocuri de conținut pliabili pot fi imbricate (a collapsible inside a collapsible) , în (a collapsible inside a collapsible) :
Exemplu
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div
data-role="collapsible" >
<h1>Click me - I'm a
nested collapsible block!</h1>
<p>I'm the expanded
content in the nested collapsible block.</p>
</div>
</div>
Încearcă - l singur » blocuri de conținut pliabili pot fi imbricate ori de câte ori doriți.
Seturi pliabile
Seturile comprimabile sunt blocuri pliabile care sunt grupate împreună (adesea menționată ca un acordeon). Atunci când un bloc nou este deschis, toate celelalte blocuri de aproape.
Creați mai multe blocuri de conținut pliabil, și apoi înfășurați un container nou cu data-role="collapsibleset" de data-role="collapsibleset" în jurul blocurilor pliabile:
Exemplu
<div data-role="collapsibleset" >
<div
data-role="collapsible">
<h1>Click me - I'm
collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the
expanded content.</p>
</div>
</div>
Încearcă - l singur » Mai multe exemple
pop - up pliabilă
Cum de a crea un pop-up pliabil.
Îndepărtați de colț rotunjit cu data-inset atribut
Cum se elimină colțurile rotunjite și se adaugă lățime maximă pe collapsibles.
Comprimați collapsibles cu data-mini - atribut
Cum de a face collapsibles mai mici.
Schimbarea pictograma cu prăbușit-date-icon și extins-date-icon
Cum se schimba pictograma de collapsibles (default is + and -) .
Schimbarea poziției pictograma
Cum se schimbă poziția pictograma de collapsibles (default is left ) .