将屏幕分成三列 Angular Material 设计
Dividing the screen into three columns Angular Material Design
我是 Angular Material 设计新手。我想设计一个表单,其中 divide 将日期分为三列。我创建了两个表单。第一种形式包含两个 div,第二种形式包含一个 div。我希望每个 div 在屏幕的不同列中,三个 div 应该 divide 屏幕宽度同样比方说 33.33% 的 100% 宽度,但我得到所有 div 仅在一列中。下面给出的是我写的代码:
<body ng-app="inputErrorsAdvancedApp">
<div ng-controller="AppCtrl" layout="column" ng-cloak>
<div md-content layout-padding>
<form name="userForm">
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>First Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Last Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Date Of Birth</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Gender</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Email</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Mobile</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Address</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>City</label>
<input>
</md-input-container>
</div>
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>Country</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>State</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Phone</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Alternate Email</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Alternate Mobile</label>
<input>
</md-input-container>
</div>
</form>
<form name="security">
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>old password</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>New Password</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Re-Enter Password</label>
<input>
</md-input-container>
</div>
</form>
</div>
这是我创建的页面的插件
https://plnkr.co/edit/nj5o59A3NmqZtCv7HOfy?p=preview
请帮我解决这个问题。
在父元素上使用 layout="row"
。例如
<div layout="row" md-content layout-padding>
...forms...
</div>
Link 到文档:https://material.angularjs.org/latest/layout/container
你的 flex 就像 dividing 屏幕。你可以这样使用。屏幕必须 divide 到 100%。如果您使用 3 div 或 md-input-container flex 应该是 33。即 100/3。如果你有 4 divs 你应该 divide 屏幕 100% 到 4 个相等的部分。
<div layout-xs="column">
<md-input-container class="md-block" flex="33">
<label>First Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="33">
<label>Last Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="33">
<label>Date Of Birth</label>
<input>
</md-input-container>
</div>
有关详细信息,请访问 angular material 官方网站。
我是 Angular Material 设计新手。我想设计一个表单,其中 divide 将日期分为三列。我创建了两个表单。第一种形式包含两个 div,第二种形式包含一个 div。我希望每个 div 在屏幕的不同列中,三个 div 应该 divide 屏幕宽度同样比方说 33.33% 的 100% 宽度,但我得到所有 div 仅在一列中。下面给出的是我写的代码:
<body ng-app="inputErrorsAdvancedApp">
<div ng-controller="AppCtrl" layout="column" ng-cloak>
<div md-content layout-padding>
<form name="userForm">
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>First Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Last Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Date Of Birth</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Gender</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Email</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Mobile</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Address</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>City</label>
<input>
</md-input-container>
</div>
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>Country</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>State</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Phone</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Alternate Email</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Alternate Mobile</label>
<input>
</md-input-container>
</div>
</form>
<form name="security">
<div layout-xs="column">
<md-input-container class="md-block" flex="30">
<label>old password</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>New Password</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="30">
<label>Re-Enter Password</label>
<input>
</md-input-container>
</div>
</form>
</div>
这是我创建的页面的插件
https://plnkr.co/edit/nj5o59A3NmqZtCv7HOfy?p=preview
请帮我解决这个问题。
在父元素上使用 layout="row"
。例如
<div layout="row" md-content layout-padding>
...forms...
</div>
Link 到文档:https://material.angularjs.org/latest/layout/container
你的 flex 就像 dividing 屏幕。你可以这样使用。屏幕必须 divide 到 100%。如果您使用 3 div 或 md-input-container flex 应该是 33。即 100/3。如果你有 4 divs 你应该 divide 屏幕 100% 到 4 个相等的部分。
<div layout-xs="column">
<md-input-container class="md-block" flex="33">
<label>First Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="33">
<label>Last Name</label>
<input>
</md-input-container>
<md-input-container class="md-block" flex="33">
<label>Date Of Birth</label>
<input>
</md-input-container>
</div>
有关详细信息,请访问 angular material 官方网站。