Fixed #715 - Component for Badge
Cagatay Civici
parent
25fa5b1db7
commit
717cc79ff2
|
|
@ -0,0 +1 @@
|
|||
export * from './components/badge/Badge';
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
'use strict';
|
||||
module.exports = require('./components/badge/Badge.vue');
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import Vue from 'vue';
|
||||
|
||||
declare class Badge extends Vue {
|
||||
value?: any;
|
||||
severity?: string;
|
||||
size?: string;
|
||||
}
|
||||
|
||||
export default Badge;
|
||||
|
|
@ -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>
|
||||
|
|
@ -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';
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<Badge value="2">
|
||||
<i class="pi pi-bell" style="font-size: 2rem"></i>
|
||||
</Badge>
|
||||
|
||||
<span class="p-overlay-badge">
|
||||
<Button type="button" label="New" />
|
||||
<span class="p-badge p-badge-warning">5</span>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,54 +2,43 @@
|
|||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Import</h5>
|
||||
<pre v-code.script>
|
||||
<code>
|
||||
import Badge from 'primevue/badge';
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>A badge is offered as pure css rather than a component.</p>
|
||||
|
||||
<h5>Numbers</h5>
|
||||
<p>Use <i>.p-badge</i> class to display numbers inside badges.</p>
|
||||
<p>Content of the badge is specified using the <i>value</i> property.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<span class="p-badge">2</span>
|
||||
<Badge value="2"></Badge>
|
||||
|
||||
</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>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<span class="p-tag">New</span>
|
||||
<span class="p-tag p-tag-rounded">New</span>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<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>
|
||||
<p>A badge can easily be positioned relative to another element by wrapping it.</p>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<span class="p-overlay-badge">
|
||||
<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>
|
||||
|
||||
</code></pre>
|
||||
<h5>Severities</h5>
|
||||
<p>Different color options are available as severity levels.</p>
|
||||
|
||||
<h5>Inline Button Badges</h5>
|
||||
<ul>
|
||||
<li>secondary</li>
|
||||
<li>success</li>
|
||||
<li>info</li>
|
||||
<li>warning</li>
|
||||
<li>danger</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h5>Button Badges</h5>
|
||||
<p>Buttons provide integrated badge support with the <i>badge</i> and <i>badgeClass</i> properties.</p>
|
||||
|
||||
<pre v-code>
|
||||
|
|
@ -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>
|
||||
<span class="p-badge">2</span>
|
||||
<span class="p-badge p-badge-l p-badge-success">4</span>
|
||||
<span class="p-badge p-badge-xl p-badge-warning">6</span>
|
||||
<Badge value="2"></Badge>
|
||||
<Badge value="4" size="large" severity="warning"></Badge>
|
||||
<Badge value="6" size="xlarge" severity="success"></Badge>
|
||||
|
||||
</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>
|
||||
<h1>Heading 1 <span class="p-tag p-tag-success">New</span></h1>
|
||||
<h2>Heading 2 <span class="p-tag p-tag-success">New</span></h2>
|
||||
<h1>Heading 1 <Badge value="New"></Badge></h1>
|
||||
<h2>Heading 2 <Badge value="New"></Badge></h2>
|
||||
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -126,54 +107,26 @@
|
|||
</a>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Numbers</h3>
|
||||
<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>Numbers</h5>
|
||||
<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>
|
||||
|
||||
<h3>Tags</h3>
|
||||
<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>Positioned Badge</h5>
|
||||
<Badge value="2">
|
||||
<i class="pi pi-bell" style="font-size: 2rem"></i>
|
||||
</Badge>
|
||||
|
||||
<h3>Pills</h3>
|
||||
<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>
|
||||
|
||||
<h3>Positioned Badge</h3>
|
||||
<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>
|
||||
|
||||
<h3>Inline Button Badge</h3>
|
||||
<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" />
|
||||
|
||||
<h3>Sizes</h3>
|
||||
<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>
|
||||
<h5>Sizes</h5>
|
||||
<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>
|
||||
</template>
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
|
|
|
|||
Loading…
Reference in New Issue