/
githubmirror
/
materialize
Обзор
Документация
Войти
/
githubmirror
/
materialize
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
v0.97.1
test/html/collapsible.html
108 строк
4 KB
Chang Alan
allowed collapsible header to wrap text
03 июл 2015, 03:57
03 июл 2015, 03:57
20d68a7
Код
Авторство
О чём код?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/> <title>Documentation - Materialize</title> <!-- CSS --> <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/> </head> <body> <h2>Collapsible Header Text Wrap</h2> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="mdi-maps-place"></i>Second really long title that should overlap on most screens that aren't incredibly big and wide. Second really long title that should overlap on most screens that aren't incredibly big and wide. Second really long title that should overlap on most screens that aren't incredibly big and wide.</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> <h2>Nested Collapsible</h2> <!-- Nested Accordion --> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div> <div class="collapsible-body"> <ul class="collapsible" data-collapsible="accordion"> <li> <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> </div> </li> <li> <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> <!-- Nested Expandable --> <ul class="collapsible" data-collapsible="expandable"> <li> <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div> <div class="collapsible-body"> <ul class="collapsible" data-collapsible="expandable"> <li> <div class="collapsible-header"><i class="mdi-image-filter-drama"></i>First</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> </div> </li> <li> <div class="collapsible-header"><i class="mdi-maps-place"></i>Second</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> <li> <div class="collapsible-header"><i class="mdi-social-whatshot"></i>Third</div> <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div> </li> </ul> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="../../../bin/materialize.js"></script> <script type="text/javascript"> $( document ).ready(function() { $(".button-collapse").sideNav({ edge: 'right', menuWidth: '90%' }); $('select').material_select(); }); </script> </body> </html>