随着 Material Design 的流行，越来越多的应用程序开始采用这种设计风格。在许多应用中，我们可以看到一些很酷的动画效果，其中之一是侧滑删除效果。该效果在用户使用过程中可提高应用的整体性能和易用性。
在本文中，我们将向您展示如何使用 Material Design 实现侧滑删除效果。我们将使用 Angular Material，这是 Google 推出的一个集成了 Material Design 组件的 UI 构建库。我们将使用一个示例程序，该程序显示了一张图片以及该图片的一些详细信息。在本文的最后，您将会看到一个像这样的效果：
步骤 1：创建一个 Angular 项目
首先，您需要确保您的系统上已安装了最新版本的 Angular CLI。如果您还未安装，请按照以下步骤安装：
npm install -g @angular/cli
然后，您可以使用以下命令创建一个新的 Angular 项目：
ng new material-demo
步骤 2：安装 Angular Material
接下来，您需要将 Angular Material 安装到您的应用程序中。您可以使用以下命令来安装：
ng add @angular/material
这个命令将会提示您选择您需要的 Angular Material 组件。在本例中，我们将选择以下组件:
- @angular/material/core
- @angular/material/button
- @angular/material/card
- @angular/material/dialog
- @angular/material/icon
- @angular/material/input
- @angular/material/list
- @angular/material/toolbar
这些组件将为我们构建该应用程序提供所需的所有 Material Design 组件。现在我们已经安装了所有必要的依赖项，我们可以通过在 app.module.ts 文件中导入它们来开始使用它们。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------ - ---- ------------------
------ - --------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
------ - ------------- - ---- -------------------------
------ - -------------- - ---- --------------------------
------ - ------------- - ---- -------------------------
------ - ---------------- - ---- ----------------------------
-----------
------------- ---------------
-------- -
--------------
------------------------
----------------
--------------
--------------
---------------
--------------
-----------------
--
---------- ---
---------- ---------------
--
------ ----- --------- --步骤 3：定义列表项
在我们开始编写代码之前，我们需要先定义列表项的数据结构。我们将创建一个 Photo 接口，该接口将包含有关列表项的所有信息。以下是 photo.ts 文件的代码：
export interface Photo {
id: number;
imageUrl: string;
title: string;
description: string;
}我们的每个列表项都将包含 id、imageUrl、title 和 description 属性。
步骤 4：创建组件
现在，我们将创建一个组件来显示我们的图片列表。使用以下命令创建一个新组件：
ng generate component photo-list
现在我们已经创建了 photo-list 组件，我们可以在 HTML 模板中添加一个列表，以显示所有图片。
-- -------------------- ---- -------
-------------
-------- -------------
--------------
---- -------------------
----------
-------------- ----------- ----- -- --------
---- --------------- ---------------------- ------- ----------- --- --
---- ---------
-------- ----------- ---------
----- ---------------------- ----------------- ---------
------
------- ----------------
---------------------------
---------
----------------
-----------
------在这个模板中，我们使用了一个 mat-toolbar 来显示一个标题。以下是我们定义的该组件的 CSS 样式：
-- -------------------- ---- ------- ----------- - ------- ----- - ------------ - -------- ------ ------ ------- -- -- ------ ---------- ----- -
步骤 5：添加侧滑删除效果
现在我们已经在页面上显示了所有图片，但是我们需要添加一些功能来使得应用程序真正完整。我们需要添加一个侧滑删除效果，以便用户可以删除不需要的图片。我们将使用 mat-list-option 来实现侧滑删除效果。
-- -------------------- ---- -------
-------------- ----------- ----- -- ------- -----------------------------
----------------
-----------------------
----------------------------
---------------------------------
-------------------
---- --------------- ---------------------- ------- ----------- --- --
---- ---------
-------- ----------- ---------
----- ---------------------- ----------------- ---------
------
------- --------------- -----------------------------
---------------------------
---------
----------------在这里，我们使用了 mat-list-option 来实现侧滑删除效果。当用户向左轻扫一个列表项时，该列表项会自动关闭。当用户向右轻扫一个列表项时，该图片会被删除。
以下是 photo-list.component.ts 文件中处理该功能的 selectPhoto 和 deletePhoto 方法的代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----- - ---- -----------
------------
--------- -----------------
------------ ------------------------------
---------- -------------------------------
--
------ ----- ------------------ -
-------------- ------
------ - -
-
--- --
--------- --------------------------------
------ ------ ---
------------ ----- -- ----- ---
--
-
--- --
--------- --------------------------------
------ ------ ---
------------ ----- -- ----- ---
--
-
--- --
--------- --------------------------------
------ ------ ---
------------ ----- -- ----- ---
--
-
--- --
--------- --------------------------------
------ ------ ---
------------ ----- -- ----- ---
--
--
------------------ ------- ---- -
------------------ - ------
-
------------------ ------- ---- -
----------- - ---------------------- -- - --- -------
------------------ - -----
-
-结论
本文向您展示了如何使用 Angular Material 实现基于 Material Design 的侧滑删除效果。我们展示了如何使用 Angular Material 的核心组件以及一些 Material Design 组件来创建这个功能。通过这个简单的例子，您可以深入了解如何在您的应用程序中使用 Material Design 和 Angular Material。这项技术为您的应用程序提供了美观而功能强大的用户界面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671e837e2e7021665ef84786