Skip to content

Commit

Permalink
Fix #779 - Tag Component
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Dec 14, 2020
1 parent 2566429 commit d3d66c1
Show file tree
Hide file tree
Showing 9 changed files with 262 additions and 1 deletion.
1 change: 1 addition & 0 deletions exports/tag.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './components/tag/Tag';
2 changes: 2 additions & 0 deletions exports/tag.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
'use strict';
module.exports = require('./components/tag/Tag.vue');
1 change: 1 addition & 0 deletions src/AppMenu.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,7 @@
<router-link to="/progressbar">ProgressBar</router-link>
<router-link to="/progressspinner">ProgressSpinner</router-link>
<router-link to="/ripple">Ripple</router-link>
<router-link to="/tag">Tag <Tag value="New"></Tag></router-link>
<router-link to="/terminal">Terminal</router-link>
</div>
</div>
Expand Down
10 changes: 10 additions & 0 deletions src/components/tag/Tag.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import Vue from 'vue';

declare class Tag extends Vue {
value?: any;
severity?: string;
rounded?: boolean;
icon?: string;
}

export default Tag;
49 changes: 49 additions & 0 deletions src/components/tag/Tag.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<template>
<span :class="containerClass">
<slot>
<span :class="iconClass" v-if="icon"></span>
<span class="p-tag-value">{{value}}</span>
</slot>
</span>
</template>

<script>
export default {
props: {
value: null,
severity: null,
rounded: Boolean,
icon: String
},
computed: {
containerClass() {
return ['p-tag p-component', {
'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
}];
},
iconClass() {
return ['p-tag-icon', this.icon];
}
}
}
</script>

<style>
.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;
}
</style>
2 changes: 2 additions & 0 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ import Steps from './components/steps/Steps';
import TabMenu from './components/tabmenu/TabMenu';
import TabView from './components/tabview/TabView';
import TabPanel from './components/tabpanel/TabPanel';
import Tag from './components/tag/Tag';
import Terminal from './components/terminal/Terminal';
import Textarea from './components/textarea/Textarea';
import TieredMenu from './components/tieredmenu/TieredMenu';
Expand Down Expand Up @@ -156,6 +157,7 @@ Vue.component('Steps', Steps);
Vue.component('TabView', TabView);
Vue.component('TabPanel', TabPanel);
Vue.component('TabMenu', TabMenu);
Vue.component('Tag', Tag);
Vue.component('Terminal', Terminal);
Vue.component('Textarea', Textarea);
Vue.component('TieredMenu', TieredMenu);
Expand Down
7 changes: 6 additions & 1 deletion src/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -559,7 +559,12 @@ export default new Router({
path: '/tabview',
name: 'tabview',
component: () => import('./views/tabview/TabViewDemo.vue')
},
},
{
path: '/tag',
name: 'tag',
component: () => import('./views/tag/TagDemo.vue')
},
{
path: '/text',
name: 'text',
Expand Down
46 changes: 46 additions & 0 deletions src/views/tag/TagDemo.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<template>
<div>
<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>
<Tag class="p-mr-2" value="Primary"></Tag>
<Tag class="p-mr-2" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
<Tag severity="danger" value="Danger"></Tag>

<h5>Pills</h5>
<Tag class="p-mr-2" value="Primary" rounded></Tag>
<Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
<Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
<Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
<Tag severity="danger" value="Danger" rounded></Tag>

<h5>Icons</h5>
<Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
<Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
<Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
<Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
<Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
</div>
</div>

<TagDoc />
</div>
</template>

<script>
import TagDoc from './TagDoc';
export default {
components: {
'TagDoc': TagDoc
}
}
</script>
145 changes: 145 additions & 0 deletions src/views/tag/TagDoc.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,145 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Import</h5>
<CodeHighlight lang="javascript">
import Tag from 'primevue/tag';
</CodeHighlight>

<h5>Getting Started</h5>
<p>Content of the tag is specified using the <i>value</i> property.</p>
<CodeHighlight>
&lt;Tag value="New"&gt;&lt;/Tag&gt;
</CodeHighlight>

<h5>Icon</h5>
<p>An icon can also be configured to be displayed next to the value with the <i>icon</i> property.</p>
<CodeHighlight>
&lt;Tag value="New" icon="pi pi-plus"&gt;&lt;/Tag&gt;
</CodeHighlight>

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

<ul>
<li>success</li>
<li>info</li>
<li>warning</li>
<li>danger</li>
</ul>

<h5>Templating</h5>
<p>Content can easily be customized with the default slot instead of using the built-in display.</p>
<CodeHighlight>
&lt;Tag&gt;
Content
&lt;/Tag&gt;
</CodeHighlight>

<h5>Properties</h5>
<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>any</td>
<td>null</td>
<td>Value to display inside the tag.</td>
</tr>
<tr>
<td>severity</td>
<td>string</td>
<td>null</td>
<td>Severity type of the tag.</td>
</tr>
<tr>
<td>rounded</td>
<td>boolean</td>
<td>false</td>
<td>Whether the corners of the tag are rounded.</td>
</tr>
<tr>
<td>icon</td>
<td>string</td>
<td>null</td>
<td>Icon of the tag to display next to the value.</td>
</tr>
</tbody>
</table>
</div>

<h5>Styling</h5>
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-tag</td>
<td>Tag element</td>
</tr>
<tr>
<td>p-tag-rounded</td>
<td>Rounded element</td>
</tr>
<tr>
<td>p-tag-icon</td>
<td>Icon of the tag</td>
</tr>
<tr>
<td>p-tag-value</td>
<td>Value of the tag</td>
</tr>
</tbody>
</table>
</div>

<h5>Dependencies</h5>
<p>None.</p>
</TabPanel>

<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/tag" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
&lt;h5&gt;Tags&lt;/h5&gt;
&lt;Tag class="p-mr-2" value="Primary"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="success" value="Success"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="info" value="Info"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="warning" value="Warning"&gt;&lt;/Tag&gt;
&lt;Tag severity="danger" value="Danger"&gt;&lt;/Tag&gt;

&lt;h5&gt;Pills&lt;/h5&gt;
&lt;Tag class="p-mr-2" value="Primary" rounded&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="success" value="Success" rounded&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="info" value="Info" rounded&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" severity="warning" value="Warning" rounded&gt;&lt;/Tag&gt;
&lt;Tag severity="danger" value="Danger" rounded&gt;&lt;/Tag&gt;

&lt;h5&gt;Icons&lt;/h5&gt;
&lt;Tag class="p-mr-2" icon="pi pi-user" value="Primary"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"&gt;&lt;/Tag&gt;
&lt;Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"&gt;&lt;/Tag&gt;
&lt;Tag icon="pi pi-times" severity="danger" value="Danger"&gt;&lt;/Tag&gt;
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>

0 comments on commit d3d66c1

Please sign in to comment.