如何在 Angular 中使用 Flex 布局

这篇具有很好参考价值的文章主要介绍了如何在 Angular 中使用 Flex 布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

Flex Layout 是一个组件引擎,允许您使用 CSS Flexbox 创建页面布局,并提供一组指令供您在模板中使用。

该库是用纯 TypeScript 编写的,因此不需要外部样式表。它还提供了一种在不同断点上指定不同指令以创建响应式布局的方法。

在本教程中,您将构建一个示例 Angular 应用程序,并使用 Flex Layout 来排列项目。

先决条件

要完成本教程,您需要:

  • 本地安装 Node.js,您可以按照《如何安装 Node.js 并创建本地开发环境》进行操作。
  • 一些设置 Angular 项目和使用 Angular 组件的基础知识可能会有所帮助。

本教程已使用 Node v14.13.1、npm v6.14.8、angular v10.1.6 和 @angular/flex-layout 进行验证。

步骤 1 — 设置项目

您可以使用 @angular/cli 创建一个新的 Angular 项目。

在您的终端窗口中,使用以下命令:

npx @angular/cli new angular-flex-example --style=css --routing=false --skip-tests

这将配置一个新的 Angular 项目,样式设置为 “CSS”(而不是 “Sass”、“Less” 或 “Stylus”),没有路由,并且将跳过测试。

导航到新创建的项目目录:

cd angular-flex-example

从您的项目文件夹中运行以下命令以安装 Flex Layout:

npm install @angular/flex-layout@10.0.0-beta.32

接下来,在您的应用程序模块中导入 FlexLayoutModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from "@angular/flex-layout";

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

启动项目以验证是否有错误。

npm start

如果您在 Web 浏览器中访问本地应用程序(通常在 localhost:4200),您将看到一个 "angular-flex-example app is running!" 消息。

有了这个基本结构,您可以在模板中使用 Flex Layout。

步骤 2 — 使用 Flex Layout 进行实验

接下来,您将修改 app.component.html 模板以使用 FlexLayoutModule

以下是在本教程中使用 Flex Layout 进行实验的最终结果的示例图:

!Flex Layout 示例截图,其中有五个不同颜色的 div。这些项目占据两行。第一行包括项目 1、2 和 3。项目 3 比 1 和 2 更宽,并显示为第二个项目。第二行包括项目 4 和 5。项目 4 比项目 5 更宽,并向左偏移。

首先,打开您的代码编辑器中的 app.component.css 并添加以下代码行:

.container {
  margin: 10px;
}

.item {
  border-radius: .2em;
  color: #ffffff;
  font-family: sans-serif;
  font-size: 2em;
  padding: 4em 1em;
  text-transform: uppercase;
}

.item-1 {
  background-color: #009169;
}

.item-2 {
  background-color: #55b296;
}

.item-3 {
  background-color: #9fd3c3;
}

.item-4 {
  background-color: #e7b013;
}

.item-5 {
  background-color: #073443;
}

然后,打开您的代码编辑器中的 app.component.html 并用两个容器 div 和五个内部项目 div 替换代码:

<div class="container">
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container">
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

重新编译后,在 Web 浏览器中访问您的应用程序。现在您将看到五个 div 堆叠在一起。

接下来,添加 fxLayout

<div class="container"
     fxLayout
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

此代码将在容器 div 上应用 display: flexflex-direction: row 样式。

重新编译后,在 Web 浏览器中访问您的应用程序,您将看到三个 div 共享顶部行,以及两个 div 共享底部行。

接下来,添加 fxLayoutAlignfxLayoutGap

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

此代码将在容器 div 上应用 place-content: stretch centeralign-items: stretch 样式。它还将在 flex 项目之间应用 10px 的间距。

接下来,使用响应式后缀在特定断点上更改 flexbox 样式:

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-1">
    Item 1
  </div>
  <div class="item item-2">
    Item 2
  </div>
  <div class="item item-3">
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
     fxLayoutGap.xs="0"
>
  <div class="item item-4">
    Item 4
  </div>
  <div class="item item-5">
    Item 5
  </div>
</div>

此代码将在 xs(额外小)屏幕尺寸上设置断点。它将把布局从默认的 "row" 更改为 "column",并将间距大小从 "10px" 更改为 "0"

重新编译后,在 Web 浏览器中访问您的应用程序。调整浏览器窗口大小至 xs 断点(宽度小于 599px),观察样式的变化。

各种屏幕尺寸的断点别名可用:

  • sm - 小
  • md - 中
  • lg - 大
  • xl - 额外大

还有可以添加到子元素的指令。

接下来,添加 fxFlex

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-1"
       fxFlex="15%"
  >
    Item 1
  </div>
  <div class="item item-2"
       fxFlex="20%"
  >
    Item 2
  </div>
  <div class="item item-3"
       fxFlex
  >
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-4"
       fxFlex
  >
    Item 4
  </div>
  <div class="item item-5"
       fxFlex="200px"
  >
    Item 5
  </div>
</div>

此代码将应用 flex-grow: 1flex-shrink: 1flex-basis: 100%。通过指定宽度值,它将应用 max-width 属性。

接下来,添加 fxFlexOrderfxFlexOffset

<div class="container"
     fxLayout
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-1"
       fxFlex="15%"
  >
    Item 1
  </div>
  <div class="item item-2"
       fxFlex="20%"
       fxFlexOrder="3"
  >
    Item 2
  </div>
  <div class="item item-3"
       fxFlex
  >
    Item 3
  </div>
</div>

<div class="container"
     fxLayout
     fxLayout.xs="column"
     fxLayoutAlign="center"
     fxLayoutGap="10px"
>
  <div class="item item-4"
       fxFlex
       fxFlexOffset="50px"
  >
    Item 4
  </div>
  <div class="item item-5"
       fxFlex="200px"
  >
    Item 5
  </div>
</div>

此代码将在第二个项目上应用 order: 3。它还将在第四个项目上应用 margin-left: 50px

重新编译后,在 Web 浏览器中访问您的应用程序,您将注意到第二个项目位于行的第三个位置,并且第四个项目距离 flexbox 起始位置有 50px 的间距。

这就是对 Flex Layout 进行简要实验的全部内容。

结论

在本教程中,您使用 Flex 布局与 Angular 应用程序。它允许您构建一个布局,使用预配置的 Flexbox CSS 样式,而无需额外的样式。

您可以参考 API 概述,以更深入地了解可用的指令。

在本例中,您硬编码了指令的值。也可以使用数据绑定来绑定到组件类中的值(例如,[fxLayout]="direction")。这将允许您创建用户可以控制和更改的高度动态的布局。

Flex 布局还可以与 Angular Material 结合使用,用于 Material Design 组件。文章来源地址https://www.toymoban.com/news/detail-826823.html

到了这里,关于如何在 Angular 中使用 Flex 布局的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(47)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(48)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(91)
  • angular框架简介基础与使用(全文2w8字)前端框架angular

    本文的所有内容,可以在我的博客上看到,下面是地址。建议去博客看,因为csdn的这篇图片我没上传。 可以转载,但请注明出处 我的博客—点击跳转 https://numb.run Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀

    2024年02月02日
    浏览(41)
  • 一文搞定:前端如何选择Angular、React和Vue三大主流框架

    在前端开发领域,目前最流行的三个框架是Angular、React和Vue.js。这些框架非常高效,并且它们各自具有一系列的优缺点。 在AI辅助编程工具 CodeGeeX 的后台中,也看到有大量的前端开发者使用这三个框架,并且Vue的使用率在 CodeGeeX 的后台中,持续走高。接下来我们针对Angular、

    2024年02月09日
    浏览(54)
  • 如何在 Angular 中使用环境变量

    简介 如果你正在构建一个使用 API 的应用程序,你会想在开发过程中使用测试环境的 API 密钥,而在生产环境中使用生产环境的 API 密钥。在 Angular 中,你可以通过 environment.ts 文件创建环境变量。 在本教程中,你将学习如何在 Angular 中使用环境变量。 如果你想跟着本文操作,

    2024年02月20日
    浏览(45)
  • angular前端环境搭建、安装angular

    1.下载node.js安装包(要求node版本大于12.20) Node.js官方网站 : https://nodejs.org/en/ 进入官网后,当前页面下载的是最新版本,如需要下载历史版本,点击红框标注的其他下载,在进入的新的页面底部,选择红框标准的先前版本,然后下载相应的版本,在跳转的页面下载win64的版

    2024年02月03日
    浏览(56)
  • Angular中的管道(pipe)如何使用?

    在Angular中,管道(Pipes)是用于在模板中转换数据显示的工具。它们用于格式化、过滤、排序等操作,以便将数据以更易读或更有意义的方式呈现给用户。 1、使用Angular内置管道: 假设我们有一个显示日期的组件,并且我们想要在模板中格式化这个日期。我们可以使用Angul

    2024年02月02日
    浏览(41)
  • 如何在 Angular 中使用懒加载路由

    简介 延迟加载 是一种限制加载用户当前需要的模块的方法。这可以提高应用程序的性能并减小初始捆绑包大小。 默认情况下,Angular 使用 急切加载 来加载模块。这意味着在应用程序运行之前必须加载所有模块。虽然这对许多用例可能是足够的,但在某些情况下,这种加载时

    2024年02月20日
    浏览(37)
  • 如何在 Angular 中使用变更检测策略

    简介 默认情况下,Angular 2+ 会在应用程序中的每次变化时对所有组件(从上到下)执行变更检测。变化可以来自用户事件或者从网络请求接收到的数据。 变更检测非常高效,但随着应用程序变得更加复杂并且组件数量增加,变更检测将不得不执行越来越多的工作。 其中一个

    2024年02月20日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包