● Checkbox
+
● Chips
● InputSwitch
● InputText
● Listbox
diff --git a/src/assets/styles/primevue.css b/src/assets/styles/primevue.css
index 8ac9d1d65..c043ccef3 100644
--- a/src/assets/styles/primevue.css
+++ b/src/assets/styles/primevue.css
@@ -3,6 +3,7 @@
@import '../../components/button/Button.css';
@import '../../components/card/Card.css';
@import '../../components/checkbox/Checkbox.css';
+@import '../../components/chips/Chips.css';
@import '../../components/fieldset/Fieldset.css';
@import '../../components/inputtext/InputText.css';
@import '../../components/inputswitch/InputSwitch.css';
diff --git a/src/components/chips/Chips.css b/src/components/chips/Chips.css
new file mode 100644
index 000000000..4d8e94106
--- /dev/null
+++ b/src/components/chips/Chips.css
@@ -0,0 +1,59 @@
+.p-chips > ul.p-inputtext {
+ clear: left;
+ cursor: text;
+ list-style-type: none;
+ margin: 0;
+ overflow: hidden;
+ padding: 0 .25em;
+}
+
+.p-chips-token {
+ cursor: default;
+ display: inline-block;
+ vertical-align: middle;
+ overflow: hidden;
+ padding: .125em .5em;
+ white-space: nowrap;
+ position: relative;
+ margin-right: .125em;
+ border: 0 none;
+ font-size: .9em;
+}
+
+.p-chips-token .p-chips-token-label {
+ display: block;
+ margin-right: 2em;
+}
+
+.p-chips > .p-disabled .p-chips-token-label {
+ margin-right: 0;
+}
+
+.p-chips-token .p-chips-token-icon {
+ margin-top: -.5em;
+ position: absolute;
+ right: 0.2em;
+ top: 50%;
+ cursor: pointer;
+}
+
+.p-chips-input-token {
+ display: inline-block;
+ vertical-align: middle;
+ list-style-type: none;
+ margin: 0 0 0 .125em;
+ padding: .25em .25em .25em 0;
+}
+
+.p-chips-input-token .p-inputtext {
+ border: 0 none;
+ width: 10em;
+ outline: medium none;
+ background-color: transparent;
+ margin: 0;
+ padding: 0;
+ box-shadow: none;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ border-radius: 0;
+}
\ No newline at end of file
diff --git a/src/components/chips/Chips.vue b/src/components/chips/Chips.vue
new file mode 100644
index 000000000..472a9d14a
--- /dev/null
+++ b/src/components/chips/Chips.vue
@@ -0,0 +1,93 @@
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index 4290c5471..473d99039 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,6 +6,7 @@ import AccordionTab from './components/accordion/AccordionTab';
import Button from './components/button/Button';
import Card from './components/card/Card';
import Checkbox from './components/checkbox/Checkbox';
+import Chips from './components/chips/Chips';
import InputSwitch from './components/inputswitch/InputSwitch';
import InputText from './components/inputtext/InputText';
import Fieldset from './components/fieldset/Fieldset';
@@ -32,6 +33,7 @@ Vue.component('p-accordionTab', AccordionTab);
Vue.component('p-button', Button);
Vue.component('p-card', Card);
Vue.component('p-checkbox', Checkbox);
+Vue.component('p-chips', Chips);
Vue.component('p-inputSwitch', InputSwitch);
Vue.component('p-inputtext', InputText);
Vue.component('p-listbox', Listbox);
diff --git a/src/router.js b/src/router.js
index fe0018398..0e8c6d684 100644
--- a/src/router.js
+++ b/src/router.js
@@ -31,6 +31,11 @@ export default new Router({
name: 'checkbox',
component: () => import('./views/checkbox/CheckboxDemo.vue')
},
+ {
+ path: '/chips',
+ name: 'chips',
+ component: () => import('./views/chips/ChipsDemo.vue')
+ },
{
path: '/fieldset',
name: 'fieldset',
diff --git a/src/views/chips/ChipsDemo.vue b/src/views/chips/ChipsDemo.vue
new file mode 100644
index 000000000..a258ff30e
--- /dev/null
+++ b/src/views/chips/ChipsDemo.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
Chips
+
Chips is used to enter multiple values on an input field.
+
+
+
+
+
Basic
+
+
+
Template
+
+
+
+ {{value}} - (active)
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/rating/RatingDemo.vue b/src/views/rating/RatingDemo.vue
index 7ae093b9f..c11d24e58 100644
--- a/src/views/rating/RatingDemo.vue
+++ b/src/views/rating/RatingDemo.vue
@@ -15,7 +15,7 @@
ReadOnly
-
+
Disabled