Skip to content

Commit

Permalink
Fixed #9641 - Chip Component
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Dec 11, 2020
1 parent 05ca73b commit bfd4bd8
Show file tree
Hide file tree
Showing 12 changed files with 373 additions and 1 deletion.
21 changes: 21 additions & 0 deletions src/app/components/chip/chip.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.p-chip {
display: inline-flex;
align-items: center;
}

.p-chip-text {
line-height: 1.5;
}

.p-chip-icon.pi {
line-height: 1.5;
}

.pi-chip-remove-icon {
line-height: 1.5;
cursor: pointer;
}

.p-chip img {
border-radius: 50%;
}
23 changes: 23 additions & 0 deletions src/app/components/chip/chip.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { Chip, ChipModule } from './chip';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

describe('Chip', () => {

let button: Chip;
let fixture: ComponentFixture<Chip>;

beforeEach(() => {
TestBed.configureTestingModule({
imports: [
NoopAnimationsModule
],
declarations: [
ChipModule
]
});

fixture = TestBed.createComponent(Chip);
button = fixture.componentInstance;
});
});
57 changes: 57 additions & 0 deletions src/app/components/chip/chip.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
selector: 'p-chip',
template: `
<div [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style" *ngIf="visible">
<ng-content></ng-content>
<img [src]="image" *ngIf="image;else iconTemplate">
<ng-template #iconTemplate><span *ngIf="icon" [class]="icon" [ngClass]="'p-chip-icon'"></span></ng-template>
<div class="p-chip-text" *ngIf="label">{{label}}</div>
<span *ngIf="removable" tabindex="0" [class]="removeIcon" [ngClass]="'pi-chip-remove-icon'" (click)="close($event)" (keydown.enter)="close($event)"></span>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styleUrls: ['./chip.css']
})
export class Chip {

@Input() label: string;

@Input() icon: string;

@Input() image: string;

@Input() style: any;

@Input() styleClass: string;

@Input() removable: boolean;

@Input() removeIcon: string = "pi pi-times-circle";

@Output() remove: EventEmitter<any> = new EventEmitter();

visible: boolean = true;

containerClass() {
return {
'p-chip p-component': true,
'p-chip-image': this.image != null
};
}

close(event) {
this.visible = false;
this.remove.emit(event)
}
}

@NgModule({
imports: [CommonModule],
exports: [Chip],
declarations: [Chip]
})
export class ChipModule { }
6 changes: 6 additions & 0 deletions src/app/components/chip/ng-package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"$schema": "ng-packagr/ng-package.schema.json",
"lib": {
"entryFile": "public_api.ts"
}
}
1 change: 1 addition & 0 deletions src/app/components/chip/public_api.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './chip';
1 change: 1 addition & 0 deletions src/app/showcase/app-routing.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { HomeComponent } from './components/home/home.component';
{path: 'carousel', loadChildren: () => import('./components/carousel/carouseldemo.module').then(m => m.CarouselDemoModule)},
{path: 'chart', loadChildren: () => import('./components/chart/chartdemo.module').then(m => m.ChartDemoModule)},
{path: 'checkbox', loadChildren: () => import('./components/checkbox/checkboxdemo.module').then(m => m.CheckboxDemoModule)},
{path: 'chip', loadChildren: () => import('./components/chip/chipdemo.module').then(m => m.ChipDemoModule)},
{path: 'chips', loadChildren: () => import('./components/chips/chipsdemo.module').then(m => m.ChipsDemoModule)},
{path: 'codehighlighter', loadChildren: () => import('./components/codehighlighter/codehighlighterdemo.module').then(m => m.CodeHighlighterDemoModule)},
{path: 'colorpicker', loadChildren: () => import('./components/colorpicker/colorpickerdemo.module').then(m => m.ColorPickerDemoModule)},
Expand Down
3 changes: 2 additions & 1 deletion src/app/showcase/app.menu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -266,9 +266,10 @@ declare let gtag: Function;
<div class="menu-category">Misc</div>
<div class="menu-items">
<a [routerLink]=" ['/avatar']" routerLinkActive="router-link-exact-active">Avatar <span class="p-tag">New</span></a>
<a [routerLink]=" ['/blockui']" routerLinkActive="router-link-exact-active">BlockUI</a>
<a [routerLink]=" ['/badge']" routerLinkActive="router-link-exact-active">Badge <span class="p-tag">New</span></a>
<a [routerLink]=" ['/blockui']" routerLinkActive="router-link-exact-active">BlockUI</a>
<a [routerLink]=" ['/captcha']" routerLinkActive="router-link-exact-active">Captcha</a>
<a [routerLink]=" ['/chip']" routerLinkActive="router-link-exact-active">Chip <span class="p-tag">New</span></a>
<a [routerLink]=" ['/inplace']" routerLinkActive="router-link-exact-active">Inplace</a>
<a [routerLink]=" ['/progressbar']" routerLinkActive="router-link-exact-active">ProgressBar</a>
<a [routerLink]=" ['/progressspinner']" routerLinkActive="router-link-exact-active">ProgressSpinner</a>
Expand Down
15 changes: 15 additions & 0 deletions src/app/showcase/components/chip/chipdemo-routing.module.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import {NgModule} from '@angular/core';
import {RouterModule} from '@angular/router'
import {ChipDemo} from './chipdemo';

@NgModule({
imports: [
RouterModule.forChild([
{path:'',component: ChipDemo}
])
],
exports: [
RouterModule
]
})
export class ChipDemoRoutingModule {}
210 changes: 210 additions & 0 deletions src/app/showcase/components/chip/chipdemo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,210 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>Chip</h1>
<p>Chip represents entities using icons, labels and images.</p>
</div>
</div>

<div class="content-section implementation">
<div class="card">
<h5>Basic</h5>
<div class="p-d-flex p-ai-center">
<p-chip label="Action" styleClass="p-mr-2"></p-chip>
<p-chip label="Comedy" styleClass="p-mr-2"></p-chip>
<p-chip label="Mystery" styleClass="p-mr-2"></p-chip>
<p-chip label="Thriller" [removable]="true"></p-chip>
</div>

<h5>Icon</h5>
<div class="p-d-flex p-ai-center">
<p-chip label="Apple" icon="pi pi-apple" styleClass="p-mr-2"></p-chip>
<p-chip label="Facebook" icon="pi pi-facebook" styleClass="p-mr-2"></p-chip>
<p-chip label="Google" icon="pi pi-google" styleClass="p-mr-2"></p-chip>
<p-chip label="Microsoft" icon="pi pi-microsoft" [removable]="true"></p-chip>
</div>

<h5>Image</h5>
<div class="p-d-flex p-ai-center">
<p-chip label="Amy Elsner" image="assets/showcase/images/demo/avatar/amyelsner.png" styleClass="p-mr-2"></p-chip>
<p-chip label="Asiya Javayant" image="assets/showcase/images/demo/avatar/asiyajavayant.png" styleClass="p-mr-2"></p-chip>
<p-chip label="Onyama Limba" image="assets/showcase/images/demo/avatar/onyamalimba.png" styleClass="p-mr-2"></p-chip>
<p-chip label="Xuxue Feng" image="assets/showcase/images/demo/avatar/xuxuefeng.png" [removable]="true"></p-chip>
</div>

<h5>Styling</h5>
<div class="p-d-flex p-ai-center">
<p-chip label="Action" styleClass="p-mr-2 custom-chip"></p-chip>
<p-chip label="Comedy" styleClass="p-mr-2 custom-chip"></p-chip>
<p-chip label="Onyama Limba" image="assets/showcase/images/demo/avatar/onyamalimba.png" styleClass="p-mr-2 custom-chip"></p-chip>
<p-chip label="Xuxue Feng" image="assets/showcase/images/demo/avatar/xuxuefeng.png" [removable]="true" styleClass="custom-chip"></p-chip>
</div>
</div>
</div>

<div class="content-section documentation">
<p-tabView>
<p-tabPanel header="Documentation">
<h5>Getting Started</h5>
<p>Content of the badge is specified using the <i>value</i> property.</p>

<h5>Positioning</h5>
<p>A badge can easily be positioned relative to another element by wrapping it.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-badge [value]="2"&gt;&lt;/p-badge&gt;
</app-code>

<h5>Tags</h5>
<p>Tags are optimized for text rather than number and used with the <i>.p-tag</i> class. For more rounded styling like pills, add the <i>.p-tag-rounded</i> class</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;span class="p-tag"&gt;New&lt;/span&gt;
&lt;span class="p-tag p-tag-rounded"&gt;New&lt;/span&gt;
</app-code>

<h5>Severities</h5>
<p>Different options are available as severity levels with.</p>

<ul>
<li>.p-badge-secondary</li>
<li>.p-badge-success</li>
<li>.p-badge-info</li>
<li>.p-badge-warning</li>
<li>.p-badge-danger</li>
</ul>

<h5>Positoning</h5>
<p>A badge can easily be positioned relative to another element when both are wrapped inside an element with <i>p-overlay-badge</i> class.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;span class="p-overlay-badge"&gt;
&lt;i class="pi pi-bell" style="font-size: 2em"&gt;&lt;/i&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;/span&gt;

&lt;span class="p-overlay-badge"&gt;
&lt;p-button label="New"&gt;&lt;/p-button&gt;
&lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
&lt;/span&gt;
</app-code>

<h5>Inline Button Badges</h5>
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-button label="Emails" badge="8"&gt;&lt;/p-button&gt;
&lt;p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"&gt;&lt;/p-button&gt;
</app-code>

<h5>Sizes</h5>
<p>Badge sizes are adjusted with additional classes.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;span class="p-badge p-badge-l p-badge-sucess"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
</app-code>

<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h1&gt;Heading 1 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2 &lt;span class="p-tag p-tag-success"&gt;New&lt;/span&gt;&lt;/h2&gt;
</app-code>

<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming</a> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-badge</td>
<td>Badge element</td>
</tr>
<tr>
<td>p-tag</td>
<td>Tag element</td>
</tr>
<tr>
<td>p-tag-rounded</td>
<td>Rounded tag element</td>
</tr>
<tr>
<td>p-overlay-badge</td>
<td>Wrapper of a badge and its target.</td>
</tr>
<tr>
<td>p-badge-lg</td>
<td>Large badge element</td>
</tr>
<tr>
<td>p-badge-xl</td>
<td>Extra large badge element</td>
</tr>
</tbody>
</table>
</div>

<h5>Dependencies</h5>
<p>None.</p>
</p-tabPanel>

<p-tabPanel header="Source">
<a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/badge" class="btn-viewsource" target="_blank">
<span>View on GitHub</span>
</a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Numbers&lt;/h5&gt;
&lt;div class="badges"&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;span class="p-badge p-badge-success"&gt;8&lt;/span&gt;
&lt;span class="p-badge p-badge-info"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-warning"&gt;12&lt;/span&gt;
&lt;span class="p-badge p-badge-danger"&gt;3&lt;/span&gt;
&lt;/div&gt;

&lt;h5&gt;Tags&lt;/h5&gt;
&lt;div class="badges"&gt;
&lt;span class="p-tag"&gt;Primary&lt;/span&gt;
&lt;span class="p-tag p-tag-success"&gt;Success&lt;/span&gt;
&lt;span class="p-tag p-tag-info"&gt;Info&lt;/span&gt;
&lt;span class="p-tag p-tag-warning"&gt;Warning&lt;/span&gt;
&lt;span class="p-tag p-tag-danger"&gt;Danger&lt;/span&gt;
&lt;/div&gt;

&lt;h5&gt;Pills&lt;/h5&gt;
&lt;div class="badges"&gt;
&lt;span class="p-tag p-tag-rounded"&gt;Primary&lt;/span&gt;
&lt;span class="p-tag p-tag-rounded p-tag-success"&gt;Success&lt;/span&gt;
&lt;span class="p-tag p-tag-rounded p-tag-info"&gt;Info&lt;/span&gt;
&lt;span class="p-tag p-tag-rounded p-tag-warning"&gt;Warning&lt;/span&gt;
&lt;span class="p-tag p-tag-rounded p-tag-danger"&gt;Danger&lt;/span&gt;
&lt;/div&gt;

&lt;h5&gt;Positioned Badge&lt;/h5&gt;
&lt;span class="p-overlay-badge p-mr-5"&gt;
&lt;i class="pi pi-bell" style="font-size: 2em"&gt;&lt;/i&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;/span&gt;

&lt;span class="p-overlay-badge"&gt;
&lt;p-button label="New"&gt;&lt;/p-button&gt;
&lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
&lt;/span&gt;

&lt;h5&gt;Inline Button Badge&lt;/h5&gt;
&lt;p-button label="Emails" badge="8" styleClass="p-mr-2" &gt;&lt;/p-button&gt;
&lt;p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger" &gt;&lt;/p-button&gt;

&lt;h5&gt;Sizes&lt;/h5&gt;
&lt;div class="badges"&gt;
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;span class="p-badge p-badge-lg p-badge-sucess"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
&lt;/div&gt;
</app-code>
</p-tabPanel>
</p-tabView>
</div>
25 changes: 25 additions & 0 deletions src/app/showcase/components/chip/chipdemo.module.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ChipDemo} from './chipdemo';
import {ChipDemoRoutingModule} from './chipdemo-routing.module';
import {ButtonModule} from 'primeng/button';
import {PanelModule} from 'primeng/panel';
import {TabViewModule} from 'primeng/tabview';
import {AppCodeModule} from '../../app.code.component';
import { ChipModule } from 'primeng/chip';

@NgModule({
imports: [
CommonModule,
ChipDemoRoutingModule,
ButtonModule,
PanelModule,
TabViewModule,
ChipModule,
AppCodeModule
],
declarations: [
ChipDemo
]
})
export class ChipDemoModule {}
4 changes: 4 additions & 0 deletions src/app/showcase/components/chip/chipdemo.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
:host ::ng-deep .p-chip.custom-chip {
background: var(--primary-color);
color: var(--primary-color-text);
}
Loading

0 comments on commit bfd4bd8

Please sign in to comment.