angular 弹性布局响应式表单

Question

我们正在使用这个库：https://github.com/angular/flex-layout

到目前为止，我们有以下代码来实现 fxlayout，但它在移动设备上不起作用。

<div fxLayout="column" id="width">
     <div class="table-cell" fxLayout="row">
            <div fxLayout="column" class="columnlabel">
              <label class="f_label margintop">width </label>
            </div>
            <div fxLayout="column leftpadding">
              <input type="number" matInput 
                 style="font-weight: bold;background: white;margin-top: 2px;" name="width">
                </div>
              </div>
        </div>

我要找的是，

当它是移动设备时，需要在标签下方输入控件

当它是大型设备时，需要右侧的文本框

但在某些情况下也希望在移动设备的右侧输入控件，例如，tongle 开关控件。

请单击下面的 link 以获取示例表示，您能否指导我缺少什么？ sample

按照评论中的要求提供了关于堆栈闪电战的示例工作。谢谢

https://flex-layout-angular-material-wqeqvc.stackblitz.io/

https://stackblitz.com/edit/flex-layout-angular-material-wqeqvc?file=app/app.component.html

Answer 1

你想要实现的可能是他们的 responsive API:

<div fxLayout="column" fxLayout.gt-xs="row">
    <label class="f_label margintop">Sports </label>
    <input type="number" matInput>
</div>
<div fxLayout="column" fxLayout.gt-xs="row">
        <label class="f_label margintop">Country </label>
        <input type="number" matInput>
</div>

默认情况下 fxLayout，它将在 ROW 中，当屏幕大于 xs 时，它将在 fxLayout 的列中。gt-xs

angular 弹性布局响应式表单

angular flex layout responsive form

css

responsive-design

angular