vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Drop-in of badge

pull/310/head
cagataycivici 2020-05-09 02:19:35 +03:00
parent 50e721d17a
commit e60d94fb3c
15 changed files with 662 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
public/themes/saga-blue/theme.css
View File

@ -3403,4 +3403,55 @@
background: rgba(0, 0, 0, 0.4);
}
.p-badge {
background: #2196F3;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
min-width: 2em;
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;
}
.p-badge.p-badge-info {
background-color: #0288D1;
color: #ffffff;
}
.p-badge.p-badge-warning {
background-color: #FBC02D;
color: #212529;
}
.p-badge.p-badge-danger {
background-color: #D32F2F;
color: #ffffff;
}
.p-tag {
background: #2196F3;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
padding: 0.25em 0.4em;
border-radius: 3px;
}
.p-tag.p-tag-success {
background-color: #689F38;
color: #ffffff;
}
.p-tag.p-tag-info {
background-color: #0288D1;
color: #ffffff;
}
.p-tag.p-tag-warning {
background-color: #FBC02D;
color: #212529;
}
.p-tag.p-tag-danger {
background-color: #D32F2F;
color: #ffffff;
}
/* Add your customizations of theme here */

51
public/themes/saga-cyan/theme.css
View File

@ -3403,4 +3403,55 @@
background: rgba(0, 0, 0, 0.4);
}
.p-badge {
background: #00ACC1;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
min-width: 2em;
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;
}
.p-badge.p-badge-info {
background-color: #0288D1;
color: #ffffff;
}
.p-badge.p-badge-warning {
background-color: #FBC02D;
color: #212529;
}
.p-badge.p-badge-danger {
background-color: #D32F2F;
color: #ffffff;
}
.p-tag {
background: #00ACC1;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
padding: 0.25em 0.4em;
border-radius: 3px;
}
.p-tag.p-tag-success {
background-color: #689F38;
color: #ffffff;
}
.p-tag.p-tag-info {
background-color: #0288D1;
color: #ffffff;
}
.p-tag.p-tag-warning {
background-color: #FBC02D;
color: #212529;
}
.p-tag.p-tag-danger {
background-color: #D32F2F;
color: #ffffff;
}
/* Add your customizations of theme here */

51
public/themes/saga-deeppurple/theme.css
View File

@ -3403,4 +3403,55 @@
background: rgba(0, 0, 0, 0.4);
}
.p-badge {
background: #673AB7;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
min-width: 2em;
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;
}
.p-badge.p-badge-info {
background-color: #0288D1;
color: #ffffff;
}
.p-badge.p-badge-warning {
background-color: #FBC02D;
color: #212529;
}
.p-badge.p-badge-danger {
background-color: #D32F2F;
color: #ffffff;
}
.p-tag {
background: #673AB7;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
padding: 0.25em 0.4em;
border-radius: 3px;
}
.p-tag.p-tag-success {
background-color: #689F38;
color: #ffffff;
}
.p-tag.p-tag-info {
background-color: #0288D1;
color: #ffffff;
}
.p-tag.p-tag-warning {
background-color: #FBC02D;
color: #212529;
}
.p-tag.p-tag-danger {
background-color: #D32F2F;
color: #ffffff;
}
/* Add your customizations of theme here */

51
public/themes/saga-green/theme.css
View File

@ -3403,4 +3403,55 @@
background: rgba(0, 0, 0, 0.4);
}
.p-badge {
background: #4CAF50;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
min-width: 2em;
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;
}
.p-badge.p-badge-info {
background-color: #0288D1;
color: #ffffff;
}
.p-badge.p-badge-warning {
background-color: #FBC02D;
color: #212529;
}
.p-badge.p-badge-danger {
background-color: #D32F2F;
color: #ffffff;
}
.p-tag {
background: #4CAF50;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
padding: 0.25em 0.4em;
border-radius: 3px;
}
.p-tag.p-tag-success {
background-color: #689F38;
color: #ffffff;
}
.p-tag.p-tag-info {
background-color: #0288D1;
color: #ffffff;
}
.p-tag.p-tag-warning {
background-color: #FBC02D;
color: #212529;
}
.p-tag.p-tag-danger {
background-color: #D32F2F;
color: #ffffff;
}
/* Add your customizations of theme here */

51
public/themes/saga-indigo/theme.css
View File

@ -3403,4 +3403,55 @@
background: rgba(0, 0, 0, 0.4);
}
.p-badge {
background: #3F51B5;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
min-width: 2em;
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;
}
.p-badge.p-badge-info {
background-color: #0288D1;
color: #ffffff;
}
.p-badge.p-badge-warning {
background-color: #FBC02D;
color: #212529;
}
.p-badge.p-badge-danger {
background-color: #D32F2F;
color: #ffffff;
}
.p-tag {
background: #3F51B5;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
padding: 0.25em 0.4em;
border-radius: 3px;
}
.p-tag.p-tag-success {
background-color: #689F38;
color: #ffffff;
}
.p-tag.p-tag-info {
background-color: #0288D1;
color: #ffffff;
}
.p-tag.p-tag-warning {
background-color: #FBC02D;
color: #212529;
}
.p-tag.p-tag-danger {
background-color: #D32F2F;
color: #ffffff;
}
/* Add your customizations of theme here */

51
public/themes/saga-orange/theme.css
View File

@ -3403,4 +3403,55 @@
background: rgba(0, 0, 0, 0.4);
}
.p-badge {
background: #FFC107;
color: #212529;
font-size: 0.75em;
font-weight: 700;
min-width: 2em;
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;
}
.p-badge.p-badge-info {
background-color: #0288D1;
color: #ffffff;
}
.p-badge.p-badge-warning {
background-color: #FBC02D;
color: #212529;
}
.p-badge.p-badge-danger {
background-color: #D32F2F;
color: #ffffff;
}
.p-tag {
background: #FFC107;
color: #212529;
font-size: 0.75em;
font-weight: 700;
padding: 0.25em 0.4em;
border-radius: 3px;
}
.p-tag.p-tag-success {
background-color: #689F38;
color: #ffffff;
}
.p-tag.p-tag-info {
background-color: #0288D1;
color: #ffffff;
}
.p-tag.p-tag-warning {
background-color: #FBC02D;
color: #212529;
}
.p-tag.p-tag-danger {
background-color: #D32F2F;
color: #ffffff;
}
/* Add your customizations of theme here */

51
public/themes/saga-purple/theme.css
View File

@ -3403,4 +3403,55 @@
background: rgba(0, 0, 0, 0.4);
}
.p-badge {
background: #9C27B0;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
min-width: 2em;
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;
}
.p-badge.p-badge-info {
background-color: #0288D1;
color: #ffffff;
}
.p-badge.p-badge-warning {
background-color: #FBC02D;
color: #212529;
}
.p-badge.p-badge-danger {
background-color: #D32F2F;
color: #ffffff;
}
.p-tag {
background: #9C27B0;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
padding: 0.25em 0.4em;
border-radius: 3px;
}
.p-tag.p-tag-success {
background-color: #689F38;
color: #ffffff;
}
.p-tag.p-tag-info {
background-color: #0288D1;
color: #ffffff;
}
.p-tag.p-tag-warning {
background-color: #FBC02D;
color: #212529;
}
.p-tag.p-tag-danger {
background-color: #D32F2F;
color: #ffffff;
}
/* Add your customizations of theme here */

51
public/themes/saga-teal/theme.css
View File

@ -3403,4 +3403,55 @@
background: rgba(0, 0, 0, 0.4);
}
.p-badge {
background: #009688;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
min-width: 2em;
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;
}
.p-badge.p-badge-info {
background-color: #0288D1;
color: #ffffff;
}
.p-badge.p-badge-warning {
background-color: #FBC02D;
color: #212529;
}
.p-badge.p-badge-danger {
background-color: #D32F2F;
color: #ffffff;
}
.p-tag {
background: #009688;
color: #ffffff;
font-size: 0.75em;
font-weight: 700;
padding: 0.25em 0.4em;
border-radius: 3px;
}
.p-tag.p-tag-success {
background-color: #689F38;
color: #ffffff;
}
.p-tag.p-tag-info {
background-color: #0288D1;
color: #ffffff;
}
.p-tag.p-tag-warning {
background-color: #FBC02D;
color: #212529;
}
.p-tag.p-tag-danger {
background-color: #D32F2F;
color: #ffffff;
}
/* Add your customizations of theme here */

1
src/AppMenu.vue
View File

@ -146,6 +146,7 @@
<span>Misc</span>
</span>
<div>
<router-link to="/badge">Badge</router-link>
<router-link to="/blockui">BlockUI</router-link>
<router-link to="/inplace">Inplace</router-link>
<router-link to="/progressbar">ProgressBar</router-link>

4
src/assets/styles/app.scss
View File

@ -473,10 +473,8 @@ a {
h1 {
font-size: 28px;
margin: 0 0 20px 0;
display: block;
text-align: left;
color: #ffffff;
font-weight: normal;
font-weight: 700;
}
p {

1
src/assets/styles/primevue.css
View File

@ -1,4 +1,5 @@
@import '../../components/common/Common.css';
@import '../../components/badge/Badge.css';
@import '../../components/button/Button.css';
@import '../../components/checkbox/Checkbox.css';
@import '../../components/colorpicker/ColorPicker.css';

27
src/components/badge/Badge.css Normal file
View File

@ -0,0 +1,27 @@
.p-badge {
display: inline-block;
border-radius: 50%;
text-align: center;
}
.p-tag {
display: inline-block;
text-align: center;
}
.p-tag.p-tag-rounded {
border-radius: 10em;
}
.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;
}

5
src/router.js
View File

@ -41,6 +41,11 @@ export default new Router({
name: 'autocomplete',
component: () => import('./views/autocomplete/AutoCompleteDemo.vue')
},
{
path: '/badge',
name: 'badge',
component: () => import('./views/badge/BadgeDemo.vue')
},
{
path: '/blockui',
name: 'blockui',

91
src/views/badge/BadgeDemo.vue Normal file
View File

@ -0,0 +1,91 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Badge</h1>
<p>Badge is a small status indicator for another element.</p>
</div>
</div>
<div class="content-section implementation">
<h3>Numbers</h3>
<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>
<h3>Tags</h3>
<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>
<h3>Pills</h3>
<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>
<h3>Positioned Badge</h3>
<span class="p-overlay-badge">
<span class="p-badge">2</span>
<i class="pi pi-bell" style="font-size: 2em"></i>
</span>
<span class="p-overlay-badge">
<span class="p-badge p-badge-warning">5</span>
<Button type="button" label="New" />
</span>
<h3>Sizes</h3>
<span class="p-badge" style="font-size: 1em">2</span>
<span class="p-badge p-badge-success" style="font-size: 1.25em">8</span>
<span class="p-badge p-badge-info" style="font-size: 1.5em">4</span>
<span class="p-badge p-badge-warning" style="font-size: 1.75em">12</span>
<span class="p-badge p-badge-danger" style="font-size: 2em">3</span>
<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>
</div>
<BadgeDoc />
</div>
</template>
<script>
import BadgeDoc from './BadgeDoc';
export default {
data() {
return {
}
},
components: {
'BadgeDoc': BadgeDoc
}
}
</script>
<style lang="scss" scoped>
.p-badge, .p-tag {
margin-right: .5em;
}
.p-overlay-badge {
margin-right: 2em;
.p-badge {
margin-right: 0;
}
}
/deep/ h1, h2 {
.p-badge {
vertical-align: middle;
}
}
</style>

128
src/views/badge/BadgeDoc.vue Normal file
View File

@ -0,0 +1,128 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<h3>Import</h3>
<CodeHighlight lang="javascript">
import InputText from 'primevue/inputtext';
</CodeHighlight>
<h3>Getting Started</h3>
<p>A model can be bound using the standard v-model directive.</p>
<CodeHighlight>
&lt;InputText type="text" v-model="value" /&gt;
</CodeHighlight>
<h3>Float Label</h3>
<p>A floating label is implemented by wrapping the input and the label inside a container having <i>.p-float-label</i> style class.</p>
<CodeHighlight>
&lt;span class="p-float-label"&gt;
&lt;InputText id="username" type="text" v-model="value" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt;
</CodeHighlight>
<h3>Icons</h3>
<p>An icon can be integrated within an input field by wrapping the input and the icon with an element having either <i>p-input-icon-right</i>
or <i>p-input-icon-left</i> class depending on the icon location.</p>
<CodeHighlight>
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText type="text" v-model="value1" placeholder="Search" /&gt;
&lt;/span&gt;
&lt;span class="p-input-icon-right"&gt;
&lt;i class="pi pi-spin pi-spinner" /&gt;
&lt;InputText type="text" v-model="value2" /&gt;
&lt;/span&gt;
</CodeHighlight>
<h3>Properties</h3>
<p>InputText passes any valid attribute to the underlying input element.</p>
<h3>Events</h3>
<p>Any valid event such as focus, blur and input are passed to the underlying input element.</p>
<h3>Styling</h3>
<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-inputtext</td>
<td>Input element</td>
</tr>
</tbody>
</table>
</div>
<h3>Dependencies</h3>
<p>None.</p>
</TabPanel>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
<span>View on GitHub</span>
</a>
<CodeHighlight>
<template v-pre>
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;InputText type="text" v-model="value1" /&gt;
&lt;span :style="{marginLeft: '.5em'}"&gt;{{value1}}&lt;/span&gt;
&lt;h3&gt;Floating Label&lt;/h3&gt;
&lt;span class="p-float-label"&gt;
&lt;InputText id="username" type="text" v-model="value2" /&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;/span&gt;
&lt;h3&gt;Left Icon&lt;/h3&gt;
&lt;span class="p-input-icon-left"&gt;
&lt;i class="pi pi-search" /&gt;
&lt;InputText type="text" v-model="value3" placeholder="Search" /&gt;
&lt;/span&gt;
&lt;h3&gt;Right Icon&lt;/h3&gt;
&lt;span class="p-input-icon-right"&gt;
&lt;i class="pi pi-spin pi-spinner" /&gt;
&lt;InputText type="text" v-model="value4" /&gt;
&lt;/span&gt;
&lt;h3&gt;Disabled&lt;/h3&gt;
&lt;InputText type="text" v-model="value5" disabled /&gt;
&lt;h3&gt;Invalid&lt;/h3&gt;
&lt;InputText type="text" class="p-error" /&gt;
&lt;h3&gt;Sizes&lt;/h3&gt;
&lt;div class="component-sizes"&gt;
&lt;InputText type="text" class="p-component-sm" placeholder="Small" /&gt;
&lt;InputText type="text" placeholder="Normal" /&gt;
&lt;InputText type="text" class="p-component-lg" placeholder="Large" /&gt;
&lt;/div&gt;
</template>
</CodeHighlight>
<CodeHighlight lang="javascript">
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: '',
value5: 'PrimeVue'
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
</div>
</template>