Angular Material 教程之布局篇 (一) : 布局简介
布局简介概览Angular Material 的布局特性可以使开发人员能够更轻松地基于 CSS3 flexbox 之上创建现代的响应式布局。布局API包含一组 Angular 指令,可以应用于任何应用程序的HTML内容。 使用 HTML指令 作为API提供了一个简单的方法来设置一个值(例如。
然而我们使用原质化设计中指定的断点:
我们可以使用 断点别名 来结合断点与媒体查询定义:
响应断点API现在我们可以结合断点 结果就像下表中
下面的代码中使用了响应式布局 API: <div layout="column" class="zero"> <div flex="33" flex-md="{{ vm.box1Width }}" class="one"></div> <div flex="33" layout="{{ vm.direction }}" layout-md="row" class="two"> <div flex="20" flex-md="10" hide-lg class="two_one"></div> <div flex="30px" show hide-md="{{ vm.hideBox }}" flex-md="25" class="two_two"></div> <div flex="20" flex-md="65" class="two_three"></div> </div> <div flex class="three"></div> </div> 这种布局API意味着它更容易建立和维护 flexbox 布局和通过CSS定义的一切。开发人员使用HTML布局API指定意图和处理 CSS flexbox 样式的布局引擎问题。
底层由于在 Internet Explorer 浏览器中使用属性选择器的性能问题,看下面的详情: 布局引擎在运行时动态构建类选择器。并且每个预定义的布局 CSS 类名都在
让我们看看这个 directive-to-className 变换是如何工作的。为了简单使用 <div> <div layout="row"> <div flex>First item in row</div> <div flex="20">Second item in row</div> </div> <div layout="column"> <div flex="66">First item in column</div> <div flex="33">Second item in column</div> </div> </div> 在运行时,这些属性会变成CSS类。 <div> <div class="ng-scope layout-row"> <div class="flex">First item in row</div> <div class="flex-20">Second item in row</div> </div> <div class="ng-scope layout-column"> <div class="flex-33">First item in column</div> <div class="flex-66">Second item in column</div> </div> </div> 在 .flex { -webkit-flex: 1 1 0%; -ms-flex: 1 1 0%; flex: 1 1 0%; box-sizing: border-box; } .flex-20 { -webkit-flex: 1 1 20%; -ms-flex: 1 1 20%; flex: 1 1 20%; max-width: 20%; max-height: 100%; box-sizing: border-box; } .layout-row .flex-33 { -webkit-flex: 1 1 calc(100% / 3); -ms-flex: 1 1 calc(100% / 3); flex: 1 1 calc(100% / 3); box-sizing: border-box; } .layout-row .flex-66 { -webkit-flex: 1 1 calc(200% / 3); -ms-flex: 1 1 calc(200% / 3); flex: 1 1 calc(200% / 3); box-sizing: border-box; } .layout-row .flex-33 { max-width: calc(100% / 3); max-height: 100%; } .layout-row .flex-66 { max-width: calc(200% / 3); max-height: 100%; } .layout-column .flex-33 { max-width: 100%; max-height: calc(100% / 3); } .layout-column .flex-66 { max-width: 100%; max-height: calc(200% / 3); } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |