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

Add p-button-plain add-on for text button

pull/411/head
cagataycivici 2020-07-18 15:40:00 +03:00
parent 783883dc33
commit 3bb551eb1e
35 changed files with 475 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/themes/arya-blue/theme.css
View File

@ -1261,6 +1261,17 @@
color: #64B5F6; color: #64B5F6;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/arya-green/theme.css
View File

@ -1261,6 +1261,17 @@
color: #81C784; color: #81C784;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/arya-orange/theme.css
View File

@ -1261,6 +1261,17 @@
color: #FFD54F; color: #FFD54F;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/arya-purple/theme.css
View File

@ -1261,6 +1261,17 @@
color: #BA68C8; color: #BA68C8;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -1261,6 +1261,17 @@
color: #8dd0ff; color: #8dd0ff;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -1261,6 +1261,17 @@
color: #c298d8; color: #c298d8;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/bootstrap4-light-blue/theme.css
View File

@ -1261,6 +1261,17 @@
color: #007bff; color: #007bff;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/bootstrap4-light-purple/theme.css
View File

@ -1261,6 +1261,17 @@
color: #883cae; color: #883cae;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #FFE082; color: #FFE082;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #4c4c4c;
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #3c3c3c;
color: #888888;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/luna-blue/theme.css
View File

@ -1261,6 +1261,17 @@
color: #81D4FA; color: #81D4FA;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #4c4c4c;
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #3c3c3c;
color: #888888;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #C5E1A5; color: #C5E1A5;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #4c4c4c;
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #3c3c3c;
color: #888888;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #F48FB1; color: #F48FB1;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #4c4c4c;
color: #888888;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #3c3c3c;
color: #888888;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/md-dark-deeppurple/theme.css
View File

@ -1273,6 +1273,17 @@
color: #CE93D8; color: #CE93D8;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/md-dark-indigo/theme.css
View File

@ -1273,6 +1273,17 @@
color: #9FA8DA; color: #9FA8DA;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/md-light-deeppurple/theme.css
View File

@ -1273,6 +1273,17 @@
color: #673AB7; color: #673AB7;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(0, 0, 0, 0.16);
color: rgba(0, 0, 0, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/md-light-indigo/theme.css
View File

@ -1273,6 +1273,17 @@
color: #3F51B5; color: #3F51B5;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(0, 0, 0, 0.16);
color: rgba(0, 0, 0, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -1273,6 +1273,17 @@
color: #673AB7; color: #673AB7;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/mdc-dark-indigo/theme.css
View File

@ -1273,6 +1273,17 @@
color: #3F51B5; color: #3F51B5;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/mdc-light-deeppurple/theme.css
View File

@ -1273,6 +1273,17 @@
color: #673AB7; color: #673AB7;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(0, 0, 0, 0.16);
color: rgba(0, 0, 0, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/mdc-light-indigo/theme.css
View File

@ -1273,6 +1273,17 @@
color: #3F51B5; color: #3F51B5;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(0, 0, 0, 0.16);
color: rgba(0, 0, 0, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/nova-accent/theme.css
View File

@ -1249,6 +1249,17 @@
color: #007ad9; color: #007ad9;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #eaeaea;
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #d2d2d2;
color: #848484;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/nova-alt/theme.css
View File

@ -1261,6 +1261,17 @@
color: #007ad9; color: #007ad9;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #eaeaea;
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #d2d2d2;
color: #848484;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #41b883; color: #41b883;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #eaeaea;
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #d2d2d2;
color: #848484;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

11
public/themes/nova/theme.css
View File

@ -1261,6 +1261,17 @@
color: #007ad9; color: #007ad9;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #eaeaea;
color: #848484;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #d2d2d2;
color: #848484;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1249,6 +1249,17 @@
color: #7B95A3; color: #7B95A3;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #a6a6a6;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #f4f4f4;
color: #a6a6a6;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dbdbdb;
color: #a6a6a6;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #2196F3; color: #2196F3;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #4CAF50; color: #4CAF50;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #FFC107; color: #FFC107;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #9C27B0; color: #9C27B0;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: #e9ecef;
color: #6c757d;
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: #dee2e6;
color: #6c757d;
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #64B5F6; color: #64B5F6;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #81C784; color: #81C784;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #FFD54F; color: #FFD54F;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -1261,6 +1261,17 @@
color: #BA68C8; color: #BA68C8;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-text.p-button-plain {
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.6);
}
.p-button.p-button-text.p-button-plain:enabled:active {
background: rgba(255, 255, 255, 0.16);
color: rgba(255, 255, 255, 0.6);
}
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;

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

@ -54,6 +54,7 @@
<Button label="Warning" class="p-button-warning p-button-text" /> <Button label="Warning" class="p-button-warning p-button-text" />
<Button label="Help" class="p-button-help p-button-text" /> <Button label="Help" class="p-button-help p-button-text" />
<Button label="Danger" class="p-button-danger p-button-text" /> <Button label="Danger" class="p-button-danger p-button-text" />
<Button label="Plain" class="p-button-text p-button-plain" />
<h5>Raised Text Buttons</h5> <h5>Raised Text Buttons</h5>
<Button label="Primary" class="p-button-raised p-button-text" /> <Button label="Primary" class="p-button-raised p-button-text" />
@ -63,6 +64,7 @@
<Button label="Warning" class="p-button-raised p-button-warning p-button-text" /> <Button label="Warning" class="p-button-raised p-button-warning p-button-text" />
<Button label="Help" class="p-button-raised p-button-help p-button-text" /> <Button label="Help" class="p-button-raised p-button-help p-button-text" />
<Button label="Danger" class="p-button-raised p-button-danger p-button-text" /> <Button label="Danger" class="p-button-raised p-button-danger p-button-text" />
<Button label="Plain" class="p-button-raised p-button-text p-button-plain" />
<h5>Outlined Buttons</h5> <h5>Outlined Buttons</h5>
<Button label="Primary" class="p-button-outlined" /> <Button label="Primary" class="p-button-outlined" />
@ -74,13 +76,13 @@
<Button label="Danger" class="p-button-outlined p-button-danger" /> <Button label="Danger" class="p-button-outlined p-button-danger" />
<h5>Rounded Icon Buttons</h5> <h5>Rounded Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded" />
<Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /> <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" />
<Button icon="pi pi-search" class="p-button-rounded p-button-success" /> <Button icon="pi pi-search" class="p-button-rounded p-button-success" />
<Button icon="pi pi-user" class="p-button-rounded p-button-info" /> <Button icon="pi pi-user" class="p-button-rounded p-button-info" />
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /> <Button icon="pi pi-bell" class="p-button-rounded p-button-warning" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help" /> <Button icon="pi pi-heart" class="p-button-rounded p-button-help" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger" /> <Button icon="pi pi-times" class="p-button-rounded p-button-danger" />
<Button icon="pi pi-check" class="p-button-rounded" />
<h5>Rounded Text Icon Buttons</h5> <h5>Rounded Text Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-text" /> <Button icon="pi pi-check" class="p-button-rounded p-button-text" />
@ -90,6 +92,7 @@
<Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /> <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" />
<Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /> <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" />
<Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /> <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" />
<Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" />
<h5>Rounded and Outlined Icon Buttons</h5> <h5>Rounded and Outlined Icon Buttons</h5>
<Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /> <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" />

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

@ -29,15 +29,6 @@ import Button from 'primevue/button';
<p>Events are defined with the standard notation.</p> <p>Events are defined with the standard notation.</p>
<CodeHighlight> <CodeHighlight>
&lt;Button label="Submit" @click="handleClick($event)"/&gt; &lt;Button label="Submit" @click="handleClick($event)"/&gt;
</CodeHighlight>
<h5>Text Buttons</h5>
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling.</p>
<CodeHighlight>
&lt;Button label="Submit" class="p-button-text" /&gt;
&lt;Button icon="pi pi-check" class="p-button-text" /&gt;
&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
&lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text" /&gt;
</CodeHighlight> </CodeHighlight>
<h5>Severity</h5> <h5>Severity</h5>
@ -60,6 +51,16 @@ import Button from 'primevue/button';
&lt;Button label="Warning" class="p-button-warning" /&gt; &lt;Button label="Warning" class="p-button-warning" /&gt;
&lt;Button label="Warning" class="p-button-help" /&gt; &lt;Button label="Warning" class="p-button-help" /&gt;
&lt;Button label="Danger" class="p-button-danger" /&gt; &lt;Button label="Danger" class="p-button-danger" /&gt;
</CodeHighlight>
<h5>Text Buttons</h5>
<p>Text buttons have transparent background and borders, use <i>p-button-text</i> to apply text button styling. In addition when used with <i>.p-button-plain</i>
text buttons ignore severity levels and displayed as a regular text.</p>
<CodeHighlight>
&lt;Button label="Submit" class="p-button-text" /&gt;
&lt;Button icon="pi pi-check" class="p-button-text" /&gt;
&lt;Button label="Cancel" icon="pi pi-times" class="p-button-text" /&gt;
&lt;Button label="Search" icon="pi pi-search" iconPos="right" class="p-button-text p-button-text" /&gt;
</CodeHighlight> </CodeHighlight>
<h5>Raised and Rounded Buttons</h5> <h5>Raised and Rounded Buttons</h5>
@ -207,114 +208,117 @@ import Button from 'primevue/button';
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h5&gt;Basic&lt;/h5&gt; &gt;h5&lt;Basic&gt;/h5&lt;
&lt;Button label="Submit" /&gt; &gt;Button label="Submit" /&lt;
&lt;Button label="Submit" disabled="disabled" /&gt; &gt;Button label="Disabled" disabled="disabled" /&lt;
&lt;Button label="Link" class="p-button-link" /&gt; &gt;Button label="Link" class="p-button-link" /&lt;
&lt;h5&gt;Icons&lt;/h5&gt; &gt;h5&lt;Icons&gt;/h5&lt;
&lt;Button icon="pi pi-check" /&gt; &gt;Button icon="pi pi-check" /&lt;
&lt;Button label="Submit" icon="pi pi-check" /&gt; &gt;Button label="Submit" icon="pi pi-check" /&lt;
&lt;Button label="Submit" icon="pi pi-check" iconPos="right" /&gt; &gt;Button label="Submit" icon="pi pi-check" iconPos="right" /&lt;
&lt;h5&gt;Severities&lt;/h5&gt; &gt;h5&lt;Severities&gt;/h5&lt;
&lt;Button label="Primary" /&gt; &gt;Button label="Primary" /&lt;
&lt;Button label="Secondary" class="p-button-secondary" /&gt; &gt;Button label="Secondary" class="p-button-secondary" /&lt;
&lt;Button label="Success" class="p-button-success" /&gt; &gt;Button label="Success" class="p-button-success" /&lt;
&lt;Button label="Info" class="p-button-info" /&gt; &gt;Button label="Info" class="p-button-info" /&lt;
&lt;Button label="Warning" class="p-button-warning" /&gt; &gt;Button label="Warning" class="p-button-warning" /&lt;
&lt;Button label="Help" class="p-button-help" /&gt; &gt;Button label="Help" class="p-button-help" /&lt;
&lt;Button label="Danger" class="p-button-danger" /&gt; &gt;Button label="Danger" class="p-button-danger" /&lt;
&lt;h5&gt;Raised Buttons&lt;/h5&gt; &gt;h5&lt;Raised Buttons&gt;/h5&lt;
&lt;Button label="Primary" class="p-button-raised" /&gt; &gt;Button label="Primary" class="p-button-raised" /&lt;
&lt;Button label="Secondary" class="p-button-raised p-button-secondary" /&gt; &gt;Button label="Secondary" class="p-button-raised p-button-secondary" /&lt;
&lt;Button label="Success" class="p-button-raised p-button-success" /&gt; &gt;Button label="Success" class="p-button-raised p-button-success" /&lt;
&lt;Button label="Info" class="p-button-raised p-button-info" /&gt; &gt;Button label="Info" class="p-button-raised p-button-info" /&lt;
&lt;Button label="Warning" class="p-button-raised p-button-warning" /&gt; &gt;Button label="Warning" class="p-button-raised p-button-warning" /&lt;
&lt;Button label="Help" class="p-button-raised p-button-help" /&gt; &gt;Button label="Help" class="p-button-raised p-button-help" /&lt;
&lt;Button label="Danger" class="p-button-raised p-button-danger" /&gt; &gt;Button label="Danger" class="p-button-raised p-button-danger" /&lt;
&lt;h5&gt;Rounded Buttons&lt;/h5&gt; &gt;h5&lt;Rounded Buttons&gt;/h5&lt;
&lt;Button label="Primary" class="p-button-rounded" /&gt; &gt;Button label="Primary" class="p-button-rounded" /&lt;
&lt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&gt; &gt;Button label="Secondary" class="p-button-rounded p-button-secondary" /&lt;
&lt;Button label="Success" class="p-button-rounded p-button-success" /&gt; &gt;Button label="Success" class="p-button-rounded p-button-success" /&lt;
&lt;Button label="Info" class="p-button-rounded p-button-info" /&gt; &gt;Button label="Info" class="p-button-rounded p-button-info" /&lt;
&lt;Button label="Warning" class="p-button-rounded p-button-warning" /&gt; &gt;Button label="Warning" class="p-button-rounded p-button-warning" /&lt;
&lt;Button label="Help" class="p-button-rounded p-button-help" /&gt; &gt;Button label="Help" class="p-button-rounded p-button-help" /&lt;
&lt;Button label="Danger" class="p-button-rounded p-button-danger" /&gt; &gt;Button label="Danger" class="p-button-rounded p-button-danger" /&lt;
&lt;h5&gt;Text Buttons&lt;/h5&gt; &gt;h5&lt;Text Buttons&gt;/h5&lt;
&lt;Button label="Primary" class="p-button-text" /&gt; &gt;Button label="Primary" class="p-button-text" /&lt;
&lt;Button label="Secondary" class="p-button-secondary p-button-text" /&gt; &gt;Button label="Secondary" class="p-button-secondary p-button-text" /&lt;
&lt;Button label="Success" class="p-button-success p-button-text" /&gt; &gt;Button label="Success" class="p-button-success p-button-text" /&lt;
&lt;Button label="Info" class="p-button-info p-button-text" /&gt; &gt;Button label="Info" class="p-button-info p-button-text" /&lt;
&lt;Button label="Warning" class="p-button-warning p-button-text" /&gt; &gt;Button label="Warning" class="p-button-warning p-button-text" /&lt;
&lt;Button label="Help" class="p-button-help p-button-text" /&gt; &gt;Button label="Help" class="p-button-help p-button-text" /&lt;
&lt;Button label="Danger" class="p-button-danger p-button-text" /&gt; &gt;Button label="Danger" class="p-button-danger p-button-text" /&lt;
&gt;Button label="Plain" class="p-button-text p-button-plain" /&lt;
&lt;h5&gt;Raised Text Buttons&lt;/h5&gt; &gt;h5&lt;Raised Text Buttons&gt;/h5&lt;
&lt;Button label="Primary" class="p-button-raised p-button-text" /&gt; &gt;Button label="Primary" class="p-button-raised p-button-text" /&lt;
&lt;Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" /&gt; &gt;Button label="Secondary" class="p-button-raised p-button-secondary p-button-text" /&lt;
&lt;Button label="Success" class="p-button-raised p-button-success p-button-text" /&gt; &gt;Button label="Success" class="p-button-raised p-button-success p-button-text" /&lt;
&lt;Button label="Info" class="p-button-raised p-button-info p-button-text" /&gt; &gt;Button label="Info" class="p-button-raised p-button-info p-button-text" /&lt;
&lt;Button label="Warning" class="p-button-raised p-button-warning p-button-text" /&gt; &gt;Button label="Warning" class="p-button-raised p-button-warning p-button-text" /&lt;
&lt;Button label="Help" class="p-button-raised p-button-help p-button-text" /&gt; &gt;Button label="Help" class="p-button-raised p-button-help p-button-text" /&lt;
&lt;Button label="Danger" class="p-button-raised p-button-danger p-button-text" /&gt; &gt;Button label="Danger" class="p-button-raised p-button-danger p-button-text" /&lt;
&gt;Button label="Plain" class="p-button-raised p-button-text p-button-plain" /&lt;
&lt;h5&gt;Outlined Buttons&lt;/h5&gt; &gt;h5&lt;Outlined Buttons&gt;/h5&lt;
&lt;Button label="Primary" class="p-button-outlined" /&gt; &gt;Button label="Primary" class="p-button-outlined" /&lt;
&lt;Button label="Secondary" class="p-button-outlined p-button-secondary" /&gt; &gt;Button label="Secondary" class="p-button-outlined p-button-secondary" /&lt;
&lt;Button label="Success" class="p-button-outlined p-button-success" /&gt; &gt;Button label="Success" class="p-button-outlined p-button-success" /&lt;
&lt;Button label="Info" class="p-button-outlined p-button-info" /&gt; &gt;Button label="Info" class="p-button-outlined p-button-info" /&lt;
&lt;Button label="Warning" class="p-button-outlined p-button-warning" /&gt; &gt;Button label="Warning" class="p-button-outlined p-button-warning" /&lt;
&lt;Button label="Help" class="p-button-outlined p-button-help" /&gt; &gt;Button label="Help" class="p-button-outlined p-button-help" /&lt;
&lt;Button label="Danger" class="p-button-outlined p-button-danger" /&gt; &gt;Button label="Danger" class="p-button-outlined p-button-danger" /&lt;
&lt;h5&gt;Rounded Icon Buttons&lt;/h5&gt; &gt;h5&lt;Rounded Icon Buttons&gt;/h5&lt;
&lt;Button icon="pi pi-check" class="p-button-rounded" /&gt; &gt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /&lt;
&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary" /&gt; &gt;Button icon="pi pi-search" class="p-button-rounded p-button-success" /&lt;
&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success" /&gt; &gt;Button icon="pi pi-user" class="p-button-rounded p-button-info" /&lt;
&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info" /&gt; &gt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /&lt;
&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning" /&gt; &gt;Button icon="pi pi-heart" class="p-button-rounded p-button-help" /&lt;
&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help" /&gt; &gt;Button icon="pi pi-times" class="p-button-rounded p-button-danger" /&lt;
&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger" /&gt; &gt;Button icon="pi pi-check" class="p-button-rounded" /&lt;
&lt;h5&gt;Rounded Text Icon Buttons&lt;/h5&gt; &gt;h5&lt;Rounded Text Icon Buttons&gt;/h5&lt;
&lt;Button icon="pi pi-check" class="p-button-rounded p-button-text" /&gt; &gt;Button icon="pi pi-check" class="p-button-rounded p-button-text" /&lt;
&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" /&gt; &gt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text" /&lt;
&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" /&gt; &gt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text" /&lt;
&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" /&gt; &gt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text" /&lt;
&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /&gt; &gt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text" /&lt;
&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /&gt; &gt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text" /&lt;
&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /&gt; &gt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text" /&lt;
&gt;Button icon="pi pi-filter" class="p-button-rounded p-button-text p-button-plain" /&lt;
&lt;h5&gt;Rounded and Outlined Icon Buttons&lt;/h5&gt; &gt;h5&lt;Rounded and Outlined Icon Buttons&gt;/h5&lt;
&lt;Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /&gt; &gt;Button icon="pi pi-check" class="p-button-rounded p-button-outlined" /&lt;
&lt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" /&gt; &gt;Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined" /&lt;
&lt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" /&gt; &gt;Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined" /&lt;
&lt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" /&gt; &gt;Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined" /&lt;
&lt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" /&gt; &gt;Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined" /&lt;
&lt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" /&gt; &gt;Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined" /&lt;
&lt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" /&gt; &gt;Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined" /&lt;
&lt;h5&gt;Badges&lt;/h5&gt; &gt;h5&lt;Badges&gt;/h5&lt;
&lt;Button type="button" label="Emails" badge="8" /&gt; &gt;Button type="button" label="Emails" badge="8" /&lt;
&lt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&gt; &gt;Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /&lt;
&lt;h5&gt;Button Set&lt;/h5&gt; &gt;h5&lt;Button Set&gt;/h5&lt;
&lt;span class="p-buttonset"&gt; &gt;span class="p-buttonset"&lt;
&lt;Button label="Save" icon="pi pi-check" /&gt; &gt;Button label="Save" icon="pi pi-check" /&lt;
&lt;Button label="Delete" icon="pi pi-trash" /&gt; &gt;Button label="Delete" icon="pi pi-trash" /&lt;
&lt;Button label="Cancel" icon="pi pi-times" /&gt; &gt;Button label="Cancel" icon="pi pi-times" /&lt;
&lt;/span&gt; &gt;/span&lt;
&lt;h5&gt;Sizes&lt;/h5&gt; &gt;h5&lt;Sizes&gt;/h5&lt;
&lt;div class="sizes"&gt; &gt;div class="sizes"&lt;
&lt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&gt; &gt;Button label="Small" icon="pi pi-check" class="p-button-sm" /&lt;
&lt;Button label="Normal" icon="pi pi-check" class="p-button" /&gt; &gt;Button label="Normal" icon="pi pi-check" class="p-button" /&lt;
&lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt; &gt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&lt;
&lt;/div&gt; &gt;/div&lt;
</template> </template>
</CodeHighlight> </CodeHighlight>