Angular Material API简单翻译(Layout部

2016-07-27 本文已影响0人 ___wanJS

昨天翻译了Angualr Material的一个官方入门教程，今天来简单翻译一下它的API文档，保证自己能看懂就行了,原文地址

简述

Angular Material 的布局方式基于CSS3的flexbox规则
布局API由一系列Angular 指令组成
Angular Material使用指令布局，使用CSS类注入样式

布局与容器

使用layout指令来制定容器内部元素的布局方式，如layout='row'制定容器内部的元素将进行水平排列，如果不知道layout的值，那将默认进行row布局

row : 元素水平排列，每个元素最大高度为100%，最大宽度为元素在容器中的宽度
column : 元素垂直排列，最大宽度100%，最大高度为元素在容器中的高度

响应式布局

在不同的设备下，元素的布局方式可能发生变化，可以用breakpoint alias来设置元素在不同设备下的布局方式
下面的代码表示当页面在宽屏设备上显示时，两个div会以行布局显示，当页面在小尺寸设备上显示时，则会以列布局显示

<div layout="row" layout-xs="column">
  <div flex>
    I'm above on mobile, and to the left on larger devices.
  </div>
  <div flex>
    I'm below on mobile, and to the right on larger devices.
  </div>
</div>

所有的breakpoint alias如下：

layout : 默认布局方式，当其他布局别名执行时失效
layout-xs : width < 600px时触发
layout-gt-xs : width >= 600px 时触发
layout-sm : 600px <= width < 960px 时触发
layout-md : 960px <= width < 1280px 时触发
layout-gt-md : width > 1280px 时触发
layout-lg : 1280px <= width < 1920px 时触发
layout-gt-lg : width >= 1920px 时触发
layout-xl : width >= 1920px 时触发

容器中的子元素

我们可以使用flex、flex-order、flex-offset来为容器中的子元素设定尺寸，例如：flex='30',表示这个元素的宽度为30%,flex属性的取值如果是数字的话，只能取5的倍数或33、66
当然，还有以下值可供选择：

flex='none' : 尺寸取决于自身的width和height且不会变化
flex='initial' : 会按照需要收缩，不会扩大，变化基于自身的width和height
flex='auto' : 会根据需要自动变化，变化基于自身的width和height
flex='grow' : 会根据需要自动变化，且恒为100%
flex='nogrow' : 会根据需要收缩，但不会扩大，变化基于自身的width和height
flex='noshrink' : 会根据需要扩大，但不会收缩，变化基于自身的width和height

排列HTML元素

可以通过flex-order指令来对子元素进行排序，子元素将按照取值从小到大的顺序依次排列，取值范围为-20至20的整数
'flex-order'指令也有对应的响应式布局指令，如flex-order-xs、flex-order-gt-xs等

偏移量

可以通过使用flex-offset指令为子元素添加偏移量，取值规则和flex相同，其原理是为子元素添加了一个margin-left...
当然，这个指令也有响应式布局别名...

子元素对齐

layout-align指令取值由两个词组成，前者设置水平对齐方式，后者设置垂直对齐方式，只提供一个值时将只能设置水平对齐方式，而垂直对齐方式将被设置为默认
当然，这个指令也有响应式布局别名，不说了...
水平对齐方式包括：

none : 无对齐，使用默认对齐，和start相同
start : 默认对齐方式，向左(上)顶格
center : 居中对齐
end : 向右(下)顶格
space-around : 每个元素都保留margin的分散对齐方式
space-between : 仅在相邻元素间保留margin的分散对齐方式
垂直对齐方式包括：
none : 无对齐，使用默认对齐，和stretch相同
start : 向上(左)顶格
center : 居中对齐
end : 向下(右)顶格
stretch(default) : 拉伸对齐，拉伸高度(宽度)为100%

额外设定

layout-margin、layout-padding和layout-fill

layout-margin指令为容器内的每个子元素添加margin
layout-padding指令为容器内的每个子元素添加padding
layout-fill指令强制让容器内的子元素撑满容器
layout-wrap指令限制子元素被包含在容器内及时它们的尺寸之和超过了容器

Show 和 Hide

使用show和hide指令设置子元素显示或隐藏，和Angular的ng-show和ng-hide相似，接受一个boolean值或返回boolean值的表达式，show和hide指令也拥有相应式别名，可以设置元素在特定屏幕尺寸下显示或隐藏

故障处理

概述

Angular Material Layout系统使用了CSS3的flexbox特性，更重要的是，它提供了一系列语法糖来让开发者轻松快捷为HTML容器和元素添加响应式支持
当你使用这些布局特性时，你也许会遇到布局没有达到预期效果的情况，特别是在ie10和ie11浏览器中，此时也许你仍然需要使用原生的HTML,CSS和Javascript来达到你预期的结果

资源

如果你在某个特定的浏览器中开发时遇到问题，强烈建议你通过以下资源获得帮助：

常见问题

下面给你介绍一下开发过程中的常见问题和解决方法

在开始构建应用时，建议先进行移动端的布局，在达到预期效果后，使用flex-gt-*或flex-gt-*指令添加对大屏幕设备的支持.这个方法避免了从大屏向小屏迁移时面临的一大堆问题
某些元素如<fieldset>和<button>对于flex的支持不是很好，一些Angular Material 组件拥有独有的样式，如果你在使用某个特定的元素或组件时遇到问题，你可以尝试使用一个带flex属性的<div>父元素或子元素取代它
部分Flexbox 属性例如flex-direction无法添加动画
Flexbox在不同的浏览器会有不同的显示效果，你应该测试尽可能多的浏览器以确保尽快发现和解决布局错误

Layout Column

因为CSS的一些特殊规则，layout='column'和breakpoints(xs,gt-xs,xs,gt-sm等等)在某些情况下可能会失效
在案例中，我们希望card1和card2在非小尺寸设备中进行行布局，且card1的宽度为30%，但是最后的显示效果却不是我们希望的.原因是搞反了布局的逻辑导致默认的布局方式为layout='row'

Layout Column 和 Container HEights

在Flexbox中，一些浏览器会根据flex容器的内容的大小来决定容器的尺寸，当你在有一个non-flex的组件(如 toolbar)后面跟着2个列布局的felx组件时这是非常需要注意的(在原文的例子中出现的是flex元素嵌套的问题)，解决的办法是给外部的flex元素添加height:100%

layout部分就到这里啦，明天继续翻译service部分