/
githubmirror
/
materialize
Обзор
Документация
Войти
/
githubmirror
/
materialize
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
v0.97.6
test/html/cards.html
127 строк
4 KB
Chang Alan
Added options for card-action with card-reveal
08 фев 2016, 02:47
08 фев 2016, 02:47
5b75e62
Код
Авторство
О чём код?
<!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> <div class="row"> <div class="col s6"> <div class="card large"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="https://placekitten.com/600/500"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> </div> <div class="card-action"> <a href="/" target="_blank">Link 1</a> <a href="/" target="_blank">Link 2</a> <a class="activator" style="cursor:pointer;">Open card</a> </div> <div class="card-reveal"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>This is the last content</p> </div> </div> </div> <div class="col s6"> <div class="card large"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="https://placekitten.com/600/500"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> </div> <div class="card-reveal"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>There's content here</p> <p>This is the last content</p> </div> <div class="card-action"> <a href="/" target="_blank">Link 1</a> <a href="/" target="_blank">Link 2</a> <a class="activator" style="cursor:pointer;">Open card</a> </div> </div> </div> </div> <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(); $('#add-li').click(function() { $('#first').append('<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>'); }); $('#add-li2').click(function() { $('#second').append('<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>'); }); }); </script> </body> </html>