欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在Angular?中使用?Flex?布局的示例詳解

 更新時(shí)間：2024年02月18日 10:31:28   作者：白如意i  
在本教程中,您使用?Flex?布局與?Angular?應(yīng)用程序,它允許您構(gòu)建一個(gè)布局,使用預(yù)配置的?Flexbox?CSS?樣式,而無(wú)需額外的樣式,對(duì)Angular使用?Flex?布局相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧

介紹

Flex Layout 是一個(gè)組件引擎，允許您使用 CSS Flexbox 創(chuàng)建頁(yè)面布局，并提供一組指令供您在模板中使用。

該庫(kù)是用純 TypeScript 編寫(xiě)的，因此不需要外部樣式表。它還提供了一種在不同斷點(diǎn)上指定不同指令以創(chuàng)建響應(yīng)式布局的方法。

在本教程中，您將構(gòu)建一個(gè)示例 Angular 應(yīng)用程序，并使用 Flex Layout 來(lái)排列項(xiàng)目。

先決條件

要完成本教程，您需要：

  • 本地安裝 Node.js，您可以按照《如何安裝 Node.js 并創(chuàng)建本地開(kāi)發(fā)環(huán)境》進(jìn)行操作。
  • 一些設(shè)置 Angular 項(xiàng)目和使用 Angular 組件的基礎(chǔ)知識(shí)可能會(huì)有所幫助。

本教程已使用 Node v14.13.1、npm v6.14.8、angular v10.1.6 和 @angular/flex-layout 進(jìn)行驗(yàn)證。

步驟 1 — 設(shè)置項(xiàng)目

您可以使用 @angular/cli 創(chuàng)建一個(gè)新的 Angular 項(xiàng)目。

在您的終端窗口中，使用以下命令：

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

這將配置一個(gè)新的 Angular 項(xiàng)目，樣式設(shè)置為 “CSS”（而不是 “Sass”、“Less” 或 “Stylus”），沒(méi)有路由，并且將跳過(guò)測(cè)試。

導(dǎo)航到新創(chuàng)建的項(xiàng)目目錄：

cd angular-flex-example

從您的項(xiàng)目文件夾中運(yùn)行以下命令以安裝 Flex Layout：

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

接下來(lái)，在您的應(yīng)用程序模塊中導(dǎo)入 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 { }

啟動(dòng)項(xiàng)目以驗(yàn)證是否有錯(cuò)誤。

npm start

如果您在 Web 瀏覽器中訪問(wèn)本地應(yīng)用程序（通常在 localhost:4200），您將看到一個(gè) "angular-flex-example app is running!" 消息。

有了這個(gè)基本結(jié)構(gòu)，您可以在模板中使用 Flex Layout。

步驟 2 — 使用 Flex Layout 進(jìn)行實(shí)驗(yàn)

接下來(lái)，您將修改 app.component.html 模板以使用 FlexLayoutModule。

以下是在本教程中使用 Flex Layout 進(jìn)行實(shí)驗(yàn)的最終結(jié)果的示例圖：

!Flex Layout 示例截圖，其中有五個(gè)不同顏色的 div。這些項(xiàng)目占據(jù)兩行。第一行包括項(xiàng)目 1、2 和 3。項(xiàng)目 3 比 1 和 2 更寬，并顯示為第二個(gè)項(xiàng)目。第二行包括項(xiàng)目 4 和 5。項(xiàng)目 4 比項(xiàng)目 5 更寬，并向左偏移。

首先，打開(kāi)您的代碼編輯器中的 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;
}

然后，打開(kāi)您的代碼編輯器中的 app.component.html 并用兩個(gè)容器 div 和五個(gè)內(nèi)部項(xiàng)目 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 瀏覽器中訪問(wèn)您的應(yīng)用程序?，F(xiàn)在您將看到五個(gè) div 堆疊在一起。

接下來(lái)，添加 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 上應(yīng)用 display: flex 和 flex-direction: row 樣式。

重新編譯后，在 Web 瀏覽器中訪問(wèn)您的應(yīng)用程序，您將看到三個(gè) div 共享頂部行，以及兩個(gè) div 共享底部行。

接下來(lái)，添加 fxLayoutAlign 和 fxLayoutGap：

<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 上應(yīng)用 place-content: stretch center 和 align-items: stretch 樣式。它還將在 flex 項(xiàng)目之間應(yīng)用 10px 的間距。

接下來(lái)，使用響應(yīng)式后綴在特定斷點(diǎn)上更改 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（額外?。┢聊怀叽缟显O(shè)置斷點(diǎn)。它將把布局從默認(rèn)的 "row" 更改為 "column"，并將間距大小從 "10px" 更改為 "0"。

重新編譯后，在 Web 瀏覽器中訪問(wèn)您的應(yīng)用程序。調(diào)整瀏覽器窗口大小至 xs 斷點(diǎn)（寬度小于 599px），觀察樣式的變化。

各種屏幕尺寸的斷點(diǎn)別名可用：

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

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

接下來(lái)，添加 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>

此代碼將應(yīng)用 flex-grow: 1、flex-shrink: 1 和 flex-basis: 100%。通過(guò)指定寬度值，它將應(yīng)用 max-width 屬性。

接下來(lái)，添加 fxFlexOrder 和 fxFlexOffset：

<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>

此代碼將在第二個(gè)項(xiàng)目上應(yīng)用 order: 3。它還將在第四個(gè)項(xiàng)目上應(yīng)用 margin-left: 50px。

重新編譯后，在 Web 瀏覽器中訪問(wèn)您的應(yīng)用程序，您將注意到第二個(gè)項(xiàng)目位于行的第三個(gè)位置，并且第四個(gè)項(xiàng)目距離 flexbox 起始位置有 50px 的間距。

這就是對(duì) Flex Layout 進(jìn)行簡(jiǎn)要實(shí)驗(yàn)的全部?jī)?nèi)容。

結(jié)論

在本教程中，您使用 Flex 布局與 Angular 應(yīng)用程序。它允許您構(gòu)建一個(gè)布局，使用預(yù)配置的 Flexbox CSS 樣式，而無(wú)需額外的樣式。

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

在本例中，您硬編碼了指令的值。也可以使用數(shù)據(jù)綁定來(lái)綁定到組件類中的值（例如，[fxLayout]="direction"）。這將允許您創(chuàng)建用戶可以控制和更改的高度動(dòng)態(tài)的布局。

Flex 布局還可以與 Angular Material 結(jié)合使用，用于 Material Design 組件。

到此這篇關(guān)于在Angular 中使用 Flex 布局的示例詳解的文章就介紹到這了,更多相關(guān)Angular使用 Flex 布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論