Widżet rozwijany korzysta z elementu niestandardowego <devsite-expandable>, aby umożliwić użytkownikom ukrywanie i wyświetlanie fragmentów treści w sekcji rozwijanej. W języku Markdown
, opakuj go standardowym elementem HTML, np.
<section> lub <div>.
Przełącznik sekcji
W tym przykładzie element niestandardowy <devsite-expandable> jest otoczony elementem domyślnie ukrytym. Nagłówek ma atrybut class o nazwie
showalways
Ten nagłówek zawsze jest widoczny
Domyślnie ten akapit jest ukryty.
This code block within the custom element also defaults to a hidden
position.
Element sterujący niestandardowy
W tym przykładzie do elementu niestandardowego <devsite-expandable> dodajemy klasę expand-control do elementu button, aby można było rozwijać i zwijać sekcję bez przełącznika.
Rozwiń raz
W tym przykładzie klasa expand-control once jest dodawana do linku w elementach niestandardowych <devsite-expandable>, który po kliknięciu wyświetla dodatkowe treści, a następnie znika ze strony.
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.
WięcejDuis 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.
Automatyczne rozwijanie po połączeniu
W tym przykładzie do elementu niestandardowego <devsite-expandable> o identyfikatorze #sample1 dodajemy identyfikator #sample1, który automatycznie rozwija sekcję po jej załadowaniu, gdy klikniesz link do niej.
Jak automatycznie rozwijać po połączeniu
Zamknij tę rozwijaną sekcję, kliknij link #sample1 powyżej, a następnie odśwież stronę, aby automatycznie rozwinąć tę sekcję.
Code block within the 'Auto-expand on linking' demo.
Otwórz domyślnie
Poniższy przykład dodaje atrybut expanded do
<devsite-expandable> – element niestandardowy, który powoduje, że rozwijana reklama otwiera się domyślnie.
Domyślnie rozwinięte
Opcja „Otwarte domyślnie” sprawdza się, gdy masz dużo reklam rozwijanych, np. informacje o wersji, ale chcesz zostawić ostatnią z nich otwartą.