/
githubmirror
/
materialize
Обзор
Документация
Войти
/
githubmirror
/
materialize
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
v1-dev
test/html/materialbox.html
110 строк
4 KB
Chang Alan
Fixed issues with anim and width or height attributes and max-height and max-width
19 фев 2018, 02:14
19 фев 2018, 02:14
51109e1
Код
Авторство
О чём код?
<!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 right"> <div class="card horizontal"> <div class="card-image"> <img class="materialboxed" width="650" src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?q=80&fm=jpg&s=643e44f5177366de6cc914c8bcfbe064"> </div> <div class="card-stacked"> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Materialbox inside card image</span> </div> </div> </div> </div> </div> <div class="row"> <div class="col s6 right"> <div class="card large"> <div class="card-image"> <img class="materialboxed" width="650" src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?q=80&fm=jpg&s=643e44f5177366de6cc914c8bcfbe064"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Materialbox inside card image</span> </div> </div> </div> </div> <div class="row"> <div class="col s6 right"> <div class="card"> <div class="card-image"> <img class="materialboxed" data-caption="A picture of some deer and tons of trees" width="250" src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?q=80&fm=jpg&s=643e44f5177366de6cc914c8bcfbe064"> </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> <p><a href="#!">This is a link</a></p> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This is a link</a> </div> <div class="card-reveal"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div> </div> </div> </div> <div class="row"> <div class="col s6 right"> <div style="transform: translate3d(1px,1px,1px)"> <h3>Materialbox inside transformed parent</h3> <img class="materialboxed" width="650" src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?q=80&fm=jpg&s=643e44f5177366de6cc914c8bcfbe064"> </div> </div> </div> <div class="row"> <div class="col s6 right"> <h3>Materialbox with inline styles</h3> <img class="materialboxed" style="height: 200px;" src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?q=80&fm=jpg&s=643e44f5177366de6cc914c8bcfbe064"> </div> </div> <div class="row"> <div class="col s6 right"> <h3>Materialbox with empty data-caption</h3> <img class="materialboxed" width="650" data-caption src="https://images.unsplash.com/photo-1439694458393-78ecf14da7f9?q=80&fm=jpg&s=643e44f5177366de6cc914c8bcfbe064"> </div> </div> <ul id="slide-out" class="sidenav sidenav-fixed rtl grey darken-3 white-text center row"> <div class="col s10 offset-s1"><img id="profile" class="responsive-img materialboxed" src="http://ordnanceengineering.com/wp-content/uploads/8589130423107-blue-mountains-landscape-wallpaper-hd.jpg"></div> <div class="col s12"><b>Materialbox inside fixed navbar</b></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() { $('.materialboxed').materialbox(); $('.sidenav').sidenav(); }); </script> </body> </html>