Widgetul extensibil folosește elementul personalizat <devsite-expandable> pentru a permite utilizatorilor să ascundă sau să arate porțiuni de conținut într-o secțiune extensibilă. Într-un fișier Markdown, împachetați elementul personalizat cu un element HTML standard, cum ar fi <section> sau <div> .
Comutare secțiune
Următorul exemplu este împachetat într-un element personalizat <devsite-expandable> care este implicit la o poziție ascunsă. Titlul său are un atribut class numit showalways .
Acest titlu apare întotdeauna
Acest paragraf este implicit într-o poziție ascunsă.
This code block within the custom element also defaults to a hidden
position.Control personalizat
Următorul exemplu adaugă clasa expand-control la elementul button al elementului personalizat <devsite-expandable> pentru a extinde și restrânge secțiunea fără comutare.
Sunt disponibile multe opțiuni
Extindeți o dată
Următorul exemplu adaugă clasa expand-control once la un link din cadrul elementului personalizat <devsite-expandable> care afișează conținut suplimentar atunci când se dă clic și apoi dispare din pagină.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mai mult...Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Extindere automată la conectare
Următorul exemplu adaugă un ID #sample1 la elementul personalizat <devsite-expandable> care extinde automat secțiunea la încărcarea paginii atunci când creați un link către aceasta.
Cum se extinde automat la conectare
Închideți această secțiune extensibilă, faceți clic pe linkul #sample1 de mai sus, apoi reîncărcați pagina pentru a extinde automat această secțiune extensibilă.
Code block within the 'Auto-expand on linking' demo.
Deschide implicit
Următorul exemplu adaugă atributul expanded la elementul personalizat <devsite-expandable> pentru a face ca extensia să se deschidă în mod implicit.
Extins în mod implicit
Deschis în mod implicit este grozav atunci când aveți o mulțime de extensibile, cum ar fi pentru notele de lansare, dar doriți să o păstrați deschisă pe cea mai recentă.