我拿了这个组件,但是由于某种原因,样式和官方网站上的例子不一样,我不明白为什么卡片会横跨我的整个表格,搜索栏和元素的显示也会移到左边。
怎么解决呢?
当选择显示在块中时,卡如在图片中显示是必要的,但由于某种原因它们是在一行中。
:host ::ng-deep .p-dropdown {
width: 14rem;
font-weight: normal;
}
:host ::ng-deep .product-name {
font-size: 1.5rem;
font-weight: 700;
}
:host ::ng-deep .product-description {
margin: 0 0 1rem 0;
}
:host ::ng-deep .product-category-icon {
vertical-align: middle;
margin-right: 0.5rem;
}
:host ::ng-deep .product-category {
font-weight: 600;
vertical-align: middle;
}
:host ::ng-deep .product-list-item {
display: flex;
align-items: center;
padding: 1rem;
justify-content: space-between;
}
:host ::ng-deep .product-list-item img {
width: 150px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin-right: 2rem;
}
:host ::ng-deep .product-list-item .product-list-detail {
flex: 1 1 0;
}
:host ::ng-deep .product-list-item .p-rating {
margin: 0 0 0.5rem 0;
}
:host ::ng-deep .product-list-item .product-price {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
align-self: flex-end;
}
:host ::ng-deep .product-list-item .product-list-action {
display: flex;
flex-direction: column;
}
:host ::ng-deep .product-list-item .p-button {
margin-bottom: 0.5rem;
}
:host ::ng-deep .product-grid-item {
margin: 0.5em;
border: 1px solid #dee2e6;
}
:host ::ng-deep .product-grid-item .product-grid-item-top, :host ::ng-deep .product-grid-item .product-grid-item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
:host ::ng-deep .product-grid-item img {
width: 75%;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
margin: 2rem 0;
}
:host ::ng-deep .product-grid-item .product-grid-item-content {
text-align: center;
}
:host ::ng-deep .product-grid-item .product-price {
font-size: 1.5rem;
font-weight: 600;
}
.card {
padding: 2rem;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
border-radius: 4px;
margin-bottom: 2rem;
}
@media screen and (max-width: 576px) {
:host ::ng-deep .product-list-item {
flex-direction: column;
align-items: center;
}
:host ::ng-deep .product-list-item img {
width: 75%;
margin: 2rem 0;
}
:host ::ng-deep .product-list-item .product-list-detail {
text-align: center;
}
:host ::ng-deep .product-list-item .product-price {
align-self: center;
}
:host ::ng-deep .product-list-item .product-list-action {
display: flex;
flex-direction: column;
}
:host ::ng-deep .product-list-item .product-list-action {
margin-top: 2rem;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
}
<div class="card">
<p-dataView #dv [value]="products" [paginator]="true" [rows]="9" filterBy="name"
[sortField]="sortField" [sortOrder]="sortOrder" layout="grid">
<ng-template pTemplate="header">
<div class="flex flex-column md:flex-row md:justify-content-between">
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By Price" (onChange)="onSortChange($event)" styleClass="mb-2 md:mb-0"></p-dropdown>
<span class="p-input-icon-left mb-2 md:mb-0">
<i class="pi pi-search"></i>
<input type="search" pInputText placeholder="Search by Name" (input)="dv.filter($event.target.value)">
</span>
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
</div>
</ng-template>
<ng-template let-product pTemplate="listItem">
<div class="p-col-12">
<div class="product-list-item">
<div class="product-list-detail">
<div class="product-name">{{product.name}}</div>
<div class="product-description">{{product.description}}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
<i class="pi pi-tag product-category-icon"></i><span class="product-category">{{product.category}}</span>
</div>
<div class="product-list-action">
<span class="product-price">${{product.price}}</span>
<p-button icon="pi pi-shopping-cart" label="Add to Cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div>
</div>
</div>
</ng-template>
<ng-template let-product pTemplate="gridItem">
<div class="col-12 md:col-4">
<div class="product-grid-item card">
<div class="product-grid-item-top">
<div>
<i class="pi pi-tag product-category-icon"></i>
<span class="product-category">{{product.category}}</span>
</div>
<span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
</div>
<div class="product-grid-item-content">
<div class="product-name">{{product.name}}</div>
<div class="product-description">{{product.description}}</div>
<p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating>
</div>
<div class="product-grid-item-bottom">
<span class="product-price">${{product.price}}</span>
<p-button icon="pi pi-shopping-cart" [disabled]="product.inventoryStatus === 'OUTOFSTOCK'"></p-button>
</div>
</div>
</div>
</ng-template>
</p-dataView>
</div>
2条答案
按热度按时间wribegjk1#
我可以看到代码取自PrimeNG,一组Angular UI组件。要使这些组件像演示中那样运行,需要做一些准备并在本地安装以下工具:
1.Angular CLI
1.预充NG套件
为了保存您的时间,您可以熟悉以下代码,仔细浏览StackBlitz沙盒中的结构:https://stackblitz.com/edit/primeng-dataview-demo
我还强烈建议您通读Angular文档:https://angular.io/docs .
他们还通过开发一个小应用程序对他们的框架进行了非常有趣的介绍:https://angular.io/tutorial/tour-of-heroes
n53p2ov02#
检查这些组件以执行类似于演示中的操作,这将需要一些准备工作,并需要在本地安装以下工具: