Angular 并排显示 2 张卡片
Angular Display 2 Cards Side By Side
我有一个 Angular 5
网站正在使用 routing
。
在我的代码分支中,我有一个文件夹,其中包含包含各种数据的部分。
然后我要做的是让主页显示我需要的部分我已经完成但问题是,因为我有 2 个 component.html
文件嵌套在一个文件中,它显示我的个别行的信息部分。
我试过:
- 将它们包装在主页上的
DIV
中
- 浮动:left/right 组件和
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 Layout.
这会给出这样的结果:
<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-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>
我有一个 Angular 5
网站正在使用 routing
。
在我的代码分支中,我有一个文件夹,其中包含包含各种数据的部分。
然后我要做的是让主页显示我需要的部分我已经完成但问题是,因为我有 2 个 component.html
文件嵌套在一个文件中,它显示我的个别行的信息部分。
我试过:
- 将它们包装在主页上的
DIV
中 - 浮动:left/right 组件和
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 Layout.
这会给出这样的结果:
<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-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>