Angular Material

Angular

Material 的布局控制

Ng Material provides a set of reusable, well-tested, and accessible UI components based on Google material design style.

layout , flex 属性可以快速配置HTML 布局，layout属性的值是row或者column，表示当前容器中子元素的布局方式，成一行 或者一列。子元素的大小是自己的flex属性定义，可以是自动分配，或者指定33,66或者5的整数倍。另外父元素的layout-align 属性定义子元素对齐方式。例如以下代码表示 子元素 在水平方向上左对齐，垂直方向居中对齐. 子元素中一个button宽度占比 10%

<div layout="column" layout-align="start center" layout-fill>
    <div layout='column' flex='10'>
        <md-button class='md-primary md-raised' ng-link="[Dash]">DashBoard</md-button>
    </div>
</div>

还有些属性可辅助布局，layout-margin 和layout-padding用来给flex元素添加margin和padding（不是很理解），layout-fill属性强制子元素填充容器的可用空间。（layout-wrap）

自适应布局

比如使用 layout-sm="column" 定义屏幕小于600px时布局方式，使用 hide-gt-lg 表明该元素在大于1200px时不可见。。。汗，怎么还有 hide-**

<!-- myApp -->
<div layout="column" layout-padding>
    <div layout="row">
        <div>Logo</div>
        <h1 flex> Welcome </h1>
    </div>
    <!-- *-gt-sm is condition, can be combined with other attri.
        such as layout, flex, hide...
     -->
    <div layout-gt-sm="row" layout-sm="column" flex>
        <div flex-gt-sm="20">SideBar</div>
        <div flex-gt-sm="80">Content</div>
    </div>
    <!-- align center. -->
    <div layout="row" layout-align="center">Footer</div>
</div>

Material 组件

这些组件都是 AngularJS 的 directive，以md-作为前缀。
1.表单组件：

<md-button> Click </md-button>
<md-button ng-href='#'> Blog Addr </md-button>
<md-checkbox ng-model="isDone" arial-label="Done??"> Done?? </md-checkbox>

主题

看下来ng-Material 的主题和 Bootstrap挺像的，配色方面有primary， warm 等等不同的语义，使得配色协调.

默认主题下每种用户意图都有对应的调色板配置:

#

以下是ThreeJS打造的例子：
demo1，基本元素

demo2，纹理加高程