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

Fixed #309 - Top and Bottom icon positioning for button

pull/310/head
cagataycivici 2020-05-09 17:26:33 +03:00
parent b96bc671f4
commit f5b8c4ccb9
28 changed files with 171 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -1056,6 +1056,12 @@
.p-button .p-button-icon-right {
margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
margin-bottom: 0.5rem;
}
.p-button .p-badge {
margin-left: 0.5rem;
}

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

@ -29,6 +29,14 @@
flex: 0 0 auto;
}
.p-button-vertical {
flex-direction: column;
}
.p-button-icon-bottom {
order: 2;
}
.p-buttonset .p-button {
margin: 0;
}

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

@ -32,6 +32,7 @@ export default {
return {
'p-button p-component': true,
'p-button-icon-only': this.icon && !this.label,
'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
'p-disabled': this.disabled
}
},
@ -41,7 +42,9 @@ export default {
'p-button-icon',
{
'p-button-icon-left': this.iconPos === 'left' && this.label,
'p-button-icon-right': this.iconPos === 'right' && this.label
'p-button-icon-right': this.iconPos === 'right' && this.label,
'p-button-icon-top': this.iconPos === 'top' && this.label,
'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
}
]
}

8
src/views/button/ButtonDemo.vue
View File

@ -10,10 +10,14 @@
<div class="content-section implementation">
<h3 class="first">Basic</h3>
<Button label="Submit" />
<Button label="Submit" disabled="disabled" />
<h3>Icons</h3>
<Button icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<Button icon="pi pi-check" />
<Button label="Submit" disabled="disabled" />
<Button label="Submit" icon="pi pi-check" iconPos="top" />
<Button label="Submit" icon="pi pi-check" iconPos="bottom" />
<h3>Severities</h3>
<Button label="Primary" />

14
src/views/button/ButtonDoc.vue
View File

@ -110,7 +110,7 @@ import Button from 'primevue/button';
<td>iconPos</td>
<td>string</td>
<td>left</td>
<td>Position of the icon, valid values are "left" and "right".</td>
<td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
</tr>
<tr>
<td>badge</td>
@ -165,12 +165,16 @@ import Button from 'primevue/button';
</a>
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;h3 class="first"&gt;Basic&lt;/h3&gt;
&lt;Button label="Submit" /&gt;
&lt;Button label="Submit" disabled="disabled" /&gt;
&lt;h3&gt;Icons&lt;/h3&gt;
&lt;Button icon="pi pi-check" /&gt;
&lt;Button label="Submit" icon="pi pi-check" /&gt;
&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt;
&lt;Button icon="pi pi-check" /&gt;
&lt;Button label="Submit" disabled="disabled" /&gt;
&lt;Button label="Submit" icon="pi pi-check" iconPos="top" /&gt;
&lt;Button label="Submit" icon="pi pi-check" iconPos="bottom" /&gt;
&lt;h3&gt;Severities&lt;/h3&gt;
&lt;Button label="Primary" /&gt;
@ -201,7 +205,7 @@ import Button from 'primevue/button';
&lt;Button type="button" label="Emails" badge="8" /&gt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-info" /&gt;
&lt;h3&gt;ButtonSet&lt;/h3&gt;
&lt;h3&gt;Button Set&lt;/h3&gt;
&lt;span class="p-buttonset"&gt;
&lt;Button label="Save" icon="pi pi-check" /&gt;
&lt;Button label="Delete" icon="pi pi-trash" /&gt;