[英]Angular Display 2 Cards Side By Side
我有一個使用routing
的Angular 5
網站。
在我的代碼分支中,我有一個文件夾,其中包含包含各種數據的部分。
我之后要做的是讓主頁顯示我需要的部分,但問題是,因為我有 2 個component.html
文件嵌套在一個文件中,所以它在單獨的行上顯示我的信息部分。
我試過了:
DIV
mat-card
上的左/右個人詳細信息組件 html
<mat-card>
<mat-card-title class="firstCard">Personal details</mat-card-title>
<mat-card-content>
<mat-form-field>
<input matInput id="invName" placeholder="Full name" #name value="Mr Test Test" readonly>
</mat-form-field>
<mat-form-field>
<input matInput id="invRef" placeholder="Investor reference" #ref value="A11111" readonly>
</mat-form-field>
<mat-form-field>
<input matInput id="invId" placeholder="Investor ID" #id value="101010" readonly>
</mat-form-field>
<mat-form-field>
<input matInput id="invDoB" placeholder="Date of birth" #dob value="01 January 1950" readonly>
</mat-form-field>
<mat-form-field>
<input matInput id="invNino" placeholder="National Insurance Number" #nino value="AA112233A" readonly>
</mat-form-field>
<mat-form-field>
<input matInput id="invMumMaidenName" placeholder="Mother's maiden name" #mummaidenname value="Test" readonly>
</mat-form-field>
<mat-form-field>
<input matInput id="invFirstSchool" placeholder="First school attended" #firstschool value="St.Testo" readonly>
</mat-form-field>
</mat-card-content>
</mat-card>
聯系方式組件 html
<mat-card>
<mat-card-title class="secondCard">Contact details</mat-card-title>
<mat-card-content>
<mat-form-field>
<input matInput id="invAddress" placeholder="Address" #address value="'this is a description of the some text' + \n + 'and further description'" readonly>
</mat-form-field>
<mat-form-field>
<input matInput id="invPhone" placeholder="Telephone number" #tel value="01000 000 000" readonly>
</mat-form-field>
<mat-form-field>
<input matInput id="invEmail" placeholder="Email address" #email value="test@test.com" readonly>
</mat-form-field>
</mat-card-content>
</mat-card>
** 主頁面組件 html **
<div>
<app-personaldetails></app-personaldetails>
<app-contactdetails></app-contactdetails>
</div>
嘗試使用 flex 布局,因為您使用的是 Angular,請嘗試使用Angular Flex 布局。
這會給出這樣的東西:
<div fxLayout="row" fxLayoutAlign="start center">
<app-personaldetails fxFlex="50%"></app-personaldetails>
<app-contactdetails fxFlex="50%"></app-contactdetails>
</div>
您可以使用 mat-grid 或 flex 布局,並使用 observableMedia 使其響應
使用 mat-grid 的示例:
<mat-grid-list cols="2">
<mat-grid-tile>
<app-personaldetails></app-personaldetails>
</mat-grid-tile>
<mat-grid-tile>
<app-contactdetails></app-contactdetails>
</mat-grid-tile>
</mat-grid-list>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.