Skip to content

Commit

Permalink
Fixed #9640 - Tag Component
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Dec 10, 2020
1 parent 7c15c2d commit 05ca73b
Show file tree
Hide file tree
Showing 11 changed files with 342 additions and 0 deletions.
6 changes: 6 additions & 0 deletions src/app/components/tag/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/tag/public_api.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './tag';
15 changes: 15 additions & 0 deletions src/app/components/tag/tag.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.p-tag {
display: inline-flex;
align-items: center;
justify-content: center;
}

.p-tag-icon,
.p-tag-value,
.p-tag-icon.pi {
line-height: 1.5;
}

.p-tag.p-tag-rounded {
border-radius: 10rem;
}
23 changes: 23 additions & 0 deletions src/app/components/tag/tag.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 { Tag, TagModule } from './tag';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

describe('Tag', () => {

let tag: Tag;
let fixture: ComponentFixture<Tag>;

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

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

@Component({
selector: 'p-tag',
template: `
<span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
<ng-content></ng-content>
<span class="p-tag-icon" [ngClass]="icon" *ngIf="icon"></span>
<span class="p-tag-value">{{value}}</span>
</span>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
styleUrls: ['./tag.css']
})
export class Tag {

@Input() styleClass: string;

@Input() style: any;

@Input() severity: string;

@Input() value: string;

@Input() icon: string;

@Input() rounded: boolean;


containerClass() {
return {
'p-tag p-component': true,
'p-tag-info': this.severity === 'info',
'p-tag-success': this.severity === 'success',
'p-tag-warning': this.severity === 'warning',
'p-tag-danger': this.severity === 'danger',
'p-tag-rounded': this.rounded
};
}
}

@NgModule({
imports: [CommonModule],
exports: [Tag],
declarations: [Tag]
})
export class TagModule { }
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 @@ -82,6 +82,7 @@ import { HomeComponent } from './components/home/home.component';
{path: 'splitbutton', loadChildren: () => import('./components/splitbutton/splitbuttondemo.module').then(m => m.SplitButtonDemoModule)},
{path: 'steps', loadChildren: () => import('./components/steps/stepsdemo.module').then(m => m.StepsDemoModule)},
{path: 'support', loadChildren: () => import('./components/support/support.module').then(m => m.SupportModule)},
{path: 'tag', loadChildren: () => import('./components/tag/tagdemo.module').then(m => m.TagDemoModule)},
{path: 'table', loadChildren: () => import('./components/table/tabledemo.module').then(m => m.TableDemoModule)},
{path: 'tabmenu', loadChildren: () => import('./components/tabmenu/tabmenudemo.module').then(m => m.TabMenuDemoModule)},
{path: 'tabview', loadChildren: () => import('./components/tabview/tabviewdemo.module').then(m => m.TabViewDemoModule)},
Expand Down
1 change: 1 addition & 0 deletions src/app/showcase/app.menu.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,7 @@ declare let gtag: Function;
<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>
<a [routerLink]=" ['/tag']" routerLinkActive="router-link-exact-active">Tag <span class="p-tag">Tag</span></a>
<a [routerLink]=" ['/terminal']" routerLinkActive="router-link-exact-active">Terminal</a>
</div>
Expand Down
15 changes: 15 additions & 0 deletions src/app/showcase/components/tag/tagdemo-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 {TagDemo} from './tagdemo';

@NgModule({
imports: [
RouterModule.forChild([
{path:'',component: TagDemo}
])
],
exports: [
RouterModule
]
})
export class TagDemoRoutingModule {}
199 changes: 199 additions & 0 deletions src/app/showcase/components/tag/tagdemo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
<div class="content-section introduction">
<div class="feature-intro">
<h1>Tag</h1>
<p>Tag component is used to categorize content.</p>
</div>
</div>

<div class="content-section implementation">
<div class="card">
<h5>Tags</h5>
<p-tag styleClass="p-mr-2" value="Primary"></p-tag>
<p-tag styleClass="p-mr-2" severity="success" value="Success"></p-tag>
<p-tag styleClass="p-mr-2" severity="info" value="Info"></p-tag>
<p-tag styleClass="p-mr-2" severity="warning" value="Warning"></p-tag>
<p-tag severity="danger" value="Danger"></p-tag>

<h5>Pills</h5>
<p-tag styleClass="p-mr-2" value="Primary" [rounded]="true"></p-tag>
<p-tag styleClass="p-mr-2" severity="success" value="Success" [rounded]="true"></p-tag>
<p-tag styleClass="p-mr-2" severity="info" value="Info" [rounded]="true"></p-tag>
<p-tag styleClass="p-mr-2" severity="warning" value="Warning" [rounded]="true"></p-tag>
<p-tag severity="danger" value="Danger" [rounded]="true"></p-tag>

<h5>Icons</h5>
<p-tag styleClass="p-mr-2" icon="pi pi-user" value="Primary"></p-tag>
<p-tag styleClass="p-mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
<p-tag styleClass="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
<p-tag styleClass="p-mr-2" con="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
<p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
</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/tag/tagdemo.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 {TagDemo} from './tagdemo';
import {TagDemoRoutingModule} from './tagdemo-routing.module';
import {ButtonModule} from 'primeng/button';
import {PanelModule} from 'primeng/panel';
import {TabViewModule} from 'primeng/tabview';
import {AppCodeModule} from '../../app.code.component';
import { TagModule } from 'primeng/tag';

@NgModule({
imports: [
CommonModule,
TagDemoRoutingModule,
ButtonModule,
PanelModule,
TabViewModule,
TagModule,
AppCodeModule
],
declarations: [
TagDemo
]
})
export class TagDemoModule {}
7 changes: 7 additions & 0 deletions src/app/showcase/components/tag/tagdemo.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import {Component} from '@angular/core';

@Component({
templateUrl: './tagdemo.html'
})
export class TagDemo {
}

0 comments on commit 05ca73b

Please sign in to comment.