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

Implemented button badges

pull/310/head
cagataycivici 2020-05-09 02:36:45 +03:00
parent 7f0d9d77e9
commit b936c9a135
27 changed files with 221 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/themes/luna-amber/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3378,6 +3381,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
color: #333333;
}
.p-badge.p-badge-success {
background-color: #34A835;
color: #ffffff;

7
public/themes/luna-green/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3378,6 +3381,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
color: #333333;
}
.p-badge.p-badge-success {
background-color: #34A835;
color: #ffffff;

7
public/themes/luna-pink/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3378,6 +3381,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
color: #333333;
}
.p-badge.p-badge-success {
background-color: #34A835;
color: #ffffff;

7
public/themes/nova-colored/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3378,6 +3381,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
color: #333333;
}
.p-badge.p-badge-success {
background-color: #34A835;
color: #ffffff;

7
public/themes/nova-dark/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3378,6 +3381,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
color: #333333;
}
.p-badge.p-badge-success {
background-color: #34A835;
color: #ffffff;

7
public/themes/nova-light/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3378,6 +3381,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
color: #333333;
}
.p-badge.p-badge-success {
background-color: #34A835;
color: #ffffff;

7
public/themes/nova-vue/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3378,6 +3381,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #f4f4f4;
color: #333333;
}
.p-badge.p-badge-success {
background-color: #34A835;
color: #ffffff;

7
public/themes/rhea/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3378,6 +3381,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #f3f3f3;
color: #333333;
}
.p-badge.p-badge-success {
background-color: #A3E2C6;
color: #323E39;

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

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
color: #1976D2;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;

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

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
color: #00838F;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;

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

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
color: #512DA8;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;

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

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
color: #388E3C;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;

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

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
color: #303F9F;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;

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

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
color: #FFA000;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;

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

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
color: #7B1FA2;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;

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

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: #ffffff;
color: #00796B;
}
.p-badge.p-badge-success {
background-color: #689F38;
color: #ffffff;

7
public/themes/vela-blue/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: transparent;
color: #64B5F6;
}
.p-badge.p-badge-success {
background-color: #AED581;
color: #212529;

7
public/themes/vela-cyan/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: transparent;
color: #4DD0E1;
}
.p-badge.p-badge-success {
background-color: #AED581;
color: #212529;

7
public/themes/vela-deeppurple/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: transparent;
color: #9575CD;
}
.p-badge.p-badge-success {
background-color: #AED581;
color: #212529;

7
public/themes/vela-green/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: transparent;
color: #81C784;
}
.p-badge.p-badge-success {
background-color: #AED581;
color: #212529;

7
public/themes/vela-indigo/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: transparent;
color: #7986CB;
}
.p-badge.p-badge-success {
background-color: #AED581;
color: #212529;

7
public/themes/vela-orange/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: transparent;
color: #FFD54F;
}
.p-badge.p-badge-success {
background-color: #AED581;
color: #212529;

7
public/themes/vela-purple/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: transparent;
color: #BA68C8;
}
.p-badge.p-badge-success {
background-color: #AED581;
color: #212529;

7
public/themes/vela-teal/theme.css
View File

@ -1108,6 +1108,9 @@
.p-button .p-button-icon-right {
margin-left: 0.5em;
}
.p-button .p-badge {
margin-left: 0.5em;
}
.p-button.p-button-icon-only {
width: 2.357em;
}
@ -3412,6 +3415,10 @@
height: 2em;
line-height: 2em;
}
.p-badge.p-badge-secondary {
background-color: transparent;
color: #4DB6AC;
}
.p-badge.p-badge-success {
background-color: #AED581;
color: #212529;

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

@ -454,11 +454,6 @@ a {
.content-section {
display: block;
padding: 30px;
background-color: #f5f7f8;
&:first-of-type > div > span {
line-height: 1.5em;
}
h2 {
margin-top: 0;
@ -588,6 +583,7 @@ a {
&.documentation {
border-top: 1px solid #dadada;
background-color: #f5f7f8;
h3 {
color: #495057;

8
src/components/button/Button.vue
View File

@ -2,6 +2,7 @@
<button :class="buttonClass" v-on="$listeners">
<span v-if="icon" :class="iconClass"></span>
<span class="p-button-text">{{label||'&nbsp;'}}</span>
<span class="p-badge" v-if="badge" :class="badgeClass">{{badge}}</span>
</button>
</template>
@ -17,6 +18,13 @@ export default {
iconPos: {
type: String,
default: 'left'
},
badge: {
type: String
},
badgeClass: {
type: String,
default: 'p-badge-secondary'
}
},
computed: {

71
src/views/badge/BadgeDemo.vue
View File

@ -9,25 +9,31 @@
<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>
<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>
<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>
<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>
<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>
<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">
@ -40,15 +46,22 @@
<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>
<h3>Inline Button Badge</h3>
<Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-" />
<h3>Sizes</h3>
<div class="badges">
<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>
<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 />
@ -71,16 +84,18 @@ export default {
</script>
<style lang="scss" scoped>
.p-badge, .p-tag {
.badges {
.p-badge, .p-tag {
margin-right: .5em;
}
}
.p-button {
margin-right: .5em;
}
.p-overlay-badge {
margin-right: 2em;
.p-badge {
margin-right: 0;
}
}
/deep/ h1, h2 {