标签: material

所以我的布局看起来类似于以下内容:

     <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_height="wrap_content"
            android:elevation="4dp"
            android:background="?attr/colorPrimary"
            android:layout_width="match_parent"
            android:minHeight="?attr/actionBarSize"/>

         <FrameLayout
             android:id="@+id/content"
             android:layout_below="@+id/toolbar"
             android:layout_width="match_parent"
             android:layout_height="match_parent"/>

    </RelativeLayout>

这为我的活动形成了我的基本布局文件,然后我将FrameLayout替换为各种片段.一个这样的片段有这样的布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:elevation="4dp"
        android:layout_height="wrap_content"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/profileViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/sliding_tabs"
        android:background="@android:color/white"/>

    <FloatingActionButton
        android:id="@+id/floatingButton"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="16dp"
        android:layout_marginBottom="16dp"/>

</RelativeLayout>

我希望,因为我已将工具栏和SlidingTabLayout的高程设置为4dp,工具栏不会在选项卡上投射阴影,但它会:

理想情况下,我不想在代码中设置工具栏的高程 - 有没有人知道是否有办法防止工具栏投射阴影？我会假设两个视图都在4dp高度,即使它们不在同一个布局中,也不会投射阴影.

谢谢您的帮助.

我如何创建Materialized Set Up Wizard(步骤视图)

实际上,在我的应用程序中,我需要在开始时询问用户一些信息.就像Google首次推出手机时询问用户一样.

Step 1: 信息(下一个)

Step 2: 更多信息(返回和下一个)

Step 3: 审核(返回并提交)

就像Lollipop的设置向导一样

但是我TextView(s) and EditText(s)在每个屏幕上都有很多,这是我真正需要的,我是否需要根据我的要求自定义它,或者是否有任何官方的lib使用？

根据Google Material网站上的指南,我们必须使用_ i _ tag中的材质图标.

问题是如何将图标添加为font-awesome.就像是 :

Class="material-icons face"

代替

<i class="material-icons"> face </i>

我是Angular/Angular Material的新手.

我有一个带有2个MatDatePicker输入字段的div:

<div class="docs-example-viewer-body">
  <mat-form-field>
    <mat-select placeholder="Employee" [(ngModel)]="selectedEmployeeId" name="employee_name" (ngModelChange)="setSelectedEmployee($event)">
      <mat-option *ngFor="let employee of employees" [value]="employee.id">
        {{employee.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a start date" [(ngModel)]="inputStartDate">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [startAt]="startDate"></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose an end date" [(ngModel)]="inputEndDate">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker [startAt]="endDate"></mat-datepicker>
  </mat-form-field>


  <p *ngIf="selectedEmployeeId"> Selected value: {{selectedEmployeeId}} from {{inputStartDate}} until {{inputEndDate}}</p>
</div>

但是我在浏览器中收到以下错误:

MatDatepicker只能与单个输入相关联.at MatDatepicker.registerDatepicker(datepicker.es5.js:1560)的MatDatepicker._registerInput(datepicker.es5.js:1281)

感谢您的解决方案或反馈

Joost的

我尝试在此https://material.angular.io/cdk/drag-drop/overview#reordering-lists之间进行混合

和这个 https://material.angular.io/components/grid-list/overview

但是不可能！

我尝试做类似的事情

<mat-grid-list cols="2" rowHeight="2:1">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let book of books" cdkDrag>
    <mat-grid-tile class="example-box">{{ book }}</mat-grid-tile>
  </div>
</div>

但是下降是行不通的。

为了清楚起见，我尝试通过与Angular材质拖放来互换“ 1”，“ 2”，“ 3”，“ 4” 来执行此操作