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

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

 更新時間：2024年02月18日 10:31:28   作者：白如意i  
在本教程中,您使用?Flex?布局與?Angular?應用程序,它允許您構建一個布局,使用預配置的?Flexbox?CSS?樣式,而無需額外的樣式,對Angular使用?Flex?布局相關知識感興趣的朋友跟隨小編一起看看吧

介紹

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

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

在本教程中，您將構建一個示例 Angular 應用程序，并使用 Flex Layout 來排列項目。

先決條件

要完成本教程，您需要：

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

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

步驟 1 — 設置項目

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

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

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

這將配置一個新的 Angular 項目，樣式設置為 “CSS”（而不是 “Sass”、“Less” 或 “Stylus”），沒有路由，并且將跳過測試。

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

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。這些項目占據(jù)兩行。第一行包括項目 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 瀏覽器中訪問您的應用程序?，F(xiàn)在您將看到五個 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: flex 和 flex-direction: row 樣式。

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

接下來，添加 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 上應用 place-content: stretch center 和 align-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（額外?。┢聊怀叽缟显O置斷點。它將把布局從默認的 "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: 1、flex-shrink: 1 和 flex-basis: 100%。通過指定寬度值，它將應用 max-width 屬性。

接下來，添加 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>

此代碼將在第二個項目上應用 order: 3。它還將在第四個項目上應用 margin-left: 50px。

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

這就是對 Flex Layout 進行簡要實驗的全部內容。

結論

在本教程中，您使用 Flex 布局與 Angular 應用程序。它允許您構建一個布局，使用預配置的 Flexbox CSS 樣式，而無需額外的樣式。

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

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

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

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

相關文章

最新評論