• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » JavaScript » 正文

如何使用Angular和Material Design构建登录UI

ngkoma • 2年前 (2022-05-26) • JavaScript

本教程将向您展示如何使用 angular Material 构建漂亮的登录和注册 UI。我们将了解各种材料设计组件以及如何使用它们来实现具有专业外观的应用程序。本教程的完整代码可以在我们的 GitHub 存储库中找到。

入门

我们将从创建一个 Angular 应用程序开始。希望您已经在工作环境中安装了node .js 和 Angular CLI。

使用以下命令创建一个新的 Angular 应用程序。

# create a new Angular project under the name responsive-angular-material
ng new registration-login-angular-material

此命令创建引导 Angular 应用程序所需的所有文件。下一步是在您的应用程序中添加 Angular Material。 

cd responsive-angular-material/

#install angular material 
ng add @angular/material

使用 Angular CLI 创建组件

Angular 中的组件是应用程序的构建块。尽管您可以手动创建组件，但 Angular CLI 可以很容易地自动生成包含所有必要启动代码的组件。要在 Angular CLI 中生成组件，您只需运行以下命令：

# MyComponent is the name of your component
ng g component MyComponent

我们的应用程序将具有以下组件：

  • Registration组件_

  • Login组件_

现在让我们生成这些组件。

#registration component
ng g component RegistrationComponent

#login component
ng g component LoginComponent

添加主题

Angular Material 的美妙之处在于它带有预构建的主题，因此您只需将一些简单的代码片段插入您的应用程序即可轻松引导您的应用程序的外观和感觉。要添加主题，只需将其导入 style.css。

/*style.css*/
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

构建用户界面

我们希望我们的 UI 具有一个导航栏，其中包含用于注册和登录的链接。因此，我们将创建一个导航栏，其中包含两个链接到应用程序组件的按钮。

要创建工具栏和按钮，请分别使用 <mat-toolbar> 和 <mat-button> 组件。

继续在src/app/app.component.html中添加 UI 的 HTML 代码 。请注意，我们还添加了指向路线的链接。

<!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary">
   <mat-toolbar-row>
     <!--  <span>HOME</span> -->
      <span><a href="/">HOME</a></span>
      <span class="spacer"></span>
      <a mat-button routerLink="/register">Register</a>
      <a mat-button routerLink="/login">Login</a>
   </mat-toolbar-row>
</mat-toolbar>

接下来，我们将为我们的 UI 添加一些样式。打开app.component.css并添加以下 CSS 样式。

.spacer {
  flex: 1 1 auto;
}

导入 Angular 材质组件

您还需要从@angular/material. 您可以选择从主模块导入它们，也可以创建一个包含所有材料设计模块的单独模块。由于在创建 UI 的其余部分时我们将使用其中许多模块，因此我们将为所有组件创建一个单独的模块。继续创建一个新文件src/app/material.module.ts。

在文件中添加 、 和 组件的模块<mat-toolbar> ， 如下所示。</mat-toolbar-row><mat-button>

import { NgModule } from  '@angular/core';

import {MatButtonModule,MatToolbarModule} from  '@angular/material';


@NgModule({
imports: [MatButtonModule,MatToolbarModule],
exports: [MatButtonModule,MatToolbarModule],

})

export  class  MyMaterialModule { }

然后，从我们代码中的其他组件中，我们只需要包含我们刚刚创建的模块——app/app.module.ts——如下所示。

// app/app.module.ts
import { MyMaterialModule } from  './material.module';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,

  ],
})

发出 ng serve 命令来测试您的应用程序，您应该会看到一个漂亮的导航区域，其中包含注册和登录链接。

如何使用Angular和Material Design构建登录UI 第1张

启用路由

路由使用户能够在不同页面之间导航。要在我们的应用程序中启用路由，我们将首先定义路由配置。为此，请将以下代码添加到 app.module.ts。

import { RouterModule, Routes } from '@angular/router';

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,
    RouterModule.forRoot([
      { path: '', redirectTo: '/', pathMatch: 'full' },
      { path: 'register', component: RegistrationComponentComponent },
      { path: 'login', component: LoginComponentComponent },
      
    
    ]),

  ],

下一步将添加一个<router-outlet></router-outlet> 元素，使 Angular 路由器知道放置路由组件的位置。app.component.html文件现在应该如下所示：

<!--The content below is only a placeholder and can be replaced.-->
<mat-toolbar color="primary">
   <mat-toolbar-row>
     <!--  <span>HOME</span> -->
      <span><a href="/">HOME</a></span>
      <span class="spacer"></span>
      <a  mat-button  routerLink="/register">Register</a>
      <a  mat-button  routerLink="/login">Login</a>
   </mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>

我们已经放置了路由器插座，因此组件将呈现在导航栏下方。

注册界面

在本节中，我们将主要使用布局和表单控件组件。这个 UI 将展示这些 Material Design 组件：

  • 卡片组件 ( <mat-card>) — 单个主题上下文中的文本、照片和动作的内容容器

  • 标签组件 ( <mat-label>) - 用于为表单域指定标签

  • 输入组件 ( <input matInput>) - 指定输入字段

  • 表单域组件 ( <mat-form-field>) - 包装多个 Angular 组件以创建一个表单域

  • 复选框组件 ( <mat-checkbox>) - 具有增强的 Material Design 样式的原生复选框

  • 日期选择器组件 ( <mat-datepicker>) - 增强的日期选择器

但首先，让我们将它们导入 src/app/material.ts。

import { NgModule } from  '@angular/core';
import {MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatRadioModule,MatListModule,} from  '@angular/material';
import {MatDatepickerModule} from  '@angular/material/datepicker';
import { FormsModule, reactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [MatNativeDateModule,MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule,FormsModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,],

exports: [MatNativeDateModule,FormsModule,
MatDatepickerModule,MatIconModule,MatButtonModule,MatCheckboxModule, MatToolbarModule, MatCardModule,MatFormFieldModule,MatInputModule,MatListModule,MatRadioModule,],

})

export  class  MyMaterialModule { }

我们将从 开始 <mat-card>，它将包含注册 UI 中的所有内容。打开 registration-component.component.html并添加以下代码。

<mat-toolbar>
   <span>Registration</span>
</mat-toolbar>
<mat-card class="my-card">
   <mat-card-content>
       
     <!-- CONTENT HERE -->
       
   </mat-card-content>
   <mat-card-actions>
     <!-- REGISTER BUTTON -->
   </mat-card-actions>
</mat-card>

接下来，我们将在内容部分中添加一个 HTML 表单，该表单将包含我们所有的表单字段。

 <mat-toolbar>
  <span>Registration</span>
</mat-toolbar>
<mat-card class="my-card">
   <mat-card-content>
      <form class="my-form">
        <!--FORM FIELDS HERE-->
      </form>
   </mat-card-content>
   <mat-card-actions>
      <!--REGISTER BUTTON HERE-->
   </mat-card-actions>
</mat-card>

接下来，我们将为名字、姓氏、地址、电子邮件和密码添加表单字段。我们将 <mat-label> 用于创建标签和 <input matInput /> 创建输入字段。

<mat-card-content>
  <form class="my-form">
     <mat-form-field class="full-width">
            <mat-label>First Name</mat-label>
            <input  matInput  placeholder="First name"  name="fname"  required>
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Last Name</mat-label>
            <input  matInput  placeholder="Last Name" name="lname"  required>
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Address</mat-label>
            <input  matInput  placeholder="Address" name="address"  required>
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Email</mat-label>
            <input  matInput  placeholder="Email" name="email">
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Password</mat-label>
            <input  matInput  placeholder="Password"  name="password">
         </mat-form-field>
  </form>
</mat-card-content>

接下来，我们将添加一个性别复选框和一个出生日期选择器。我们将使用 <mat-checkbox>并 <mat-datepicker>增强了 Material Design 样式和动画。

<section class="example-section">
      <label class="example-margin">Gender:</label>
      <mat-radio-group [(ngModel)]="gender">
        <mat-radio-button class="example-margin" value="after">Male</mat-radio-button>
        <mat-radio-button class="example-margin" value="before">Female</mat-radio-button>
        <mat-radio-button class="example-margin" value="before">Other</mat-radio-button>
      </mat-radio-group>
    </section>

    <mat-form-field>
      <mat-label>Date of Birth</mat-label>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

最后一位将是 </mat-card-content> 提交用户信息后的按钮。

<mat-card-content>
  <form class="my-form">
     <!--FORM FIELDS--> 
  </form>
</mat-card-content>
<mat-card-actions>
  <button mat-raised-button (click)="register()" color="primary">REGISTER</button>
</mat-card-actions>

表单样式

让我们在表单上添加一些样式，使它们更美观。打开create-account.component.css并添加以下 CSS 样式。

.my-form{
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.full-width {
  width: 100%;
}

注册 UI 将如下所示：

如何使用Angular和Material Design构建登录UI 第2张

为登录组件构建 UI

登录 UI 将包含以下组件：

  • 卡片组件 ( <mat-card>) — 单个主题上下文中的文本、照片和动作的内容容器

  • 输入组件 ( <input matInput>) - 指定输入字段

就像我们为注册 UI 所做的一样，我们将有一个 Material 卡片组件来容纳登录表单。

显示登录页面的 HTML 代码，其中包含电子邮件和密码凭据的两个输入。

<mat-toolbar>
  <span>LOGIN</span>
</mat-toolbar>
<mat-card class="my-card">
   <mat-card-content>
      <form class="my-form">
         <mat-form-field class="full-width">
            <mat-label>Email</mat-label>
            <input  matInput  placeholder="Email" name="email">
         </mat-form-field>
         <mat-form-field class="full-width">
            <mat-label>Password</mat-label>
            <input  matInput  placeholder="Password" name="password">
         </mat-form-field>
      </form>
   </mat-card-content>
   <mat-card-actions>
      <button mat-raised-button (click)="login()" color="primary">LOGIN</button>
   </mat-card-actions>
</mat-card>

完成的 UI 将如下所示：

如何使用Angular和Material Design构建登录UI 第3张

结论

本教程涵盖了制作功能齐全的 UI 所需的大部分 Angular Material 组件。如您所见，Angular Material 非常易于使用，因为所有组件都具有预定义的样式。这意味着您可以快速构建漂亮的 UI。此外，Angular Material 文档提供了大量示例并且易于理解。


文章目录
  • 入门
    • 使用 Angular CLI 创建组件
    • 添加主题
  • 构建用户界面
    • 导入 Angular 材质组件
    • 启用路由
  • 注册界面
    • 表单样式
  • 为登录组件构建 UI
  • 结论

    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何使用Angular和Material Design构建登录UI
    文章地址：https://www.weixiaolive.com/en/index.php/post/111.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云