Skip to content

Commit

Permalink
Fixed #715 - Component for Badge
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Nov 28, 2020
1 parent 25fa5b1 commit 717cc79
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 133 deletions.
1 change: 1 addition & 0 deletions exports/badge.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './components/badge/Badge';
2 changes: 2 additions & 0 deletions exports/badge.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
'use strict';
module.exports = require('./components/badge/Badge.vue');
9 changes: 9 additions & 0 deletions src/components/badge/Badge.d.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Vue from 'vue';

declare class Badge extends Vue {
value?: any;
severity?: string;
size?: string;
}

export default Badge;
56 changes: 56 additions & 0 deletions src/components/badge/Badge.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<template>
<span :class="containerClass">
<template v-if="!$slots.default">{{value}}</template>
<template v-else>
<slot>
</slot>
<span :class="badgeClass">{{value}}</span>
</template>
</span>
</template>

<script>
export default {
props: {
value: null,
severity: null,
size: null
},
computed: {
containerClass() {
return this.$slots.default ? 'p-overlay-badge p-component': this.badgeClass;
},
badgeClass() {
return ['p-badge', {
'p-badge-lg': this.size === 'large',
'p-badge-xl': this.size === 'xlarge',
'p-badge-info': this.severity === 'info',
'p-badge-success': this.severity === 'success',
'p-badge-warning': this.severity === 'warning',
'p-badge-danger': this.severity === 'danger'
}];
}
}
}
</script>

<style>
.p-badge {
display: inline-block;
border-radius: 50%;
text-align: center;
}
.p-overlay-badge {
position: relative;
display: inline-block;
}
.p-overlay-badge .p-badge {
position: absolute;
top: 0;
right: 0;
transform: translate(1em, -1em);
margin: 0;
}
</style>
2 changes: 2 additions & 0 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Accordion from './components/accordion/Accordion';
import AccordionTab from './components/accordiontab/AccordionTab';
import Avatar from './components/avatar/Avatar';
import AvatarGroup from './components/avatargroup/AvatarGroup';
import Badge from './components/badge/Badge';
import BlockUI from './components/blockui/BlockUI';
import Breadcrumb from './components/breadcrumb/Breadcrumb';
import Button from './components/button/Button';
Expand Down Expand Up @@ -117,6 +118,7 @@ app.component('AccordionTab', AccordionTab);
app.component('Avatar', Avatar);
app.component('AvatarGroup', AvatarGroup);
app.component('AutoComplete', AutoComplete);
app.component('Badge', Badge);
app.component('BlockUI', BlockUI);
app.component('Breadcrumb', Breadcrumb);
app.component('Button', Button);
Expand Down
52 changes: 12 additions & 40 deletions src/views/badge/BadgeDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,53 +10,25 @@
<div class="content-section implementation">
<div class="card">
<h5>Numbers</h5>
<div class="badges">
<span class="p-badge">2</span>
<span class="p-badge p-badge-success">8</span>
<span class="p-badge p-badge-info">4</span>
<span class="p-badge p-badge-warning">12</span>
<span class="p-badge p-badge-danger">3</span>
</div>

<h5>Tags</h5>
<div class="badges">
<span class="p-tag">Primary</span>
<span class="p-tag p-tag-success">Success</span>
<span class="p-tag p-tag-info">Info</span>
<span class="p-tag p-tag-warning">Warning</span>
<span class="p-tag p-tag-danger">Danger</span>
</div>

<h5>Pills</h5>
<div class="badges">
<span class="p-tag p-tag-rounded">Primary</span>
<span class="p-tag p-tag-rounded p-tag-success">Success</span>
<span class="p-tag p-tag-rounded p-tag-info">Info</span>
<span class="p-tag p-tag-rounded p-tag-warning">Warning</span>
<span class="p-tag p-tag-rounded p-tag-danger">Danger</span>
</div>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="8" severity="success" class="p-mr-2"></Badge>
<Badge value="4" severity="info" class="p-mr-2"></Badge>
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
<Badge value="3" severity="danger"></Badge>

<h5>Positioned Badge</h5>
<span class="p-overlay-badge p-mr-5">
<i class="pi pi-bell" style="font-size: 2em"></i>
<span class="p-badge">2</span>
</span>

<span class="p-overlay-badge">
<Button type="button" label="New" />
<span class="p-badge p-badge-warning">5</span>
</span>
<Badge value="2">
<i class="pi pi-bell" style="font-size: 2rem"></i>
</Badge>

<h5>Inline Button Badge</h5>
<h5>Button Badge</h5>
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />

<h5>Sizes</h5>
<div class="badges">
<span class="p-badge">2</span>
<span class="p-badge p-badge-lg p-badge-success">4</span>
<span class="p-badge p-badge-xl p-badge-warning">6</span>
</div>
<Badge value="2" class="p-mr-2"></Badge>
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
<Badge value="6" size="xlarge" severity="success"></Badge>
</div>
</div>

Expand Down
139 changes: 46 additions & 93 deletions src/views/badge/BadgeDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,43 @@
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h5>Getting Started</h5>
<p>A badge is offered as pure css rather than a component.</p>
<h5>Import</h5>
<pre v-code.script>
<code>
import Badge from 'primevue/badge';

<h5>Numbers</h5>
<p>Use <i>.p-badge</i> class to display numbers inside badges.</p>
</code></pre>

<h5>Getting Started</h5>
<p>Content of the badge is specified using the <i>value</i> property.</p>
<pre v-code>
<code>
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;Badge value="2"&gt;&lt;/Badge&gt;

</code></pre>

<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>
<h5>Positoning</h5>
<p>A badge can easily be positioned relative to another element by wrapping it.</p>
<pre v-code>
<code>
&lt;span class="p-tag"&gt;New&lt;/span&gt;
&lt;span class="p-tag p-tag-rounded"&gt;New&lt;/span&gt;
&lt;Badge value="2"&gt;
&lt;i class="pi pi-bell" style="font-size: 2rem"&gt;&lt;/i&gt;
&lt;/Badge&gt;

</code></pre>

<h5>Severities</h5>
<p>Different options are available as severity levels with.</p>
<p>Different color options are available as severity levels.</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>
<li>secondary</li>
<li>success</li>
<li>info</li>
<li>warning</li>
<li>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>
<pre v-code>
<code>
&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;Button type="button" label="New" /&gt;
&lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
&lt;/span&gt;

</code></pre>

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

<pre v-code>
Expand All @@ -60,20 +49,20 @@
</code></pre>

<h5>Sizes</h5>
<p>Badge sizes are adjusted with additional classes.</p>
<p>Badge sizes are adjusted with the <i>size</i> property that accepts "large" and "xlarge" as the possible alternatives to the default size.</p>
<pre v-code>
<code>
&lt;span class="p-badge"&gt;2&lt;/span&gt;
&lt;span class="p-badge p-badge-l p-badge-success"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
&lt;Badge value="2"&gt;&lt;/Badge&gt;
&lt;Badge value="4" size="large" severity="warning"&gt;&lt;/Badge&gt;
&lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt;

</code></pre>

<p>In addition, when placed inside another element, badge sizes can also derive their size from their parent.</p>
<pre v-code>
<code>
&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;
&lt;h1&gt;Heading 1 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h1&gt;
&lt;h2&gt;Heading 2 &lt;Badge value="New"&gt;&lt;/Badge&gt;&lt;/h2&gt;

</code></pre>

Expand All @@ -92,24 +81,16 @@
<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-l</td>
<td>p-badge-lg</td>
<td>Large badge element</td>
</tr>
<tr>
<td>p-badge-l</td>
<td>p-badge-xl</td>
<td>Extra large badge element</td>
</tr>
</tbody>
Expand All @@ -126,54 +107,26 @@
</a>
<pre v-code>
<code><template v-pre>
&lt;h3&gt;Numbers&lt;/h3&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;h3&gt;Tags&lt;/h3&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;h3&gt;Pills&lt;/h3&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;h3&gt;Positioned Badge&lt;/h3&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;Button type="button" label="New" /&gt;
&lt;span class="p-badge p-badge-warning"&gt;5&lt;/span&gt;
&lt;/span&gt;

&lt;h3&gt;Inline Button Badge&lt;/h3&gt;
<h5>Numbers</h5>
&lt;Badge value="2" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="8" severity="success" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="4" severity="info" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="12" severity="warning" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="3" severity="danger"&gt;&lt;/Badge&gt;

&lt;h5&gt;Positioned Badge&lt;/h5&gt;
&lt;Badge value="2"&gt;
&lt;i class="pi pi-bell" style="font-size: 2rem"&gt;&lt;/i&gt;
&lt;/Badge&gt;

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

&lt;h3&gt;Sizes&lt;/h3&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-success"&gt;4&lt;/span&gt;
&lt;span class="p-badge p-badge-xl p-badge-warning"&gt;6&lt;/span&gt;
&lt;/div&gt;
&lt;h5&gt;Sizes&lt;/h5&gt;
&lt;Badge value="2" class="p-mr-2"&gt;&lt;/Badge&gt;
&lt;Badge value="4" class="p-mr-2" size="large" severity="warning"&gt;&lt;/Badge&gt;
&lt;Badge value="6" size="xlarge" severity="success"&gt;&lt;/Badge&gt;
</template>
</code></pre>
</TabPanel>
Expand Down

0 comments on commit 717cc79

Please sign in to comment.