Angularjs 材料一行，2 列

Question

我正在努力实现这一目标，但不知道如何：

|-------------80%---------------------|----20%---|

一行包含 2 列，具有特定宽度。

• 我不明白什么，列(材料中的用法(在我看来就像行>行

|-------------------------------------|----//---|
|-------------------------------------|----//---|
|-------------------------------------|----//---|

不像我的例子。

我怎样才能实现它？

Answer 1

导入 AngularJS 和 Angular 材质

(包括 css 文件(后，需要在 AngularJS 应用中导入 Angular 材质。为此，您需要在 AngularJS 模块中添加"ngMaterial"提供程序，如下所示：

var app = angular.module("myApp", ["ngMaterial"]);

(如果您跳过此部分，它将不起作用(。

然后你可以按如下方式编写你的 HTML 代码

<div layout="row" layout-wrap>
    <div flex="80">80%</div>
    <div flex="20">20%</div>
</div>

这将创建一个将充当容器的div。它将包含您要显示的元素，它们将对齐一行，如有必要，它们将显示在第二行中。在 flex 属性中，您可以指定元素的宽度(以百分比形式(与容器的宽度相比。

显然，您可以根据需要更改 Angular 模块的名称和 html 元素的数量/宽度。

在那里你可以看到一些例子和一些文档

Answer 2

首先，您需要声明：

md-cols 网格中的列数。

在您的情况下 (8+2=10(：

<md-grid-list md-cols="10" ...

然后您的物品：

<md-grid-tile md-colspan="8">...</md-grid-tile>

<md-grid-tile md-colspan="2">...</md-grid-tile>

代码笔示例 - 角度材质文档