Merge branch 'master' of https://github.com/primefaces/primevue
commit
77d4c68ffa
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
@ -157,7 +157,7 @@ export default {
|
|||
containerClass() {
|
||||
return [{
|
||||
'layout-news-active': this.newsActive,
|
||||
'p-input-filled': this.$appState.inputStyle === 'filled',
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
}
|
||||
|
|
|
@ -18,12 +18,12 @@
|
|||
export default {
|
||||
methods: {
|
||||
onChange(value) {
|
||||
this.$appState.inputStyle = value;
|
||||
this.$primevue.config.inputStyle = value;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
value() {
|
||||
return this.$appState.inputStyle;
|
||||
return this.$primevue.config.inputStyle;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -543,7 +543,11 @@ export default {
|
|||
}];
|
||||
},
|
||||
panelStyleClass() {
|
||||
return ['p-autocomplete-panel p-component', this.panelClass];
|
||||
return [
|
||||
'p-autocomplete-panel p-component', this.panelClass, {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
inputValue() {
|
||||
if (this.modelValue) {
|
||||
|
|
|
@ -2011,17 +2011,16 @@ export default {
|
|||
];
|
||||
},
|
||||
panelStyleClass() {
|
||||
return [
|
||||
'p-datepicker p-component', this.panelClass,
|
||||
{
|
||||
return ['p-datepicker p-component', this.panelClass, {
|
||||
'p-datepicker-inline': this.inline,
|
||||
'p-disabled': this.$attrs.disabled,
|
||||
'p-datepicker-timeonly': this.timeOnly,
|
||||
'p-datepicker-multiple-month': this.numberOfMonths > 1,
|
||||
'p-datepicker-monthpicker': (this.view === 'month'),
|
||||
'p-datepicker-touch-ui': this.touchUI
|
||||
}
|
||||
];
|
||||
'p-datepicker-touch-ui': this.touchUI,
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
months() {
|
||||
let months = [];
|
||||
|
|
|
@ -308,7 +308,10 @@ export default {
|
|||
return this.placeholder||'p-emptylabel';
|
||||
},
|
||||
panelStyleClass() {
|
||||
return ['p-cascadeselect-panel p-component', this.panelClass];
|
||||
return ['p-cascadeselect-panel p-component', this.panelClass, {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
appendDisabled() {
|
||||
return this.appendTo === 'self';
|
||||
|
|
|
@ -570,7 +570,11 @@ export default {
|
|||
return ['p-colorpicker-preview p-inputtext', {'p-disabled': this.disabled}];
|
||||
},
|
||||
pickerClass() {
|
||||
return ['p-colorpicker-panel', this.panelClass, {'p-colorpicker-overlay-panel': !this.inline, 'p-disabled': this.disabled}];
|
||||
return ['p-colorpicker-panel', this.panelClass, {
|
||||
'p-colorpicker-overlay-panel': !this.inline, 'p-disabled': this.disabled,
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
appendDisabled() {
|
||||
return this.appendTo === 'self' || this.inline;
|
||||
|
|
|
@ -2,6 +2,7 @@ import Vue, { Plugin } from 'vue';
|
|||
|
||||
interface PrimeVueConfiguration {
|
||||
ripple?: boolean;
|
||||
inputStyle?: string;
|
||||
locale?: PrimeVueLocaleOptions;
|
||||
}
|
||||
|
||||
|
|
|
@ -3,6 +3,7 @@ import {FilterMatchMode} from 'primevue/api';
|
|||
|
||||
const defaultOptions = {
|
||||
ripple: false,
|
||||
inputStyle: 'outlined',
|
||||
locale: {
|
||||
startsWith: 'Starts with',
|
||||
contains: 'Contains',
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Teleport to="body">
|
||||
<transition name="p-confirm-popup" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
|
||||
<div class="p-confirm-popup p-component" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
|
||||
<div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
|
||||
<div class="p-confirm-popup-content">
|
||||
<i :class="iconClass" />
|
||||
<span class="p-confirm-popup-message">{{confirmation.message}}</span>
|
||||
|
@ -187,6 +187,12 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-confirm-popup p-component', {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
message() {
|
||||
return this.confirmation ? this.confirmation.message : null;
|
||||
},
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Teleport :to="appendTo">
|
||||
<transition name="p-contextmenu" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
|
||||
<div :ref="containerRef" class="p-contextmenu p-component" v-if="visible" v-bind="$attrs">
|
||||
<div :ref="containerRef" :class="containerClass" v-if="visible" v-bind="$attrs">
|
||||
<ContextMenuSub :model="model" :root="true" @leaf-click="onLeafClick" />
|
||||
</div>
|
||||
</transition>
|
||||
|
@ -196,6 +196,14 @@ export default {
|
|||
this.container = el;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-contextmenu p-component', {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'ContextMenuSub': ContextMenuSub
|
||||
}
|
||||
|
|
|
@ -439,15 +439,18 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return [
|
||||
'p-column-filter p-fluid', {
|
||||
return ['p-column-filter p-fluid', {
|
||||
'p-column-filter-row': this.display === 'row',
|
||||
'p-column-filter-menu': this.display === 'menu'
|
||||
}
|
||||
]
|
||||
}];
|
||||
},
|
||||
overlayClass() {
|
||||
return [this.filterMenuClass, {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'}];
|
||||
return [this.filterMenuClass, {
|
||||
'p-column-filter-overlay p-component p-fluid': true,
|
||||
'p-column-filter-overlay-menu': this.display === 'menu',
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
showMenuButton() {
|
||||
return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);
|
||||
|
|
|
@ -273,7 +273,9 @@ export default {
|
|||
dialogClass() {
|
||||
return ['p-dialog p-component', {
|
||||
'p-dialog-rtl': this.rtl,
|
||||
'p-dialog-maximized': this.maximizable && this.maximized
|
||||
'p-dialog-maximized': this.maximizable && this.maximized,
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
maximizeIconClass() {
|
||||
|
|
|
@ -629,7 +629,10 @@ export default {
|
|||
];
|
||||
},
|
||||
panelStyleClass() {
|
||||
return ['p-dropdown-panel p-component', this.panelClass];
|
||||
return ['p-dropdown-panel p-component', this.panelClass, {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
label() {
|
||||
let selectedOption = this.getSelectedOption();
|
||||
|
|
|
@ -171,7 +171,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
maskContentClass() {
|
||||
return ['p-galleria-mask p-component-overlay', this.maskClass];
|
||||
return ['p-galleria-mask p-component-overlay', this.maskClass, {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
@ -197,7 +197,9 @@ export default {
|
|||
computed: {
|
||||
containerClass() {
|
||||
return ['p-menu p-component', {
|
||||
'p-menu-overlay': this.popup
|
||||
'p-menu-overlay': this.popup,
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
|
|
@ -521,28 +521,25 @@ export default {
|
|||
}
|
||||
},
|
||||
containerClass() {
|
||||
return [
|
||||
'p-multiselect p-component p-inputwrapper',
|
||||
{
|
||||
return ['p-multiselect p-component p-inputwrapper', {
|
||||
'p-multiselect-chip': this.display === 'chip',
|
||||
'p-disabled': this.disabled,
|
||||
'p-focus': this.focused,
|
||||
'p-inputwrapper-filled': this.modelValue && this.modelValue.length,
|
||||
'p-inputwrapper-focus': this.focused || this.overlayVisible
|
||||
}
|
||||
];
|
||||
}];
|
||||
},
|
||||
labelClass() {
|
||||
return [
|
||||
'p-multiselect-label',
|
||||
{
|
||||
return ['p-multiselect-label', {
|
||||
'p-placeholder': this.label === this.placeholder,
|
||||
'p-multiselect-label-empty': !this.placeholder && (!this.modelValue || this.modelValue.length === 0)
|
||||
}
|
||||
];
|
||||
}];
|
||||
},
|
||||
panelStyleClass() {
|
||||
return ['p-multiselect-panel p-component', this.panelClass];
|
||||
return ['p-multiselect-panel p-component', this.panelClass, {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
label() {
|
||||
let label;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Teleport :to="appendTo">
|
||||
<transition name="p-overlaypanel" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave">
|
||||
<div class="p-overlaypanel p-component" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
|
||||
<div :class="containerClass" v-if="visible" :ref="containerRef" v-bind="$attrs" @click="onOverlayClick">
|
||||
<div class="p-overlaypanel-content" @click="onContentClick">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
@ -250,6 +250,12 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-overlaypanel p-component', {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
attributeSelector() {
|
||||
return UniqueComponentId();
|
||||
}
|
||||
|
|
|
@ -258,7 +258,10 @@ export default {
|
|||
}];
|
||||
},
|
||||
panelStyleClass() {
|
||||
return ['p-password-panel p-component', this.panelClass];
|
||||
return ['p-password-panel p-component', this.panelClass, {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
toggleIconClass() {
|
||||
return this.unmasked ? 'pi pi-eye-slash' : 'pi pi-eye';
|
||||
|
|
|
@ -2,10 +2,12 @@
|
|||
<Teleport to="body">
|
||||
<transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
|
||||
<div :class="containerClass" v-if="visible" :ref="containerRef" role="complementary" :aria-modal="modal" v-bind="$attrs">
|
||||
<div class="p-sidebar-content">
|
||||
<button class="p-sidebar-close p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
|
||||
<div class="p-sidebar-header">
|
||||
<button class="p-sidebar-close p-sidebar-icon p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
|
||||
<span class="p-sidebar-close-icon pi pi-times" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-sidebar-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -152,7 +154,9 @@ export default {
|
|||
computed: {
|
||||
containerClass() {
|
||||
return ['p-sidebar p-component p-sidebar-' + this.position , {
|
||||
'p-sidebar-active': this.visible
|
||||
'p-sidebar-active': this.visible,
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
fullScreen() {
|
||||
|
@ -169,21 +173,25 @@ export default {
|
|||
.p-sidebar {
|
||||
position: fixed;
|
||||
transition: transform .3s;
|
||||
overflow: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-sidebar-content {
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.p-sidebar-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
.p-sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.p-sidebar-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.p-sidebar-mask {
|
||||
|
|
|
@ -90,7 +90,7 @@ export default {
|
|||
if (this.isTabPanel(child)) {
|
||||
tabs.push(child);
|
||||
}
|
||||
else if (child.children.length > 0) {
|
||||
else if (child.children && child.children instanceof Array) {
|
||||
child.children.forEach(nestedChild => {
|
||||
if (this.isTabPanel(nestedChild)) {
|
||||
tabs.push(nestedChild)
|
||||
|
|
|
@ -177,7 +177,9 @@ export default {
|
|||
computed: {
|
||||
containerClass() {
|
||||
return ['p-tieredmenu p-component', {
|
||||
'p-tieredmenu-overlay': this.popup
|
||||
'p-tieredmenu-overlay': this.popup,
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
|
|
@ -97,7 +97,10 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return 'p-toast p-component p-toast-' + this.position;
|
||||
return ['p-toast p-component p-toast-' + this.position, {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -376,7 +376,10 @@ export default {
|
|||
];
|
||||
},
|
||||
panelStyleClass() {
|
||||
return ['p-treeselect-panel p-component', this.panelClass];
|
||||
return ['p-treeselect-panel p-component', this.panelClass, {
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'p-ripple-disabled': this.$primevue.config.ripple === false
|
||||
}];
|
||||
},
|
||||
selectedNodes() {
|
||||
let selectedNodes = [];
|
||||
|
|
|
@ -113,7 +113,7 @@ router.beforeEach(function (to, from, next) {
|
|||
|
||||
const app = createApp(App);
|
||||
|
||||
app.config.globalProperties.$appState = reactive({inputStyle: 'outlined', darkTheme: false, codeSandbox: true, sourceType: 'options-api'});
|
||||
app.config.globalProperties.$appState = reactive({darkTheme: false, codeSandbox: true, sourceType: 'options-api'});
|
||||
|
||||
app.use(PrimeVue, {ripple: true});
|
||||
app.use(ToastService);
|
||||
|
|
|
@ -231,7 +231,7 @@ export default {
|
|||
<td>view</td>
|
||||
<td>string</td>
|
||||
<td>date</td>
|
||||
<td>Type of view to display, valid valids are "date" for datepicker and "month" for month picker.</td>
|
||||
<td>Type of view to display, valid values are "date" for datepicker and "month" for month picker.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>touchUI</td>
|
||||
|
|
|
@ -164,6 +164,24 @@ const items = [
|
|||
];
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Separator</h5>
|
||||
<p>Separators are special menuitems whose sole purpose is to divide menuitems. A separator is simply configured as below.</p>
|
||||
<pre v-code.script><code>
|
||||
const items = [
|
||||
{
|
||||
label: 'Item 1'
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Item 2'
|
||||
}
|
||||
];
|
||||
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
|
@ -20,7 +20,7 @@
|
|||
<img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
|
||||
</div>
|
||||
<div class="product-list-detail">
|
||||
<h5 class="p-mb-2">{{slotProps.item.name}}</h5>
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
|
@ -87,11 +87,13 @@ export default {
|
|||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -217,7 +217,7 @@ export default {
|
|||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
|
||||
</div>
|
||||
<div class="product-list-detail">
|
||||
<h5 class="p-mb-2">{{slotProps.item.name}}</h5>
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
|
@ -282,11 +282,13 @@ export default {
|
|||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -322,7 +324,7 @@ export default {
|
|||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
|
||||
</div>
|
||||
<div class="product-list-detail">
|
||||
<h5 class="p-mb-2">{{slotProps.item.name}}</h5>
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
|
@ -387,11 +389,13 @@ export default {
|
|||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
<img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
|
||||
</div>
|
||||
<div class="product-list-detail">
|
||||
<h5 class="p-mb-2">{{slotProps.item.name}}</h5>
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
|
@ -90,11 +90,13 @@ export default {
|
|||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -282,7 +282,7 @@ export default {
|
|||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
</div>
|
||||
<div class="product-list-detail">
|
||||
<h5 class="p-mb-2">{{slotProps.item.name}}</h5>
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
|
@ -341,11 +341,13 @@ export default {
|
|||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -384,7 +386,7 @@ export default {
|
|||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
</div>
|
||||
<div class="product-list-detail">
|
||||
<h5 class="p-mb-2">{{slotProps.item.name}}</h5>
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
|
@ -442,11 +444,13 @@ export default {
|
|||
.product-category-icon {
|
||||
vertical-align: middle;
|
||||
margin-right: .5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.product-category {
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -218,6 +218,21 @@ const app = createApp(App);
|
|||
|
||||
app.use(PrimeVue, {ripple: true});
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Outlined vs Filled Input Styles</h5>
|
||||
<p>Input fields come in two styles, default is <i>outlined</i> with borders around the field whereas <i>filled</i> alternative adds a background color
|
||||
to the field. Applying <i>p-input-filled</i> to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application,
|
||||
use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog
|
||||
will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputStyle to 'filled' at PrimeVue configuration as well.</p>
|
||||
|
||||
<pre v-code.script><code>
|
||||
import {createApp} from 'vue';
|
||||
import PrimeVue from 'primevue/config';
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(PrimeVue, {inputStyle: 'filled'});
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>ZIndex Layering</h5>
|
||||
|
|
Loading…
Reference in New Issue