f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix miscdemo

Browse Source
This commit is contained in:
Çetin 2021-12-21 16:04:53 +03:00
parent 1873dfda5a
commit ee2dec3efb
2 changed files with 17 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/demo/view/miscdemo.component.html
View File

@ -4,7 +4,7 @@
<h5>ProgressBar</h5>
<div class="grid">
<div class="col">
<p-progressBar [value]="value" [showValue]="false"></p-progressBar>
<p-progressBar [value]="value" [showValue]="true"></p-progressBar>
</div>
<div class="col">
<p-progressBar [value]="50" [showValue]="false"></p-progressBar>
@ -112,34 +112,34 @@
<h4>Chip</h4>
<h5>Basic</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<p-chip label="Action" styleClass="m-2"></p-chip>
<p-chip label="Comedy" styleClass="m-2"></p-chip>
<p-chip label="Mystery" styleClass="m-2"></p-chip>
<p-chip label="Thriller" styleClass="m-2" [removable]="true"></p-chip>
<p-chip label="Action" styleClass="m-1"></p-chip>
<p-chip label="Comedy" styleClass="m-1"></p-chip>
<p-chip label="Mystery" styleClass="m-1"></p-chip>
<p-chip label="Thriller" styleClass="m-1" [removable]="true"></p-chip>
</div>
<h5>Icon</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-2"></p-chip>
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-2"></p-chip>
<p-chip label="Google" icon="pi pi-google" styleClass="m-2"></p-chip>
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-2" [removable]="true"></p-chip>
<p-chip label="Apple" icon="pi pi-apple" styleClass="m-1"></p-chip>
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="m-1"></p-chip>
<p-chip label="Google" icon="pi pi-google" styleClass="m-1"></p-chip>
<p-chip label="Microsoft" icon="pi pi-microsoft" styleClass="m-1" [removable]="true"></p-chip>
</div>
<h5>Image</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-2"></p-chip>
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-2"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-2"></p-chip>
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-2" [removable]="true"></p-chip>
<p-chip label="Amy Elsner" image="assets/demo/images/avatar/amyelsner.png" styleClass="m-1"></p-chip>
<p-chip label="Asiya Javayant" image="assets/demo/images/avatar/asiyajavayant.png" styleClass="m-1"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1"></p-chip>
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" styleClass="m-1" [removable]="true"></p-chip>
</div>
<h5>Styling</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<p-chip label="Action" styleClass="m-2 custom-chip"></p-chip>
<p-chip label="Comedy" styleClass="m-2 custom-chip"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-2 custom-chip"></p-chip>
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true" styleClass="m-2 custom-chip"></p-chip>
<p-chip label="Action" styleClass="m-1 custom-chip"></p-chip>
<p-chip label="Comedy" styleClass="m-1 custom-chip"></p-chip>
<p-chip label="Onyama Limba" image="assets/demo/images/avatar/onyamalimba.png" styleClass="m-1 custom-chip"></p-chip>
<p-chip label="Xuxue Feng" image="assets/demo/images/avatar/xuxuefeng.png" [removable]="true" styleClass="m-1 custom-chip"></p-chip>
</div>
</div>

43
src/app/demo/view/miscdemo.component.ts
View File

@ -2,49 +2,6 @@ import {Component, OnInit} from '@angular/core';
@Component({
templateUrl: './miscdemo.component.html',
styles: [`
:host ::ng-deep .misc-demo .p-button.p-widget {
min-width: 6rem;
}
:host ::ng-deep .misc-demo .badges .p-badge {
margin-right: .5rem;
}
:host ::ng-deep .misc-demo .badges .p-tag {
margin-right: .5rem;
}
:host ::ng-deep .p-chip.custom-chip {
background: var(--primary-color);
color: var(--primary-color-text);
}
:host ::ng-deep .custom-scrolltop{
width: 2rem;
height: 2rem;
border-radius: 4px;
background-color: var(--primary-color);
}
:host ::ng-deep .custom-scrolltop .p-scrolltop-icon {
font-size: 1rem;
color: var(--primary-color-text);
}
:host ::ng-deep .custom-scrolltop:hover {
background-color: var(--primary-color);
}
:host ::ng-deep .custom-skeleton {
border: 1px solid var(--surface-d);
border-borderRadius: 4px;
}
:host ::ng-deep .custom-skeleton ul {
list-style: none;
}
`]
})
export class MiscDemoComponent implements OnInit {