Fixed #1977
Tuğçe Küçükoğlu
Tuğçe Küçükoğlu
parent
f6fbaeb6f3
commit
8b872e37c2
|
|
@ -55,7 +55,7 @@
|
|||
"gulp-uglify": "^3.0.2",
|
||||
"gulp-uglifycss": "^1.0.6",
|
||||
"sass": "^1.45.0",
|
||||
"primeflex": "2.0.0",
|
||||
"primeflex": "3.1.2",
|
||||
"primeicons": "5.0.0",
|
||||
"prismjs": "^1.15.0",
|
||||
"quill": "^1.3.7",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="layout-wrapper" :class="containerClass">
|
||||
<div class="layout-news" v-if="newsActive">
|
||||
<div class="layout-news-container" @click="redirect">
|
||||
<img class="layout-news-logo p-ml-2" src="./assets/images/topbar-primeblocks-device.png">
|
||||
<img class="layout-news-logo ml-2" src="./assets/images/topbar-primeblocks-device.png">
|
||||
<a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button">
|
||||
Read More
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -26,26 +26,26 @@
|
|||
<p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
|
||||
|
||||
<h5>Bootstrap</h5>
|
||||
<div class="p-grid free-themes">
|
||||
<div class="p-col-3">
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')">
|
||||
<img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
|
||||
</button>
|
||||
<span>Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')">
|
||||
<img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" />
|
||||
</button>
|
||||
<span>Purple</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)">
|
||||
<img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
|
||||
</button>
|
||||
<span>Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)">
|
||||
<img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" />
|
||||
</button>
|
||||
|
|
@ -54,26 +54,26 @@
|
|||
</div>
|
||||
|
||||
<h5>Material Design</h5>
|
||||
<div class="p-grid free-themes">
|
||||
<div class="p-col-3">
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')">
|
||||
<img src="demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
|
||||
</button>
|
||||
<span>Indigo</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')">
|
||||
<img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" />
|
||||
</button>
|
||||
<span>Deep Purple</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)">
|
||||
<img src="demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
|
||||
</button>
|
||||
<span>Indigo</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)">
|
||||
<img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" />
|
||||
</button>
|
||||
|
|
@ -82,26 +82,26 @@
|
|||
</div>
|
||||
|
||||
<h5>Material Design Compact</h5>
|
||||
<div class="p-grid free-themes">
|
||||
<div class="p-col-3">
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')">
|
||||
<img src="demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/>
|
||||
</button>
|
||||
<span>Indigo</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')">
|
||||
<img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" />
|
||||
</button>
|
||||
<span>Deep Purple</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)">
|
||||
<img src="demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" />
|
||||
</button>
|
||||
<span>Indigo</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)">
|
||||
<img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" />
|
||||
</button>
|
||||
|
|
@ -110,8 +110,8 @@
|
|||
</div>
|
||||
|
||||
<h5>Tailwind</h5>
|
||||
<div class="p-grid free-themes">
|
||||
<div class="p-col-3">
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')">
|
||||
<img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light"/>
|
||||
</button>
|
||||
|
|
@ -120,8 +120,8 @@
|
|||
</div>
|
||||
|
||||
<h5>Fluent UI</h5>
|
||||
<div class="p-grid free-themes">
|
||||
<div class="p-col-3">
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')">
|
||||
<img src="demo/images/themes/fluent-light.png" alt="Fluent Light"/>
|
||||
</button>
|
||||
|
|
@ -129,51 +129,51 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="p-d-flex p-ai-center">PrimeOne Design - 2022 <Tag class="p-ml-3" value="NEW" rounded severity="success"></Tag></h5>
|
||||
<div class="p-grid free-themes">
|
||||
<div class="p-col-3">
|
||||
<h5 class="flex align-items-center">PrimeOne Design - 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></h5>
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
|
||||
<img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
|
||||
</button>
|
||||
<span>Lara Light Indigo</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')">
|
||||
<img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
|
||||
</button>
|
||||
<span>Lara Light Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')">
|
||||
<img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
|
||||
</button>
|
||||
<span>Lara Light Purple</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')">
|
||||
<img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
|
||||
</button>
|
||||
<span>Lara Light Teal</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)">
|
||||
<img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
|
||||
</button>
|
||||
<span>Lara Dark Indigo</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)">
|
||||
<img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
|
||||
</button>
|
||||
<span>Lara Dark Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)">
|
||||
<img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
|
||||
</button>
|
||||
<span>Lara Dark Purple</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)">
|
||||
<img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
|
||||
</button>
|
||||
|
|
@ -182,74 +182,74 @@
|
|||
</div>
|
||||
|
||||
<h5>PrimeOne Design - 2021</h5>
|
||||
<div class="p-grid free-themes">
|
||||
<div class="p-col-3">
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')">
|
||||
<img src="demo/images/themes/saga-blue.png" alt="Saga Blue" />
|
||||
</button>
|
||||
<span>Saga Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'saga-green')">
|
||||
<img src="demo/images/themes/saga-green.png" alt="Saga Green" />
|
||||
</button>
|
||||
<span>Saga Green</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')">
|
||||
<img src="demo/images/themes/saga-orange.png" alt="Saga Orange" />
|
||||
</button>
|
||||
<span>Saga Orange</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')">
|
||||
<img src="demo/images/themes/saga-purple.png" alt="Saga Purple" />
|
||||
</button>
|
||||
<span>Saga Purple</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)">
|
||||
<img src="demo/images/themes/vela-blue.png" alt="Vela Blue" />
|
||||
</button>
|
||||
<span>Vela Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)">
|
||||
<img src="demo/images/themes/vela-green.png" alt="Vela Green" />
|
||||
</button>
|
||||
<span>Vela Green</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)">
|
||||
<img src="demo/images/themes/vela-orange.png" alt="Vela Orange" />
|
||||
</button>
|
||||
<span>Vela Orange</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)">
|
||||
<img src="demo/images/themes/vela-purple.png" alt="Vela Purple" />
|
||||
</button>
|
||||
<span>Vela Purple</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)">
|
||||
<img src="demo/images/themes/arya-blue.png" alt="Arya Blue" />
|
||||
</button>
|
||||
<span>Arya Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)">
|
||||
<img src="demo/images/themes/arya-green.png" alt="Arya Green" />
|
||||
</button>
|
||||
<span>Arya Green</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)">
|
||||
<img src="demo/images/themes/arya-orange.png" alt="Arya Orange" />
|
||||
</button>
|
||||
<span>Arya Orange</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)">
|
||||
<img src="demo/images/themes/arya-purple.png" alt="Arya Purple" />
|
||||
</button>
|
||||
|
|
@ -259,38 +259,38 @@
|
|||
|
||||
<h4>Premium Themes</h4>
|
||||
<p>Premium themes are only available exclusively for <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a> subscribers and therefore not included in PrimeVue core.</p>
|
||||
<div class="p-grid free-themes">
|
||||
<div class="p-col-3">
|
||||
<div class="grid free-themes">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
|
||||
<img src="demo/images/themes/soho-light.png" alt="Soho Light" />
|
||||
</button>
|
||||
<span>Soho Light</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
|
||||
<img src="demo/images/themes/soho-dark.png" alt="Soho Dark" />
|
||||
</button>
|
||||
<span>Soho Dark</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
|
||||
<img src="demo/images/themes/viva-light.svg" alt="Viva Light" />
|
||||
</button>
|
||||
<span>Viva Light</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
|
||||
<img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" />
|
||||
</button>
|
||||
<span>Viva Dark</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'mira')">
|
||||
<img src="demo/images/themes/mira.jpg" alt="Mira" />
|
||||
</button>
|
||||
<span>Mira</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<div class="col-3">
|
||||
<button class="p-link" type="button" @click="changeTheme($event, 'nano')">
|
||||
<img src="demo/images/themes/nano.jpg" alt="Mira" />
|
||||
</button>
|
||||
|
|
@ -300,63 +300,63 @@
|
|||
|
||||
<h4>Admin Templates</h4>
|
||||
<p>Beautifully crafted <a href="https://cli.vuejs.org">Vue CLI</a> application templates by the PrimeTek design team.</p>
|
||||
<div class="p-grid premium-themes">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="grid premium-themes">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/sakai-vue">
|
||||
<img alt="Ultima" src="./assets/images/layouts/sakai-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/atlantis-vue">
|
||||
<img alt="Atlantis" src="./assets/images/layouts/atlantis-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/freya-vue">
|
||||
<img alt="Freya" src="./assets/images/layouts/freya-vue.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/ultima-vue">
|
||||
<img alt="Ultima" src="./assets/images/layouts/ultima-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/diamond-vue">
|
||||
<img alt="Diamond" src="./assets/images/layouts/diamond-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/sapphire-vue">
|
||||
<img alt="Sapphire" src="./assets/images/layouts/sapphire-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/serenity-vue">
|
||||
<img alt="Serenity" src="./assets/images/layouts/serenity-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/babylon-vue">
|
||||
<img alt="Babylon" src="./assets/images/layouts/babylon-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/avalon-vue">
|
||||
<img alt="Avalon" src="./assets/images/layouts/avalon-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/apollo-vue">
|
||||
<img alt="Apollo" src="./assets/images/layouts/apollo-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/roma-vue">
|
||||
<img alt="Roma" src="./assets/images/layouts/roma-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<a href="https://www.primefaces.org/layouts/prestige-vue">
|
||||
<img alt="Prestige" src="./assets/images/layouts/prestige-vue.jpg">
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="app-demoactions p-d-flex p-ai-end p-jc-end p-mt-3">
|
||||
<div class="app-demoactions flex align-items-end justify-content-end mt-3">
|
||||
<Button class="p-button-text p-button-rounded p-button-plain p-button-lg p-button-icon-only" @click="toggleMenu">
|
||||
<svg role="img" viewBox="0 0 24 24" width="17" height="17" fill="var(--text-color-secondary)" style="display:block">
|
||||
<path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"/>
|
||||
</svg>
|
||||
</Button>
|
||||
<Button icon="pi pi-github" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="viewOnGitHub"></Button>
|
||||
<Button icon="pi pi-info-circle" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="scrollToDocs"></Button>
|
||||
<Button icon="pi pi-github" class="p-button-text p-button-rounded p-button-plain p-button-lg ml-2" @click="viewOnGitHub"></Button>
|
||||
<Button icon="pi pi-info-circle" class="p-button-text p-button-rounded p-button-plain p-button-lg ml-2" @click="scrollToDocs"></Button>
|
||||
<Menu ref="menu" :model="items" :popup="true" style="width:14rem"/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ export default {
|
|||
<!-- PrimeVue -->
|
||||
<link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
|
||||
|
||||
<!-- Dependencies -->
|
||||
|
|
|
|||
|
|
@ -6,10 +6,10 @@
|
|||
</div>
|
||||
|
||||
<div class="layout-footer-right">
|
||||
<a href="https://github.com/primefaces/primevue" class="p-mr-3">
|
||||
<a href="https://github.com/primefaces/primevue" class="mr-3">
|
||||
<i class="pi pi-github"></i>
|
||||
</a>
|
||||
<a href="https://twitter.com/primevue" class="p-mr-3">
|
||||
<a href="https://twitter.com/primevue" class="mr-3">
|
||||
<i class="pi pi-twitter"></i>
|
||||
</a>
|
||||
<a href="https://discord.com/invite/gzKFYnpmCY">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="app-inputstyleswitch">
|
||||
<h4>Input Style</h4>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="input_outlined" name="inputstyle" value="outlined" :modelValue="value" @update:modelValue="onChange" />
|
||||
<label for="input_outlined">Outlined</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="input_filled" name="inputstyle" value="filled" :modelValue="value" @update:modelValue="onChange" />
|
||||
<label for="input_filled">Filled</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<li class="topbar-submenu-header">FLUENT UI</li>
|
||||
<li><a @click="changeTheme($event, 'fluent-light')"><img src="demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a></li>
|
||||
|
||||
<li class="topbar-submenu-header p-d-flex p-ai-center">PRIMEONE 2022 <Tag class="p-ml-3" value="NEW" rounded severity="success"></Tag></li>
|
||||
<li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
|
||||
<li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li>
|
||||
<li><a @click="changeTheme($event, 'lara-light-blue')"><img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li>
|
||||
<li><a @click="changeTheme($event, 'lara-light-purple')"><img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li>
|
||||
|
|
|
|||
|
|
@ -129,7 +129,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.p-grid > div {
|
||||
.grid > div {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
|
||||
|
|
|
|||
|
|
@ -95,7 +95,6 @@ pre[class*="language-"] {
|
|||
border-left: 10px solid var(--surface-d) !important;
|
||||
box-shadow: none !important;
|
||||
background: var(--surface-e) !important;
|
||||
margin: 1em 0;
|
||||
color: var(--text-color);
|
||||
font-size: 14px;
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
text-align: center;
|
||||
padding: 2rem;
|
||||
|
||||
.p-col-12 {
|
||||
.col-12 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.p-grid > div {
|
||||
.grid > div {
|
||||
padding: 2rem .5rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -171,7 +171,7 @@
|
|||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.p-md-6:last-child {
|
||||
.md:col-6:last-child {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<div class="p-treetable-header" v-if="$slots.header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||
<TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
|
||||
<template #start v-if="$slots.paginatorstart">
|
||||
<slot name="paginatorstart"></slot>
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
|
||||
<div class="features">
|
||||
<h4>Features</h4>
|
||||
<p>Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
|
||||
<p>Congratulations! <span role="img" aria-label="celebrate" class="mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="feature-card">
|
||||
<img alt="components" src="../assets/images/home/vue-components.png" />
|
||||
<div class="feature-card-detail">
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="feature-card">
|
||||
<img alt="opensource" src="../assets/images/home/vue-opensource.png" />
|
||||
<div class="feature-card-detail">
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="feature-card">
|
||||
<img alt="themes" src="../assets/images/home/vue-themes.png" />
|
||||
<div class="feature-card-detail">
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="feature-card">
|
||||
<img alt="templates" src="../assets/images/home/vue-templates.png" />
|
||||
<div class="feature-card-detail">
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="feature-card">
|
||||
<img alt="accesibility" src="../assets/images/home/vue-accesibility.png" />
|
||||
<div class="feature-card-detail">
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="feature-card">
|
||||
<img alt="pro" src="../assets/images/home/vue-pro.png" />
|
||||
<div class="feature-card-detail">
|
||||
|
|
@ -68,7 +68,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="feature-card">
|
||||
<img alt="productivity" src="../assets/images/home/vue-productivity.png" />
|
||||
<div class="feature-card-detail">
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="feature-card">
|
||||
<img alt="community" src="../assets/images/home/vue-community.png" />
|
||||
<div class="feature-card-detail">
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="feature-card">
|
||||
<img alt="mobile" src="../assets/images/home/vue-mobile.png" />
|
||||
<div class="feature-card-detail">
|
||||
|
|
@ -109,19 +109,19 @@
|
|||
<div class="whouses">
|
||||
<h4>Key Users</h4>
|
||||
<p>The creator of PrimeVue is PrimeTek Informatics, the distinguished component library vendor who built popular open source projects such as PrimeFaces, PrimeNG and PrimeReact over the past years.</p>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6 p-md-2"><img alt="airbus" src="../assets/images/home/airbus.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="amex" src="../assets/images/home/amex.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="bmw" src="../assets/images/home/nvidia.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="ebay" src="../assets/images/home/ebay.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="ford" src="../assets/images/home/ford.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="fox" src="../assets/images/home/fox.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="lufthansa" src="../assets/images/home/lufthansa.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="mercedes" src="../assets/images/home/mercedes.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="sap" src="../assets/images/home/sap.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="unicredit" src="../assets/images/home/unicredit.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="verizon" src="../assets/images/home/verizon.svg"/></div>
|
||||
<div class="p-col-6 p-md-2"><img alt="viacom" src="../assets/images/home/viacom.svg"/></div>
|
||||
<div class="grid">
|
||||
<div class="col-6 md:col-2"><img alt="airbus" src="../assets/images/home/airbus.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="amex" src="../assets/images/home/amex.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="bmw" src="../assets/images/home/nvidia.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="ebay" src="../assets/images/home/ebay.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="ford" src="../assets/images/home/ford.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="fox" src="../assets/images/home/fox.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="lufthansa" src="../assets/images/home/lufthansa.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="mercedes" src="../assets/images/home/mercedes.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="sap" src="../assets/images/home/sap.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="unicredit" src="../assets/images/home/unicredit.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="verizon" src="../assets/images/home/verizon.svg"/></div>
|
||||
<div class="col-6 md:col-2"><img alt="viacom" src="../assets/images/home/viacom.svg"/></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -129,68 +129,68 @@
|
|||
<h4>Premium Application Templates</h4>
|
||||
<p>Gorgeous Vue-CLI application templates designed by professional designers and implemented by Vue Experts to help you reach your goals in no time.</p>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/sakai-vue">
|
||||
<img alt="Sakai" src="../assets/images/layouts/sakai-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/atlantis-vue">
|
||||
<img alt="Atlantis" src="../assets/images/layouts/atlantis-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/freya-vue">
|
||||
<img alt="Freya" src="../assets/images/layouts/freya-vue.png">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/ultima-vue">
|
||||
<img alt="Ultima" src="../assets/images/layouts/ultima-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/diamond-vue">
|
||||
<img alt="Diamond" src="../assets/images/layouts/diamond-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/sapphire-vue">
|
||||
<img alt="Sapphire" src="../assets/images/layouts/sapphire-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/serenity-vue">
|
||||
<img alt="Serenity" src="../assets/images/layouts/serenity-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/avalon-vue">
|
||||
<img alt="Avalon" src="../assets/images/layouts/avalon-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/babylon-vue">
|
||||
<img alt="Babylon" src="../assets/images/layouts/babylon-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/apollo-vue">
|
||||
<img alt="Apollo" src="../assets/images/layouts/apollo-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/roma-vue">
|
||||
<img alt="Roma" src="../assets/images/layouts/roma-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<a href="https://www.primefaces.org/layouts/prestige-vue">
|
||||
<img alt="Prestige" src="../assets/images/layouts/prestige-vue.jpg">
|
||||
</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3"></div>
|
||||
<div class="col-12 md:col-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="primevue-designer">
|
||||
|
|
@ -199,8 +199,8 @@
|
|||
and a Vue-CLI application to test your themes with ease along with built-in theme samples that are embedded in PrimeVue Core.</p>
|
||||
|
||||
<p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> to learn more about the features and interact with the <a href="https://www.primefaces.org/designer-vue">live editor</a>.</p>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<img alt="PrimeVue Designer" src="../assets/images/primevue-designer.jpg" />
|
||||
|
||||
</div>
|
||||
|
|
@ -208,40 +208,40 @@
|
|||
</div>
|
||||
|
||||
<div class="primeblocks">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<h4 class="pro-title">Vue UI Blocks Powered by PrimeVue</h4>
|
||||
<p>150+ ready to use UI blocks to build spectacular applications in no time.</p>
|
||||
<a class="action-button" href="https://www.primefaces.org/primeblocks-vue">LEARN MORE</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6 p-text-center">
|
||||
<div class="col-12 md:col-6 text-center">
|
||||
<img alt="primeblocks-vue" src="../assets/images/primeblocks.png" class="section-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="primeflex">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<h3 class="pro-title">PrimeFlex: Perfect CSS Utility Companion</h3>
|
||||
<p>PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.</p>
|
||||
<a class="action-button" href="https://www.primefaces.org/primeflex">LEARN MORE</a>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6 p-text-center">
|
||||
<div class="col-12 md:col-6 text-center">
|
||||
<img alt="primeflex" src="../assets/images/primeflex.png" class="section-image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prosupport">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<h4>PrimeVue PRO Support</h4>
|
||||
<p>No time to wait for a response at forum or issue tracker? Then PrimeVue PRO Support is definitely for you.</p>
|
||||
<p>PrimeVUE PRO is an exceptional support service where you'll contact the PrimeTek via a private channel and receive assistance just in a couple of hours. Optionally PrimeVue PRO offers the ability to request changes and new features for the component library.</p>
|
||||
<router-link to="/support" class="action-button">LEARN MORE</router-link>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="col-12 md:col-6">
|
||||
<img alt="PRO" src="../assets/images/home/asset-pro.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -51,10 +51,10 @@
|
|||
</Accordion>
|
||||
|
||||
<h5>Programmatic</h5>
|
||||
<div class="p-pb-3">
|
||||
<div class="pb-3">
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
|
||||
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
|
||||
</div>
|
||||
|
||||
<Accordion v-model:activeIndex="active">
|
||||
|
|
|
|||
|
|
@ -370,10 +370,10 @@ export default {
|
|||
</Accordion>
|
||||
|
||||
<h5>Programmatic</h5>
|
||||
<div class="p-pb-3">
|
||||
<div class="pb-3">
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
|
||||
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
|
||||
</div>
|
||||
|
||||
<Accordion v-model:activeIndex="active">
|
||||
|
|
@ -499,10 +499,10 @@ export default {
|
|||
</Accordion>
|
||||
|
||||
<h5>Programmatic</h5>
|
||||
<div class="p-pb-3">
|
||||
<div class="pb-3">
|
||||
<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
|
||||
<Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
|
||||
<Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
|
||||
<Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
|
||||
</div>
|
||||
|
||||
<Accordion v-model:activeIndex="active">
|
||||
|
|
@ -630,10 +630,10 @@ export default {
|
|||
</p-accordion>
|
||||
|
||||
<h5>Programmatic</h5>
|
||||
<div class="p-pb-3">
|
||||
<div class="pb-3">
|
||||
<p-button @click="active = 0" class="p-button-text" label="Activate 1st"></p-button>
|
||||
<p-button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd"></p-button>
|
||||
<p-button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd"></p-button>
|
||||
<p-button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd"></p-button>
|
||||
<p-button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd"></p-button>
|
||||
</div>
|
||||
|
||||
<p-accordion v-model:active-index="active">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<h5>Grouped</h5>
|
||||
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
|
||||
<div>{{slotProps.item.label}}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -441,9 +441,9 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div class="p-ml-2">{{slotProps.item.label}}</div>
|
||||
<div class="ml-2">{{slotProps.item.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</AutoComplete>
|
||||
|
|
@ -453,7 +453,7 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div class="p-ml-2">{{slotProps.item.name}}</div>
|
||||
<div class="ml-2">{{slotProps.item.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</AutoComplete>
|
||||
|
|
@ -578,9 +578,9 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div class="p-ml-2">{{slotProps.item.label}}</div>
|
||||
<div class="ml-2">{{slotProps.item.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</AutoComplete>
|
||||
|
|
@ -590,7 +590,7 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div class="p-ml-2">{{slotProps.item.name}}</div>
|
||||
<div class="ml-2">{{slotProps.item.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</AutoComplete>
|
||||
|
|
@ -712,9 +712,9 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<p-autocomplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" option-group-label="label" option-group-children="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div class="p-ml-2">{{slotProps.item.label}}</div>
|
||||
<div class="ml-2">{{slotProps.item.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-autocomplete>
|
||||
|
|
@ -724,7 +724,7 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div class="p-ml-2">{{slotProps.item.name}}</div>
|
||||
<div class="ml-2">{{slotProps.item.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</p-autocomplete>
|
||||
|
|
|
|||
|
|
@ -9,26 +9,26 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label</h5>
|
||||
<Avatar label="P" class="p-mr-2" size="xlarge" />
|
||||
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
<Avatar label="P" class="mr-2" size="xlarge" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label - Circle</h5>
|
||||
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label - Badge</h5>
|
||||
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
|
||||
|
|
@ -36,26 +36,26 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon</h5>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Circle</h5>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Badge</h5>
|
||||
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
|
||||
|
|
@ -63,20 +63,20 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" />
|
||||
<Avatar image="demo/images/avatar/onyamalimba.png" class="p-mr-2" shape="circle" />
|
||||
<Avatar image="demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
|
||||
<Avatar image="demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Avatar Group</h5>
|
||||
<AvatarGroup class="p-mb-3">
|
||||
<AvatarGroup class="mb-3">
|
||||
<Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/>
|
||||
<Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/>
|
||||
<Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/>
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Image - Badge</h5>
|
||||
<Avatar image="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />
|
||||
|
|
|
|||
|
|
@ -190,26 +190,26 @@ export default {
|
|||
tabName: 'Options API Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label</h5>
|
||||
<Avatar label="P" class="p-mr-2" size="xlarge" />
|
||||
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
<Avatar label="P" class="mr-2" size="xlarge" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label - Circle</h5>
|
||||
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label - Badge</h5>
|
||||
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
|
||||
|
|
@ -217,26 +217,26 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon</h5>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Circle</h5>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Badge</h5>
|
||||
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
|
||||
|
|
@ -244,20 +244,20 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="large" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Avatar Group</h5>
|
||||
<AvatarGroup class="p-mb-3">
|
||||
<AvatarGroup class="mb-3">
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
|
|
@ -268,7 +268,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Image - Badge</h5>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
|
||||
|
|
@ -287,26 +287,26 @@ export default {
|
|||
tabName: 'Composition API Source',
|
||||
content: `
|
||||
<template>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label</h5>
|
||||
<Avatar label="P" class="p-mr-2" size="xlarge" />
|
||||
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
<Avatar label="P" class="mr-2" size="xlarge" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label - Circle</h5>
|
||||
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label - Badge</h5>
|
||||
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
|
||||
|
|
@ -314,26 +314,26 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon</h5>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Circle</h5>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Badge</h5>
|
||||
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
|
||||
|
|
@ -341,20 +341,20 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="large" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Avatar Group</h5>
|
||||
<AvatarGroup class="p-mb-3">
|
||||
<AvatarGroup class="mb-3">
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
|
|
@ -365,7 +365,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Image - Badge</h5>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
|
||||
|
|
@ -385,26 +385,26 @@ export default {
|
|||
<script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"><\\/script>
|
||||
<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label</h5>
|
||||
<p-avatar label="P" class="p-mr-2" size="xlarge"></p-avatar>
|
||||
<p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
|
||||
<p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
|
||||
<p-avatar label="P" class="mr-2" size="xlarge"></p-avatar>
|
||||
<p-avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
|
||||
<p-avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label - Circle</h5>
|
||||
<p-avatar label="P" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
|
||||
<p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
|
||||
<p-avatar label="P" class="mr-2" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
|
||||
<p-avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Label - Badge</h5>
|
||||
<p-avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4"></p-avatar>
|
||||
|
|
@ -412,26 +412,26 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon</h5>
|
||||
<p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="mr-2" size="xlarge"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Circle</h5>
|
||||
<p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
|
||||
<p-avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Badge</h5>
|
||||
<p-avatar icon="pi pi-user" size="xlarge" v-badge="4"></p-avatar>
|
||||
|
|
@ -439,20 +439,20 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle"></p-avatar>
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="xlarge" shape="circle"></p-avatar>
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" shape="circle"></p-avatar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>p-avatar Group</h5>
|
||||
<p-avatargroup class="p-mb-3">
|
||||
<p-avatargroup class="mb-3">
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
|
||||
|
|
@ -463,7 +463,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>Image - Badge</h5>
|
||||
<p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4"></p-avatar>
|
||||
|
|
|
|||
|
|
@ -11,24 +11,24 @@
|
|||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Numbers</h5>
|
||||
<Badge value="2" class="p-mr-2"></Badge>
|
||||
<Badge value="8" severity="success" class="p-mr-2"></Badge>
|
||||
<Badge value="4" severity="info" class="p-mr-2"></Badge>
|
||||
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
|
||||
<Badge value="2" class="mr-2"></Badge>
|
||||
<Badge value="8" severity="success" class="mr-2"></Badge>
|
||||
<Badge value="4" severity="info" class="mr-2"></Badge>
|
||||
<Badge value="12" severity="warning" class="mr-2"></Badge>
|
||||
<Badge value="3" severity="danger"></Badge>
|
||||
|
||||
<h5 class="p-mb-4">Positioned Badge</h5>
|
||||
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
|
||||
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
|
||||
<h5 class="mb-4">Positioned Badge</h5>
|
||||
<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
|
||||
<i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
|
||||
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
|
||||
|
||||
<h5>Button Badge</h5>
|
||||
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
|
||||
<Button type="button" label="Emails" badge="8" class="mr-2" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<Badge value="2" class="p-mr-2"></Badge>
|
||||
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
|
||||
<Badge value="2" class="mr-2"></Badge>
|
||||
<Badge value="4" class="mr-2" size="large" severity="warning"></Badge>
|
||||
<Badge value="6" size="xlarge" severity="success"></Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -206,24 +206,24 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Numbers</h5>
|
||||
<Badge value="2" class="p-mr-2"></Badge>
|
||||
<Badge value="8" severity="success" class="p-mr-2"></Badge>
|
||||
<Badge value="4" severity="info" class="p-mr-2"></Badge>
|
||||
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
|
||||
<Badge value="2" class="mr-2"></Badge>
|
||||
<Badge value="8" severity="success" class="mr-2"></Badge>
|
||||
<Badge value="4" severity="info" class="mr-2"></Badge>
|
||||
<Badge value="12" severity="warning" class="mr-2"></Badge>
|
||||
<Badge value="3" severity="danger"></Badge>
|
||||
|
||||
<h5 class="p-mb-4">Positioned Badge</h5>
|
||||
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
|
||||
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
|
||||
<h5 class="mb-4">Positioned Badge</h5>
|
||||
<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
|
||||
<i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
|
||||
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
|
||||
|
||||
<h5>Button Badge</h5>
|
||||
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
|
||||
<Button type="button" label="Emails" badge="8" class="mr-2" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<Badge value="2" class="p-mr-2"></Badge>
|
||||
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
|
||||
<Badge value="2" class="mr-2"></Badge>
|
||||
<Badge value="4" class="mr-2" size="large" severity="warning"></Badge>
|
||||
<Badge value="6" size="xlarge" severity="success"></Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -240,24 +240,24 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Numbers</h5>
|
||||
<Badge value="2" class="p-mr-2"></Badge>
|
||||
<Badge value="8" severity="success" class="p-mr-2"></Badge>
|
||||
<Badge value="4" severity="info" class="p-mr-2"></Badge>
|
||||
<Badge value="12" severity="warning" class="p-mr-2"></Badge>
|
||||
<Badge value="2" class="mr-2"></Badge>
|
||||
<Badge value="8" severity="success" class="mr-2"></Badge>
|
||||
<Badge value="4" severity="info" class="mr-2"></Badge>
|
||||
<Badge value="12" severity="warning" class="mr-2"></Badge>
|
||||
<Badge value="3" severity="danger"></Badge>
|
||||
|
||||
<h5 class="p-mb-4">Positioned Badge</h5>
|
||||
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
|
||||
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
|
||||
<h5 class="mb-4">Positioned Badge</h5>
|
||||
<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
|
||||
<i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
|
||||
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
|
||||
|
||||
<h5>Button Badge</h5>
|
||||
<Button type="button" label="Emails" badge="8" class="p-mr-2" />
|
||||
<Button type="button" label="Emails" badge="8" class="mr-2" />
|
||||
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<Badge value="2" class="p-mr-2"></Badge>
|
||||
<Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
|
||||
<Badge value="2" class="mr-2"></Badge>
|
||||
<Badge value="4" class="mr-2" size="large" severity="warning"></Badge>
|
||||
<Badge value="6" size="xlarge" severity="success"></Badge>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -273,24 +273,24 @@ export default {
|
|||
<script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<h5>Numbers</h5>
|
||||
<p-badge value="2" class="p-mr-2"></p-badge>
|
||||
<p-badge value="8" severity="success" class="p-mr-2"></p-badge>
|
||||
<p-badge value="4" severity="info" class="p-mr-2"></p-badge>
|
||||
<p-badge value="12" severity="warning" class="p-mr-2"></p-badge>
|
||||
<p-badge value="2" class="mr-2"></p-badge>
|
||||
<p-badge value="8" severity="success" class="mr-2"></p-badge>
|
||||
<p-badge value="4" severity="info" class="mr-2"></p-badge>
|
||||
<p-badge value="12" severity="warning" class="mr-2"></p-badge>
|
||||
<p-badge value="3" severity="danger"></p-badge>
|
||||
|
||||
<h5 class="p-mb-4">Positioned Badge</h5>
|
||||
<i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
|
||||
<i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
|
||||
<h5 class="mb-4">Positioned Badge</h5>
|
||||
<i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
|
||||
<i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
|
||||
<i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
|
||||
|
||||
<h5>Button Badge</h5>
|
||||
<p-button type="button" label="Emails" badge="8" class="p-mr-2"></p-button>
|
||||
<p-button type="button" label="Emails" badge="8" class="mr-2"></p-button>
|
||||
<p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
|
||||
|
||||
<h5>Sizes</h5>
|
||||
<p-badge value="2" class="p-mr-2"></p-badge>
|
||||
<p-badge value="4" class="p-mr-2" size="large" severity="warning"></p-badge>
|
||||
<p-badge value="2" class="mr-2"></p-badge>
|
||||
<p-badge value="4" class="mr-2" size="large" severity="warning"></p-badge>
|
||||
<p-badge value="6" size="xlarge" severity="success"></p-badge>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -115,12 +115,12 @@
|
|||
<Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
|
||||
|
||||
<h5>Templating</h5>
|
||||
<Button type="button" class="p-px-3">
|
||||
<Button type="button" class="px-3">
|
||||
<img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
|
||||
</Button>
|
||||
<Button type="button" class="p-button-outlined p-button-success">
|
||||
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
|
||||
<span class="p-ml-2 p-text-bold">PrimeVue</span>
|
||||
<span class="ml-2 font-bold">PrimeVue</span>
|
||||
</Button>
|
||||
|
||||
<h5>Button Set</h5>
|
||||
|
|
|
|||
|
|
@ -135,13 +135,13 @@ import Button from 'primevue/button';
|
|||
<h5>Templating</h5>
|
||||
<p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
|
||||
<pre v-code><code>
|
||||
<Button type="button" class="p-px-3">
|
||||
<Button type="button" class="px-3">
|
||||
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/>
|
||||
</Button>
|
||||
|
||||
<Button type="button" class="p-button-outlined p-button-success">
|
||||
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
|
||||
<span class="p-ml-2 p-text-bold">PrimeVue</span>
|
||||
<span class="ml-2 font-bold">PrimeVue</span>
|
||||
</Button>
|
||||
|
||||
</code></pre>
|
||||
|
|
@ -360,12 +360,12 @@ export default {
|
|||
<Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
|
||||
|
||||
<h5>Templating</h5>
|
||||
<Button type="button" class="p-px-3">
|
||||
<Button type="button" class="px-3">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
|
||||
</Button>
|
||||
<Button type="button" class="p-button-outlined p-button-success">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
|
||||
<span class="p-ml-2 p-text-bold">PrimeVue</span>
|
||||
<span class="ml-2 font-bold">PrimeVue</span>
|
||||
</Button>
|
||||
|
||||
<h5>Button Set</h5>
|
||||
|
|
@ -550,12 +550,12 @@ export default {
|
|||
<Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
|
||||
|
||||
<h5>Templating</h5>
|
||||
<Button type="button" class="p-px-3">
|
||||
<Button type="button" class="px-3">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
|
||||
</Button>
|
||||
<Button type="button" class="p-button-outlined p-button-success">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
|
||||
<span class="p-ml-2 p-text-bold">PrimeVue</span>
|
||||
<span class="ml-2 font-bold">PrimeVue</span>
|
||||
</Button>
|
||||
|
||||
<h5>Button Set</h5>
|
||||
|
|
@ -739,12 +739,12 @@ export default({
|
|||
<p-button type="button" label="Search" :loading="loading[3]" @click="load(3)"></p-button>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p-button type="button" class="p-px-3">
|
||||
<p-button type="button" class="px-3">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
|
||||
</p-button>
|
||||
<p-button type="button" class="p-button-outlined p-button-success">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
|
||||
<span class="p-ml-2 p-text-bold">PrimeVue</span>
|
||||
<span class="ml-2 font-bold">PrimeVue</span>
|
||||
</p-button>
|
||||
|
||||
<h5>Button Set</h5>
|
||||
|
|
|
|||
|
|
@ -11,60 +11,60 @@
|
|||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Popup</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid formgrid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="basic">Basic</label>
|
||||
<Calendar id="basic" v-model="date1" autocomplete="off" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="dateformat">DateFormat</label>
|
||||
<Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="icon">Icon</label>
|
||||
<Calendar id="icon" v-model="date3" :showIcon="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="minmax">MinMax</label>
|
||||
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="disableddays">Disabled Days</label>
|
||||
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="multiple">Multiple</label>
|
||||
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="range">Range</label>
|
||||
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="buttonbar">Button Bar</label>
|
||||
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="time24">Time / 24h</label>
|
||||
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="time12">Time / 12h</label>
|
||||
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="monthpicker">Month Picker</label>
|
||||
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="yearpicker">Year Picker</label>
|
||||
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="multiplemonths">Multiple Months</label>
|
||||
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="datetemplate">Date Template</label>
|
||||
<Calendar id="datetemplate" v-model="date12">
|
||||
<template #date="slotProps">
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
</template>
|
||||
</Calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="touchUI">TouchUI</label>
|
||||
<Calendar id="touchUI" v-model="date13" :touchUI="true" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -616,60 +616,60 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Popup</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid formgrid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="basic">Basic</label>
|
||||
<Calendar id="basic" v-model="date1" autocomplete="off" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="dateformat">DateFormat</label>
|
||||
<Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="icon">Icon</label>
|
||||
<Calendar id="icon" v-model="date3" :showIcon="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="minmax">MinMax</label>
|
||||
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="disableddays">Disabled Days</label>
|
||||
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="multiple">Multiple</label>
|
||||
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="range">Range</label>
|
||||
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="buttonbar">Button Bar</label>
|
||||
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="time24">Time / 24h</label>
|
||||
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="time12">Time / 12h</label>
|
||||
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="monthpicker">Month Picker</label>
|
||||
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="yearpicker">Year Picker</label>
|
||||
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="multiplemonths">Multiple Months</label>
|
||||
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="datetemplate">Date Template</label>
|
||||
<Calendar id="datetemplate" v-model="date12">
|
||||
<template #date="slotProps">
|
||||
|
|
@ -678,7 +678,7 @@ export default {
|
|||
</template>
|
||||
</Calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="touchUI">TouchUI</label>
|
||||
<Calendar id="touchUI" v-model="date13" :touchUI="true" />
|
||||
</div>
|
||||
|
|
@ -759,60 +759,60 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Popup</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid formgrid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="basic">Basic</label>
|
||||
<Calendar id="basic" v-model="date1" autocomplete="off" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="dateformat">DateFormat</label>
|
||||
<Calendar id="dateformat" v-model="date2" dateFormat="mm-dd-yy" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="icon">Icon</label>
|
||||
<Calendar id="icon" v-model="date3" :showIcon="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="minmax">MinMax</label>
|
||||
<Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="disableddays">Disabled Days</label>
|
||||
<Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="multiple">Multiple</label>
|
||||
<Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="range">Range</label>
|
||||
<Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="buttonbar">Button Bar</label>
|
||||
<Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="time24">Time / 24h</label>
|
||||
<Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="time12">Time / 12h</label>
|
||||
<Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="monthpicker">Month Picker</label>
|
||||
<Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="yearpicker">Year Picker</label>
|
||||
<Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="multiplemonths">Multiple Months</label>
|
||||
<Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="datetemplate">Date Template</label>
|
||||
<Calendar id="datetemplate" v-model="date12">
|
||||
<template #date="slotProps">
|
||||
|
|
@ -821,7 +821,7 @@ export default {
|
|||
</template>
|
||||
</Calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="touchUI">TouchUI</label>
|
||||
<Calendar id="touchUI" v-model="date13" :touchUI="true" />
|
||||
</div>
|
||||
|
|
@ -902,60 +902,60 @@ export default {
|
|||
imports: `<script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<h5>Popup</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid formgrid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="basic">Basic</label>
|
||||
<p-calendar id="basic" v-model="date1" autocomplete="off"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="dateformat">DateFormat</label>
|
||||
<p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="icon">Icon</label>
|
||||
<p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="minmax">MinMax</label>
|
||||
<p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="disableddays">Disabled Days</label>
|
||||
<p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="multiple">Multiple</label>
|
||||
<p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="range">Range</label>
|
||||
<p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="buttonbar">Button Bar</label>
|
||||
<p-calendar id="buttonbar" v-model="date6" :show-button-bar="true"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="time24">Time / 24h</label>
|
||||
<p-calendar id="time24" v-model="date7" :show-time="true" :show-seconds="true"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="time12">Time / 12h</label>
|
||||
<p-calendar id="time12" v-model="date8" :time-only="true" hour-format="12"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="monthpicker">Month Picker</label>
|
||||
<p-calendar id="monthpicker" v-model="date9" view="month" date-format="mm/yy"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="yearpicker">Year Picker</label>
|
||||
<p-calendar id="yearpicker" v-model="date10" view="year" date-format="yy"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="multiplemonths">Multiple Months</label>
|
||||
<p-calendar id="multiplemonths" v-model="date11" :number-of-months="3" :responsive-options="responsiveOptions"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="datetemplate">Date Template</label>
|
||||
<p-calendar id="datetemplate" v-model="date12">
|
||||
<template #date="slotProps">
|
||||
|
|
@ -964,7 +964,7 @@ export default {
|
|||
</template>
|
||||
</p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="touchUI">TouchUI</label>
|
||||
<p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,16 +17,16 @@
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<div class="car-buttons mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,16 +44,16 @@
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<div class="car-buttons mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,16 +72,16 @@
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<div class="car-buttons mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -316,16 +316,16 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<div class="car-buttons mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -343,16 +343,16 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<div class="car-buttons mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -371,16 +371,16 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<div class="car-buttons mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -458,16 +458,16 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<div class="car-buttons mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -485,16 +485,16 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<div class="car-buttons mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -513,16 +513,16 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
|
||||
<div class="car-buttons mt-5">
|
||||
<Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
|
||||
<Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -598,16 +598,16 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<p-button icon="pi pi-search" class="p-button p-button-rounded p-mr-2"></p-button>
|
||||
<p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2"></p-button>
|
||||
<div class="car-buttons mt-5">
|
||||
<p-button icon="pi pi-search" class="p-button p-button-rounded mr-2"></p-button>
|
||||
<p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2"></p-button>
|
||||
<p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -625,16 +625,16 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<p-button icon="pi pi-search" class="p-button p-button-rounded p-mr-2"></p-button>
|
||||
<p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2"></p-button>
|
||||
<div class="car-buttons mt-5">
|
||||
<p-button icon="pi pi-search" class="p-button p-button-rounded mr-2"></p-button>
|
||||
<p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2"></p-button>
|
||||
<p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -653,16 +653,16 @@ export default {
|
|||
<template #item="slotProps">
|
||||
<div class="product-item">
|
||||
<div class="product-item-content">
|
||||
<div class="p-mb-3">
|
||||
<div class="mb-3">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="p-mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
|
||||
<h4 class="mb-1">{{slotProps.data.name}}</h4>
|
||||
<h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
|
||||
<div class="car-buttons p-mt-5">
|
||||
<p-button icon="pi pi-search" class="p-button p-button-rounded p-mr-2"></p-button>
|
||||
<p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2"></p-button>
|
||||
<div class="car-buttons mt-5">
|
||||
<p-button icon="pi pi-search" class="p-button p-button-rounded mr-2"></p-button>
|
||||
<p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2"></p-button>
|
||||
<p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" />
|
||||
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
|
||||
<i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
|
||||
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -120,8 +120,8 @@ data() {
|
|||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" />
|
||||
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
|
||||
<i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
|
||||
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -385,8 +385,8 @@ export default {
|
|||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
|
||||
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
|
||||
<i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
|
||||
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -507,8 +507,8 @@ img {
|
|||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
|
||||
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
|
||||
<i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
|
||||
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -631,8 +631,8 @@ img {
|
|||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
|
||||
<i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
|
||||
<i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
|
||||
<i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
|
||||
<span>{{slotProps.option.cname || slotProps.option.name}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card p-d-flex p-jc-center">
|
||||
<div class="card flex justify-content-center">
|
||||
<Chart type="doughnut" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card p-d-flex p-jc-center">
|
||||
<div class="card flex justify-content-center">
|
||||
<Chart type="pie" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card p-d-flex p-jc-center">
|
||||
<div class="card flex justify-content-center">
|
||||
<Chart type="polarArea" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="card p-d-flex p-jc-center">
|
||||
<div class="card flex justify-content-center">
|
||||
<Chart type="radar" :data="chartData" :options="chartOptions" style="width: 40%" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,31 +11,31 @@
|
|||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="binary" v-model="checked" :binary="true" />
|
||||
<label for="binary">{{checked}}</label>
|
||||
</div>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
<label for="city4">San Francisco</label>
|
||||
</div>
|
||||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
|
||||
<div v-for="category of categories" :key="category.key" class="field-checkbox">
|
||||
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -177,31 +177,31 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Basic</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="binary" v-model="checked" :binary="true" />
|
||||
<label for="binary">{{checked}}</label>
|
||||
</div>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
<label for="city4">San Francisco</label>
|
||||
</div>
|
||||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
|
||||
<div v-for="category of categories" :key="category.key" class="field-checkbox">
|
||||
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
|
|
@ -230,31 +230,31 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Basic</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="binary" v-model="checked" :binary="true" />
|
||||
<label for="binary">{{checked}}</label>
|
||||
</div>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city3" name="city" value="New York" v-model="cities" />
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
|
||||
<label for="city4">San Francisco</label>
|
||||
</div>
|
||||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
|
||||
<div v-for="category of categories" :key="category.key" class="field-checkbox">
|
||||
<Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
|
|
@ -285,31 +285,31 @@ export default {
|
|||
imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox id="binary" v-model="checked" :binary="true"></p-checkbox>
|
||||
<label for="binary">{{checked}}</label>
|
||||
</div>
|
||||
|
||||
<h5>Multiple</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox id="city1" name="city" value="Chicago" v-model="cities"></p-checkbox>
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox id="city2" name="city" value="Los Angeles" v-model="cities"></p-checkbox>
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox id="city3" name="city" value="New York" v-model="cities"></p-checkbox>
|
||||
<label for="city3">New York</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox id="city4" name="city" value="San Francisco" v-model="cities"></p-checkbox>
|
||||
<label for="city4">San Francisco</label>
|
||||
</div>
|
||||
|
||||
<h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
|
||||
<div v-for="category of categories" :key="category.key" class="p-field-checkbox">
|
||||
<div v-for="category of categories" :key="category.key" class="field-checkbox">
|
||||
<p-checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
|
||||
<label :for="category.key">{{category.name}}</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,34 +11,34 @@
|
|||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Action" class="p-mr-2" />
|
||||
<Chip label="Comedy" class="p-mr-2" />
|
||||
<Chip label="Mystery" class="p-mr-2" />
|
||||
<div class="flex align-items-center">
|
||||
<Chip label="Action" class="mr-2" />
|
||||
<Chip label="Comedy" class="mr-2" />
|
||||
<Chip label="Mystery" class="mr-2" />
|
||||
<Chip label="Thriller" removable />
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="p-mr-2" />
|
||||
<div class="flex align-items-center">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="mr-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="mr-2" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="p-mr-2" />
|
||||
<Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" />
|
||||
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2" />
|
||||
<div class="flex align-items-center">
|
||||
<Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="mr-2" />
|
||||
<Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="mr-2" />
|
||||
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2" />
|
||||
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable />
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Action" class="p-mr-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2 custom-chip" />
|
||||
<div class="flex align-items-center">
|
||||
<Chip label="Action" class="mr-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
|
||||
<Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -153,35 +153,35 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Basic</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Action" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Comedy" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Mystery" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Thriller" class="p-mb-2" removable />
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<Chip label="Action" class="mr-2 mb-2" />
|
||||
<Chip label="Comedy" class="mr-2 mb-2" />
|
||||
<Chip label="Mystery" class="mr-2 mb-2" />
|
||||
<Chip label="Thriller" class="mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="mr-2 mb-2" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" class="mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
|
||||
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<Chip label="Action" class="mr-2 mb-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2 custom-chip" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip mb-2" removable />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -204,35 +204,35 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Basic</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Action" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Comedy" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Mystery" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Thriller" class="p-mb-2" removable />
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<Chip label="Action" class="mr-2 mb-2" />
|
||||
<Chip label="Comedy" class="mr-2 mb-2" />
|
||||
<Chip label="Mystery" class="mr-2 mb-2" />
|
||||
<Chip label="Thriller" class="mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="mr-2 mb-2" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" class="mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
|
||||
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mb-2" removable />
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<Chip label="Action" class="mr-2 mb-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2 custom-chip" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip mb-2" removable />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -254,35 +254,35 @@ export default {
|
|||
imports: `<script src="https://unpkg.com/primevue@^3/chip/chip.min.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<h5>Basic</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<p-chip label="Action" class="p-mr-2 p-mb-2"></p-chip>
|
||||
<p-chip label="Comedy" class="p-mr-2 p-mb-2"></p-chip>
|
||||
<p-chip label="Mystery" class="p-mr-2 p-mb-2"></p-chip>
|
||||
<p-chip label="Thriller" class="p-mb-2" removable></p-chip>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Action" class="mr-2 mb-2"></p-chip>
|
||||
<p-chip label="Comedy" class="mr-2 mb-2"></p-chip>
|
||||
<p-chip label="Mystery" class="mr-2 mb-2"></p-chip>
|
||||
<p-chip label="Thriller" class="mb-2" removable></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2"></p-chip>
|
||||
<p-chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2"></p-chip>
|
||||
<p-chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2"></p-chip>
|
||||
<p-chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable></p-chip>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></p-chip>
|
||||
<p-chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></p-chip>
|
||||
<p-chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></p-chip>
|
||||
<p-chip label="Microsoft" icon="pi pi-microsoft" class="mb-2" removable></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<p-chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
|
||||
<p-chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable></p-chip>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2"></p-chip>
|
||||
<p-chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mb-2" removable></p-chip>
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
|
||||
<p-chip label="Action" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
|
||||
<p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable></p-chip>
|
||||
<div class="flex align-items-center flex-column sm:flex-row">
|
||||
<p-chip label="Action" class="mr-2 mb-2 custom-chip"></p-chip>
|
||||
<p-chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2 custom-chip"></p-chip>
|
||||
<p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2 custom-chip"></p-chip>
|
||||
<p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip mb-2" removable></p-chip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="content-section documentation">
|
||||
<h1>Colors</h1>
|
||||
<p>Each PrimeVue theme exports its own color palette.</p>
|
||||
|
|
@ -57,8 +57,8 @@
|
|||
</code></pre>
|
||||
|
||||
<div class="card">
|
||||
<div class="p-d-flex p-flex-wrap">
|
||||
<div v-for="color of colors" :key="color" class="color-stack p-mr-6 p-mb-6">
|
||||
<div class="flex flex-wrap">
|
||||
<div v-for="color of colors" :key="color" class="color-stack mr-6 mb-6">
|
||||
<template v-for="shade of shades" :key="shade">
|
||||
<div v-if="shade !== 0" class="color-box"
|
||||
:style="{backgroundColor:`var(--${color}-${shade})`, color: (shade > 500 ? '#fff': '#000')}">
|
||||
|
|
|
|||
|
|
@ -14,23 +14,23 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
|
||||
|
||||
<h5>Position</h5>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
|
||||
<div class="grid flex-column">
|
||||
<div class="col">
|
||||
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
|
||||
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
|
||||
<div class="col">
|
||||
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
|
||||
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
|
||||
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
|
||||
<div class="col">
|
||||
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -271,23 +271,23 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
|
||||
|
||||
<h5>Position</h5>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="grid flex-column">
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
|
||||
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
|
||||
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
|
||||
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -356,23 +356,23 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
|
||||
<Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
|
||||
<Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
|
||||
|
||||
<h5>Position</h5>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="grid flex-column">
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
|
||||
<Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
|
||||
<Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
|
||||
<Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
|
||||
<Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -454,23 +454,23 @@ export default defineComponent({
|
|||
|
||||
<div class="card">
|
||||
<h5>Basic</h5>
|
||||
<p-button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></p-button>
|
||||
<p-button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></p-button>
|
||||
<p-button @click="confirm2()" icon="pi pi-times" label="Delete"></p-button>
|
||||
|
||||
<h5>Position</h5>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="grid flex-column">
|
||||
<div class="p-col">
|
||||
<p-button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></p-button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></p-button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></p-button>
|
||||
<p-button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,20 +12,20 @@
|
|||
<ConfirmPopup></ConfirmPopup>
|
||||
<ConfirmPopup group="demo">
|
||||
<template #message="slotProps">
|
||||
<div class="p-d-flex p-p-4">
|
||||
<div class="flex p-4">
|
||||
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
|
||||
<p class="p-pl-2">{{slotProps.message.message}}</p>
|
||||
<p class="pl-2">{{slotProps.message.message}}</p>
|
||||
</div>
|
||||
</template>
|
||||
</ConfirmPopup>
|
||||
|
||||
<div class="card">
|
||||
<h5>Overlay</h5>
|
||||
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
|
||||
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
|
||||
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></Button>
|
||||
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -102,9 +102,9 @@ export default {
|
|||
<pre v-code><code><template v-pre>
|
||||
<ConfirmPopup group="demo">
|
||||
<template #message="slotProps">
|
||||
<div class="p-d-flex p-p-4">
|
||||
<div class="flex p-4">
|
||||
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
|
||||
<p class="p-pl-2">{{slotProps.message.message}}</p>
|
||||
<p class="pl-2">{{slotProps.message.message}}</p>
|
||||
</div>
|
||||
</template>
|
||||
</ConfirmPopup>
|
||||
|
|
@ -295,9 +295,9 @@ export default {
|
|||
<ConfirmPopup></ConfirmPopup>
|
||||
<ConfirmPopup group="demo">
|
||||
<template #message="slotProps">
|
||||
<div class="p-d-flex p-p-4">
|
||||
<div class="flex p-4">
|
||||
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
|
||||
<p class="p-pl-2">{{slotProps.message.message}}</p>
|
||||
<p class="pl-2">{{slotProps.message.message}}</p>
|
||||
</div>
|
||||
</template>
|
||||
</ConfirmPopup>
|
||||
|
|
@ -305,11 +305,11 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Overlay</h5>
|
||||
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
|
||||
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
|
||||
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></Button>
|
||||
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -372,9 +372,9 @@ export default {
|
|||
<ConfirmPopup></ConfirmPopup>
|
||||
<ConfirmPopup group="demo">
|
||||
<template #message="slotProps">
|
||||
<div class="p-d-flex p-p-4">
|
||||
<div class="flex p-4">
|
||||
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
|
||||
<p class="p-pl-2">{{slotProps.message.message}}</p>
|
||||
<p class="pl-2">{{slotProps.message.message}}</p>
|
||||
</div>
|
||||
</template>
|
||||
</ConfirmPopup>
|
||||
|
|
@ -382,11 +382,11 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Overlay</h5>
|
||||
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
|
||||
<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
|
||||
<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></Button>
|
||||
<Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -463,9 +463,9 @@ export default defineComponent({
|
|||
<p-confirmpopup></p-confirmpopup>
|
||||
<p-confirmpopup group="demo">
|
||||
<template #message="slotProps">
|
||||
<div class="p-d-flex p-p-4">
|
||||
<div class="flex p-4">
|
||||
<i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
|
||||
<p class="p-pl-2">{{slotProps.message.message}}</p>
|
||||
<p class="pl-2">{{slotProps.message.message}}</p>
|
||||
</div>
|
||||
</template>
|
||||
</p-confirmpopup>
|
||||
|
|
@ -473,11 +473,11 @@ export default defineComponent({
|
|||
|
||||
<div class="card">
|
||||
<h5>Overlay</h5>
|
||||
<p-button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></p-button>
|
||||
<p-button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></p-button>
|
||||
<p-button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></p-button>
|
||||
|
||||
<h5>Templating</h5>
|
||||
<p-button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></p-button>
|
||||
<p-button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,135 +27,133 @@ export default {
|
|||
return {
|
||||
items: [
|
||||
{
|
||||
label:'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-plus',
|
||||
items:[
|
||||
{
|
||||
label:'Bookmark',
|
||||
icon:'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label:'Video',
|
||||
icon:'pi pi-fw pi-video'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Export',
|
||||
icon:'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
label:'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-plus',
|
||||
items:[
|
||||
{
|
||||
label:'Bookmark',
|
||||
icon:'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label:'Video',
|
||||
icon:'pi pi-fw pi-video'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Export',
|
||||
icon:'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Left',
|
||||
icon:'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label:'Right',
|
||||
icon:'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label:'Center',
|
||||
icon:'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label:'Justify',
|
||||
icon:'pi pi-fw pi-align-justify'
|
||||
},
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Left',
|
||||
icon:'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label:'Right',
|
||||
icon:'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label:'Center',
|
||||
icon:'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label:'Justify',
|
||||
icon:'pi pi-fw pi-align-justify'
|
||||
},
|
||||
|
||||
]
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Users',
|
||||
icon:'pi pi-fw pi-user',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-user-plus',
|
||||
label:'Users',
|
||||
icon:'pi pi-fw pi-user',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-user-plus',
|
||||
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-user-minus',
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-user-minus',
|
||||
|
||||
},
|
||||
{
|
||||
label:'Search',
|
||||
icon:'pi pi-fw pi-users',
|
||||
items:[
|
||||
{
|
||||
label:'Filter',
|
||||
icon:'pi pi-fw pi-filter',
|
||||
items:[
|
||||
{
|
||||
label:'Print',
|
||||
icon:'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon:'pi pi-fw pi-bars',
|
||||
label:'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Search',
|
||||
icon:'pi pi-fw pi-users',
|
||||
items:[
|
||||
{
|
||||
label:'Filter',
|
||||
icon:'pi pi-fw pi-filter',
|
||||
items:[
|
||||
{
|
||||
label:'Print',
|
||||
icon:'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon:'pi pi-fw pi-bars',
|
||||
label:'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Events',
|
||||
icon:'pi pi-fw pi-calendar',
|
||||
items:[
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Save',
|
||||
icon:'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Archieve',
|
||||
icon:'pi pi-fw pi-calendar-times',
|
||||
items:[
|
||||
{
|
||||
label:'Remove',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
label:'Events',
|
||||
icon:'pi pi-fw pi-calendar',
|
||||
items:[
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Save',
|
||||
icon:'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Archieve',
|
||||
icon:'pi pi-fw pi-calendar-times',
|
||||
items:[
|
||||
{
|
||||
label:'Remove',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Quit',
|
||||
icon:'pi pi-fw pi-power-off'
|
||||
label:'Quit',
|
||||
icon:'pi pi-fw pi-power-off'
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<Toolbar class="p-mb-4">
|
||||
<Toolbar class="mb-4">
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
|
||||
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
|
||||
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between">
|
||||
<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5>
|
||||
<div class="table-header flex flex-column md:flex-row md:justiify-content-between">
|
||||
<h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Search..." />
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<Column field="code" header="Code" :sortable="true" style="min-width:12rem"></Column>
|
||||
<Column field="name" header="Name" :sortable="true" style="min-width:16rem"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<template #body="slotProps">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
<Column field="category" header="Category" :sortable="true" style="min-width:10rem"></Column>
|
||||
<Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
|
||||
<template #body="slotProps">
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
</Column>
|
||||
<Column :exportable="false" style="min-width:8rem">
|
||||
<template #body="slotProps">
|
||||
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -71,18 +71,18 @@
|
|||
|
||||
<Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
|
||||
<img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
|
||||
<small class="p-error" v-if="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="description">Description</label>
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
|
||||
</div>
|
||||
|
||||
<div class="p-field">
|
||||
<label for="inventoryStatus" class="p-mb-3">Inventory Status</label>
|
||||
<div class="field">
|
||||
<label for="inventoryStatus" class="mb-3">Inventory Status</label>
|
||||
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
|
||||
<template #value="slotProps">
|
||||
<div v-if="slotProps.value && slotProps.value.value">
|
||||
|
|
@ -98,34 +98,34 @@
|
|||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<div class="p-field">
|
||||
<label class="p-mb-3">Category</label>
|
||||
<div class="p-formgrid p-grid">
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field">
|
||||
<label class="mb-3">Category</label>
|
||||
<div class="formgrid grid">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<label for="price">Price</label>
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<div class="field col">
|
||||
<label for="quantity">Quantity</label>
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly />
|
||||
</div>
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
|
||||
<Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
|
||||
<Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product">Are you sure you want to delete the selected products?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -159,7 +159,7 @@
|
|||
</Dialog>
|
||||
</div>
|
||||
|
||||
<AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
|
||||
<AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -190,14 +190,14 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Toolbar class="p-mb-4">
|
||||
<Toolbar class="mb-4">
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
|
||||
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
|
||||
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
|
@ -207,8 +207,8 @@ export default {
|
|||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between">
|
||||
<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5>
|
||||
<div class="table-header flex flex-column md:flex-row md:justiify-content-between">
|
||||
<h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Search..." />
|
||||
|
|
@ -242,7 +242,7 @@ export default {
|
|||
</Column>
|
||||
<Column :exportable="false" style="min-width:8rem">
|
||||
<template #body="slotProps">
|
||||
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -251,18 +251,18 @@ export default {
|
|||
|
||||
<Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="product.image" class="product-image" v-if="product.image" />
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
|
||||
<small class="p-error" v-if="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="description">Description</label>
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
|
||||
</div>
|
||||
|
||||
<div class="p-field">
|
||||
<label for="inventoryStatus" class="p-mb-3">Inventory Status</label>
|
||||
<div class="field">
|
||||
<label for="inventoryStatus" class="mb-3">Inventory Status</label>
|
||||
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
|
||||
<template #value="slotProps">
|
||||
<div v-if="slotProps.value && slotProps.value.value">
|
||||
|
|
@ -278,34 +278,34 @@ export default {
|
|||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<div class="p-field">
|
||||
<label class="p-mb-3">Category</label>
|
||||
<div class="p-formgrid p-grid">
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field">
|
||||
<label class="mb-3">Category</label>
|
||||
<div class="formgrid grid">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<label for="price">Price</label>
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<div class="field col">
|
||||
<label for="quantity">Quantity</label>
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly />
|
||||
</div>
|
||||
|
|
@ -318,7 +318,7 @@ export default {
|
|||
|
||||
<Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -329,7 +329,7 @@ export default {
|
|||
|
||||
<Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product">Are you sure you want to delete the selected products?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -506,14 +506,14 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<Toolbar class="p-mb-4">
|
||||
<Toolbar class="mb-4">
|
||||
<template #start>
|
||||
<Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
|
||||
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
|
||||
<Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
|
||||
<FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
|
||||
<Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
|
|
@ -523,8 +523,8 @@ export default {
|
|||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
|
||||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between">
|
||||
<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5>
|
||||
<div class="table-header flex flex-column md:flex-row md:justiify-content-between">
|
||||
<h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Search..." />
|
||||
|
|
@ -558,7 +558,7 @@ export default {
|
|||
</Column>
|
||||
<Column :exportable="false" style="min-width:8rem">
|
||||
<template #body="slotProps">
|
||||
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
|
||||
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -567,18 +567,18 @@ export default {
|
|||
|
||||
<Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="product.image" class="product-image" v-if="product.image" />
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
|
||||
<small class="p-error" v-if="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="description">Description</label>
|
||||
<Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
|
||||
</div>
|
||||
|
||||
<div class="p-field">
|
||||
<label for="inventoryStatus" class="p-mb-3">Inventory Status</label>
|
||||
<div class="field">
|
||||
<label for="inventoryStatus" class="mb-3">Inventory Status</label>
|
||||
<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
|
||||
<template #value="slotProps">
|
||||
<div v-if="slotProps.value && slotProps.value.value">
|
||||
|
|
@ -594,34 +594,34 @@ export default {
|
|||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<div class="p-field">
|
||||
<label class="p-mb-3">Category</label>
|
||||
<div class="p-formgrid p-grid">
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field">
|
||||
<label class="mb-3">Category</label>
|
||||
<div class="formgrid grid">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<label for="price">Price</label>
|
||||
<InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<div class="field col">
|
||||
<label for="quantity">Quantity</label>
|
||||
<InputNumber id="quantity" v-model="product.quantity" integeronly />
|
||||
</div>
|
||||
|
|
@ -634,7 +634,7 @@ export default {
|
|||
|
||||
<Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -645,7 +645,7 @@ export default {
|
|||
|
||||
<Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span v-if="product">Are you sure you want to delete the selected products?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -831,14 +831,14 @@ export default {
|
|||
<div class="card">
|
||||
<p-toast></p-toast>
|
||||
|
||||
<p-toolbar class="p-mb-4">
|
||||
<p-toolbar class="mb-4">
|
||||
<template #start>
|
||||
<p-button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew"></p-button>
|
||||
<p-button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew"></p-button>
|
||||
<p-button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length"></p-button>
|
||||
</template>
|
||||
|
||||
<template #end>
|
||||
<p-fileupload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block"></p-fileupload>
|
||||
<p-fileupload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileupload>
|
||||
<p-button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"></p-button>
|
||||
</template>
|
||||
</p-toolbar>
|
||||
|
|
@ -848,8 +848,8 @@ export default {
|
|||
paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rows-per-page-options="[5,10,25]"
|
||||
current-page-report-template="Showing {first} to {last} of {totalRecords} products" responsive-layout="scroll">
|
||||
<template #header>
|
||||
<div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between">
|
||||
<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5>
|
||||
<div class="table-header flex flex-column md:flex-row md:justiify-content-between">
|
||||
<h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<p-inputtext v-model="filters['global'].value" placeholder="Search..."></p-inputtext>
|
||||
|
|
@ -857,53 +857,53 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<p-column selectionMode="multiple" style="width: 3rem" :exportable="false"></p-column>
|
||||
<p-column field="code" header="Code" :sortable="true" style="min-width:12rem"></p-column>
|
||||
<p-column field="name" header="Name" :sortable="true" style="min-width:16rem"></p-column>
|
||||
<p-column header="Image">
|
||||
<column selectionMode="multiple" style="width: 3rem" :exportable="false"></column>
|
||||
<column field="code" header="Code" :sortable="true" style="min-width:12rem"></column>
|
||||
<column field="name" header="Name" :sortable="true" style="min-width:16rem"></column>
|
||||
<column header="Image">
|
||||
<template #body="slotProps">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="product-image" />
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column field="price" header="Price" :sortable="true" style="min-width:8rem">
|
||||
</column>
|
||||
<column field="price" header="Price" :sortable="true" style="min-width:8rem">
|
||||
<template #body="slotProps">
|
||||
{{formatCurrency(slotProps.data.price)}}
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column field="category" header="Category" :sortable="true" style="min-width:10rem"></p-column>
|
||||
<p-column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
|
||||
</column>
|
||||
<column field="category" header="Category" :sortable="true" style="min-width:10rem"></column>
|
||||
<column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
|
||||
<template #body="slotProps">
|
||||
<p-rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></p-rating>
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
|
||||
</column>
|
||||
<column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
|
||||
<template #body="slotProps">
|
||||
<span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{slotProps.data.inventoryStatus}}</span>
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column :exportable="false" style="min-width:8rem">
|
||||
</column>
|
||||
<column :exportable="false" style="min-width:8rem">
|
||||
<template #body="slotProps">
|
||||
<p-button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)"></p-button>
|
||||
<p-button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)"></p-button>
|
||||
<p-button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)"></p-button>
|
||||
</template>
|
||||
</p-column>
|
||||
</column>
|
||||
</p-datatable>
|
||||
</div>
|
||||
|
||||
<p-dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="product-image" v-if="product.image" />
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="name">Name</label>
|
||||
<p-inputtext id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}"></p-inputtext>
|
||||
<small class="p-error" v-if="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="description">Description</label>
|
||||
<p-textarea id="description" v-model="product.description" required="true" rows="3" cols="20"></p-textarea>
|
||||
</div>
|
||||
|
||||
<div class="p-field">
|
||||
<label for="inventoryStatus" class="p-mb-3">Inventory Status</label>
|
||||
<div class="field">
|
||||
<label for="inventoryStatus" class="mb-3">Inventory Status</label>
|
||||
<p-dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" option-label="label" placeholder="Select a Status">
|
||||
<template #value="slotProps">
|
||||
<div v-if="slotProps.value && slotProps.value.value">
|
||||
|
|
@ -919,34 +919,34 @@ export default {
|
|||
</p-dropdown>
|
||||
</div>
|
||||
|
||||
<div class="p-field">
|
||||
<label class="p-mb-3">Category</label>
|
||||
<div class="p-formgrid p-grid">
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field">
|
||||
<label class="mb-3">Category</label>
|
||||
<div class="formgrid grid">
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radiobutton id="category1" name="category" value="Accessories" v-model="product.category"></p-radiobutton>
|
||||
<label for="category1">Accessories</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radiobutton id="category2" name="category" value="Clothing" v-model="product.category"></p-radiobutton>
|
||||
<label for="category2">Clothing</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radiobutton id="category3" name="category" value="Electronics" v-model="product.category"></p-radiobutton>
|
||||
<label for="category3">Electronics</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton p-col-6">
|
||||
<div class="field-radiobutton col-6">
|
||||
<p-radiobutton id="category4" name="category" value="Fitness" v-model="product.category"></p-radiobutton>
|
||||
<label for="category4">Fitness</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<label for="price">Price</label>
|
||||
<p-inputnumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US"></p-inputnumber></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<div class="field col">
|
||||
<label for="quantity">Quantity</label>
|
||||
<p-inputnumber id="quantity" v-model="product.quantity" integeronly></p-inputnumber>
|
||||
</div>
|
||||
|
|
@ -959,7 +959,7 @@ export default {
|
|||
|
||||
<p-dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i>
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
|
||||
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -970,7 +970,7 @@ export default {
|
|||
|
||||
<p-dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i>
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
|
||||
<span v-if="product">Are you sure you want to delete the selected products?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -1098,7 +1098,7 @@ export default {
|
|||
},
|
||||
components: {
|
||||
"p-datatable": primevue.datatable,
|
||||
"p-column": primevue.column,
|
||||
"column": primevue.column,
|
||||
"p-toolbar": primevue.toolbar,
|
||||
"p-fileupload": primevue.fileupload,
|
||||
"p-rating": primevue.rating,
|
||||
|
|
|
|||
|
|
@ -16,13 +16,13 @@
|
|||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
|
||||
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-between p-ai-center">
|
||||
<h5 class="p-m-0">Customers</h5>
|
||||
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 class="m-0">Customers</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
No customers found.
|
||||
|
|
@ -49,12 +49,12 @@
|
|||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem">
|
||||
<template #body="{data}">
|
||||
<template #body="{data}">
|
||||
<img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
|
||||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<div class="mb-3 font-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
|
|
@ -101,8 +101,8 @@
|
|||
<ProgressBar :value="data.activity" :showValue="false" />
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<Slider v-model="filterModel.value" range class="p-m-3"></Slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<Slider v-model="filterModel.value" range class="m-3"></Slider>
|
||||
<div class="flex align-items-center justify-content-center px-2">
|
||||
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
|
||||
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -731,7 +731,6 @@ export default {
|
|||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -747,7 +746,6 @@ export default {
|
|||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -826,7 +824,6 @@ app.use(PrimeVue, {
|
|||
<InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/>
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -868,10 +865,9 @@ matchModes: [
|
|||
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
|
||||
</template>
|
||||
<template #filterfooter>
|
||||
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
|
||||
<div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
|
||||
</template>
|
||||
</Column>
|
||||
|
||||
</template>
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -879,7 +875,7 @@ matchModes: [
|
|||
<h5>Selection</h5>
|
||||
<p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive.
|
||||
Alternatively column based selection can be done using radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect
|
||||
events are provided as optional callbacks.</p>
|
||||
events are provided as optional callbacks.</p>
|
||||
|
||||
<p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.</p>
|
||||
|
||||
|
|
@ -1078,11 +1074,11 @@ matchModes: [
|
|||
<div class="car-details">
|
||||
<div>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
<div class="grid">
|
||||
<div class="col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<div class="col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div class="col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div class="col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<Button icon="pi pi-search"></Button>
|
||||
|
|
@ -2630,8 +2626,8 @@ export default {
|
|||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
|
||||
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-between p-ai-center">
|
||||
<h5 class="p-m-0">Customers</h5>
|
||||
<div class="flex justify-content-center align-items-center">
|
||||
<h5 class="m-0">Customers</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
|
||||
|
|
@ -2668,7 +2664,7 @@ export default {
|
|||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<div class="mb-3 font-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
|
|
@ -2715,8 +2711,8 @@ export default {
|
|||
<ProgressBar :value="data.activity" :showValue="false" />
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<Slider v-model="filterModel.value" range class="p-m-3"></Slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<Slider v-model="filterModel.value" range class="m-3"></Slider>
|
||||
<div class="flex align-items-center justify-content-center px-2">
|
||||
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
|
||||
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
|
||||
</div>
|
||||
|
|
@ -2854,8 +2850,8 @@ export default {
|
|||
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
|
||||
:globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-between p-ai-center">
|
||||
<h5 class="p-m-0">Customers</h5>
|
||||
<div class="flex justify-content-center align-items-center">
|
||||
<h5 class="m-0">Customers</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
|
||||
|
|
@ -2892,7 +2888,7 @@ export default {
|
|||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<div class="mb-3 font-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
|
|
@ -2939,8 +2935,8 @@ export default {
|
|||
<ProgressBar :value="data.activity" :showValue="false" />
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<Slider v-model="filterModel.value" range class="p-m-3"></Slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<Slider v-model="filterModel.value" range class="m-3"></Slider>
|
||||
<div class="flex align-items-center justify-content-center px-2">
|
||||
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
|
||||
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
|
||||
</div>
|
||||
|
|
@ -3117,8 +3113,8 @@ img {
|
|||
current-page-report-template="Showing {first} to {last} of {totalRecords} entries"
|
||||
:global-filter-fields="['name','country.name','representative.name','status']" responsive-layout="scroll">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-between p-ai-center">
|
||||
<h5 class="p-m-0">Customers</h5>
|
||||
<div class="flex justify-content-center align-items-center">
|
||||
<h5 class="m-0">Customers</h5>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<p-inputtext v-model="filters['global'].value" placeholder="Keyword Search"></p-inputtext>
|
||||
|
|
@ -3155,7 +3151,7 @@ img {
|
|||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<div class="mb-3 font-bold">Agent Picker</div>
|
||||
<p-multiselect v-model="filterModel.value" :options="representatives" option-label="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
|
|
@ -3202,8 +3198,8 @@ img {
|
|||
<p-progressbar :value="data.activity" :show-value="false"></p-progressbar>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<p-slider v-model="filterModel.value" range class="p-m-3"></p-slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<p-slider v-model="filterModel.value" range class="m-3"></p-slider>
|
||||
<div class="flex align-items-center justify-content-center px-2">
|
||||
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
|
||||
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
|
||||
:globalFilterFields="['name','country.name','representative.name','balance','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<div class="flex justify-content-center">
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
|
||||
</template>
|
||||
<template #filterfooter>
|
||||
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
|
||||
<div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<div class="mb-3 font-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
|
|
@ -110,14 +110,14 @@
|
|||
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
|
||||
</template>
|
||||
<template #filter={filterModel}>
|
||||
<Slider v-model="filterModel.value" range class="p-m-3"></Slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<Slider v-model="filterModel.value" range class="m-3"></Slider>
|
||||
<div class="flex align-items-center justify-content-center px-2">
|
||||
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
|
||||
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem">
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width:8rem">
|
||||
<template #body="{data}">
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
|
||||
</template>
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
|
||||
:globalFilterFields="['name','country.name','representative.name','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-end">
|
||||
<div class="flex justify-content-end">
|
||||
<span class="p-input-icon-left ">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
|
||||
|
|
@ -261,7 +261,7 @@ export default {
|
|||
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
|
||||
:globalFilterFields="['name','country.name','representative.name','balance','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<div class="flex justify-content-center">
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
|
|
@ -298,7 +298,7 @@ export default {
|
|||
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
|
||||
</template>
|
||||
<template #filterfooter>
|
||||
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
|
||||
<div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
|
||||
|
|
@ -307,7 +307,7 @@ export default {
|
|||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<div class="mb-3 font-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
|
|
@ -355,14 +355,14 @@ export default {
|
|||
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
|
||||
</template>
|
||||
<template #filter={filterModel}>
|
||||
<Slider v-model="filterModel.value" range class="p-m-3"></Slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<Slider v-model="filterModel.value" range class="m-3"></Slider>
|
||||
<div class="flex align-items-center justify-content-center px-2">
|
||||
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
|
||||
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem">
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width:8rem">
|
||||
<template #body="{data}">
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
|
||||
</template>
|
||||
|
|
@ -380,7 +380,7 @@ export default {
|
|||
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
|
||||
:globalFilterFields="['name','country.name','representative.name','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-end">
|
||||
<div class="flex justify-content-end">
|
||||
<span class="p-input-icon-left ">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
|
||||
|
|
@ -602,7 +602,7 @@ export default {
|
|||
dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
|
||||
:globalFilterFields="['name','country.name','representative.name','balance','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<div class="flex justify-content-center">
|
||||
<Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
|
|
@ -639,7 +639,7 @@ export default {
|
|||
<Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
|
||||
</template>
|
||||
<template #filterfooter>
|
||||
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
|
||||
<div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
|
||||
|
|
@ -648,7 +648,7 @@ export default {
|
|||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<div class="mb-3 font-bold">Agent Picker</div>
|
||||
<MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
|
|
@ -696,14 +696,14 @@ export default {
|
|||
<ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
|
||||
</template>
|
||||
<template #filter={filterModel}>
|
||||
<Slider v-model="filterModel.value" range class="p-m-3"></Slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<Slider v-model="filterModel.value" range class="m-3"></Slider>
|
||||
<div class="flex align-items-center justify-content-center px-2">
|
||||
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
|
||||
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem">
|
||||
<Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width:8rem">
|
||||
<template #body="{data}">
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
|
||||
</template>
|
||||
|
|
@ -721,7 +721,7 @@ export default {
|
|||
dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
|
||||
:globalFilterFields="['name','country.name','representative.name','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-end">
|
||||
<div class="flex justify-content-end">
|
||||
<span class="p-input-icon-left ">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
|
||||
|
|
@ -958,7 +958,7 @@ export default {
|
|||
data-key="id" v-model:filters="filters1" filter-display="menu" :loading="loading1" responsive-layout="scroll"
|
||||
:global-filter-fields="['name','country.name','representative.name','balance','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<div class="flex justify-content-center">
|
||||
<p-button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"></p-button>
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
|
|
@ -995,7 +995,7 @@ export default {
|
|||
<p-button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></p-button>
|
||||
</template>
|
||||
<template #filterfooter>
|
||||
<div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
|
||||
<div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column header="Agent" filter-field="representative" :show-filter-match-modes="false" :filter-menu-style="{'width':'14rem'}" style="min-width:14rem">
|
||||
|
|
@ -1004,7 +1004,7 @@ export default {
|
|||
<span class="image-text">{{data.representative.name}}</span>
|
||||
</template>
|
||||
<template #filter="{filterModel}">
|
||||
<div class="p-mb-3 p-text-bold">Agent Picker</div>
|
||||
<div class="mb-3 font-bold">Agent Picker</div>
|
||||
<p-multiselect v-model="filterModel.value" :options="representatives" option-label="name" placeholder="Any" class="p-column-filter">
|
||||
<template #option="slotProps">
|
||||
<div class="p-multiselect-representative-option">
|
||||
|
|
@ -1052,14 +1052,14 @@ export default {
|
|||
<p-progressbar :value="data.activity" :show-value="false"></p-progressbar>
|
||||
</template>
|
||||
<template #filter={filterModel}>
|
||||
<p-slider v-model="filterModel.value" range class="p-m-3"></p-slider>
|
||||
<div class="p-d-flex p-ai-center p-jc-between p-px-2">
|
||||
<p-slider v-model="filterModel.value" range class="m-3"></p-slider>
|
||||
<div class="flex align-items-center justify-content-center px-2">
|
||||
<span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
|
||||
<span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column field="verified" header="Verified" data-type="boolean" body-class="p-text-center" style="min-width:8rem">
|
||||
<p-column field="verified" header="Verified" data-type="boolean" body-class="text-center" style="min-width:8rem">
|
||||
<template #body="{data}">
|
||||
<i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
|
||||
</template>
|
||||
|
|
@ -1077,7 +1077,7 @@ export default {
|
|||
data-key="id" v-model:filters="filters2" filter-display="row" :loading="loading2" responsive-layout="scroll"
|
||||
:global-filter-fields="['name','country.name','representative.name','status']">
|
||||
<template #header>
|
||||
<div class="p-d-flex p-jc-end">
|
||||
<div class="flex justify-content-end">
|
||||
<span class="p-input-icon-left ">
|
||||
<i class="pi pi-search"></i>
|
||||
<p-inputtext v-model="filters2['global'].value" placeholder="Keyword Search"></p-inputtext>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
@row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="table-header-container">
|
||||
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
|
||||
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
|
||||
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -95,7 +95,7 @@ export default {
|
|||
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="table-header-container">
|
||||
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
|
||||
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
|
||||
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -213,7 +213,7 @@ export default {
|
|||
@rowExpand="onRowExpand" @rowCollapse="onRowCollapse" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<div class="table-header-container">
|
||||
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
|
||||
<Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
|
||||
<Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -335,7 +335,7 @@ export default {
|
|||
@row-expand="onRowExpand" @row-collapse="onRowCollapse" responsive-layout="scroll">
|
||||
<template #header>
|
||||
<div class="table-header-container">
|
||||
<p-button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2"></p-button>
|
||||
<p-button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2"></p-button>
|
||||
<p-button icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
<h5>Frozen Columns</h5>
|
||||
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" />
|
||||
|
||||
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
|
||||
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="mt-3">
|
||||
<Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column>
|
||||
<Column field="id" header="Id" style="flex-grow:1;flex-basis:100px"></Column>
|
||||
<Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column>
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
<Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column>
|
||||
<Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
|
||||
<template #body="{data}">
|
||||
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
|
||||
<span class="font-bold">{{formatCurrency(data.balance)}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
<span class="image-text">{{slotProps.data.representative.name}}</span>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
|
||||
<td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
|
@ -216,7 +216,7 @@ export default {
|
|||
<h5>Frozen Columns</h5>
|
||||
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" />
|
||||
|
||||
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
|
||||
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="mt-3">
|
||||
<Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column>
|
||||
<Column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></Column>
|
||||
<Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column>
|
||||
|
|
@ -228,7 +228,7 @@ export default {
|
|||
<Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column>
|
||||
<Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
|
||||
<template #body="{data}">
|
||||
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
|
||||
<span class="font-bold">{{formatCurrency(data.balance)}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -258,7 +258,7 @@ export default {
|
|||
<span class="image-text">{{slotProps.data.representative.name}}</span>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
|
||||
<td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
|
@ -438,7 +438,7 @@ export default {
|
|||
<h5>Frozen Columns</h5>
|
||||
<ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" />
|
||||
|
||||
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
|
||||
<DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="mt-3">
|
||||
<Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column>
|
||||
<Column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></Column>
|
||||
<Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column>
|
||||
|
|
@ -450,7 +450,7 @@ export default {
|
|||
<Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column>
|
||||
<Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
|
||||
<template #body="{data}">
|
||||
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
|
||||
<span class="font-bold">{{formatCurrency(data.balance)}}</span>
|
||||
</template>
|
||||
</Column>
|
||||
</DataTable>
|
||||
|
|
@ -480,7 +480,7 @@ export default {
|
|||
<span class="image-text">{{slotProps.data.representative.name}}</span>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
|
||||
<td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
|
||||
</template>
|
||||
</DataTable>
|
||||
</div>
|
||||
|
|
@ -664,7 +664,7 @@ export default {
|
|||
<h5>Frozen Columns</h5>
|
||||
<p-togglebutton v-model="balanceFrozen" on-icon="pi pi-lock" off-icon="pi pi-lock-open" on-label="Unfreeze Balance" off-label="Freeze Balance" style="flex-grow:1; flex-basis: 12rem"></p-togglebutton>
|
||||
|
||||
<p-datatable :value="customers2" :scrollable="true" scroll-height="400px" :loading="loading" scroll-direction="both" class="p-mt-3">
|
||||
<p-datatable :value="customers2" :scrollable="true" scroll-height="400px" :loading="loading" scroll-direction="both" class="mt-3">
|
||||
<p-column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></p-column>
|
||||
<p-column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></p-column>
|
||||
<p-column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></p-column>
|
||||
|
|
@ -676,7 +676,7 @@ export default {
|
|||
<p-column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></p-column>
|
||||
<p-column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
|
||||
<template #body="{data}">
|
||||
<span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
|
||||
<span class="font-bold">{{formatCurrency(data.balance)}}</span>
|
||||
</template>
|
||||
</p-column>
|
||||
</p-datatable>
|
||||
|
|
@ -706,7 +706,7 @@ export default {
|
|||
<span class="image-text">{{slotProps.data.representative.name}}</span>
|
||||
</template>
|
||||
<template #groupfooter="slotProps">
|
||||
<td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
|
||||
<td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
|
||||
</template>
|
||||
</p-datatable>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
|
||||
stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<span class="p-input-icon-left">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters1['global'].value" placeholder="Global Search" />
|
||||
</span>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
|
||||
stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<span class="p-input-icon-left">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters2['global'].value" placeholder="Global Search" />
|
||||
</span>
|
||||
|
|
@ -173,7 +173,7 @@ export default {
|
|||
v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
|
||||
stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<span class="p-input-icon-left">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters1['global'].value" placeholder="Global Search" />
|
||||
</span>
|
||||
|
|
@ -232,7 +232,7 @@ export default {
|
|||
v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
|
||||
stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<span class="p-input-icon-left">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters2['global'].value" placeholder="Global Search" />
|
||||
</span>
|
||||
|
|
@ -353,7 +353,7 @@ export default {
|
|||
v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
|
||||
stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<span class="p-input-icon-left">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters1['global'].value" placeholder="Global Search" />
|
||||
</span>
|
||||
|
|
@ -412,7 +412,7 @@ export default {
|
|||
v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
|
||||
stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll">
|
||||
<template #header>
|
||||
<span class="p-input-icon-left">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText v-model="filters2['global'].value" placeholder="Global Search" />
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</template>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<template #body="slotProps">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</Column>
|
||||
<Column field="rating" header="Reviews">
|
||||
<template #body="slotProps">
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Status">
|
||||
|
|
@ -72,7 +72,7 @@ export default {
|
|||
</template>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<template #body="slotProps">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -83,7 +83,7 @@ export default {
|
|||
</Column>
|
||||
<Column field="rating" header="Reviews">
|
||||
<template #body="slotProps">
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Status">
|
||||
|
|
@ -150,7 +150,7 @@ export default {
|
|||
</template>
|
||||
<Column field="name" header="Name"></Column>
|
||||
<Column header="Image">
|
||||
<template #body="slotProps">
|
||||
<template #body="slotProps">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
|
||||
</template>
|
||||
</Column>
|
||||
|
|
@ -161,7 +161,7 @@ export default {
|
|||
</Column>
|
||||
<Column field="rating" header="Reviews">
|
||||
<template #body="slotProps">
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
<Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
|
||||
</template>
|
||||
</Column>
|
||||
<Column header="Status">
|
||||
|
|
|
|||
|
|
@ -24,35 +24,35 @@
|
|||
<DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
|
||||
<Column field="id" header="Id" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="vin" header="Vin" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="30%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -95,35 +95,35 @@ export default {
|
|||
<DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
|
||||
<Column field="id" header="Id" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="vin" header="Vin" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="30%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -200,35 +200,35 @@ export default {
|
|||
<DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
|
||||
<Column field="id" header="Id" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="vin" header="Vin" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="year" header="Year" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="30%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="brand" header="Brand" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
<Column field="color" header="Color" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<Skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -306,35 +306,35 @@ export default {
|
|||
<p-datatable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
|
||||
<p-column field="id" header="Id" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<p-skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column field="vin" header="Vin" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<p-skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column field="year" header="Year" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<p-skeleton width="30%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column field="brand" header="Brand" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<p-skeleton width="40%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
</p-column>
|
||||
<p-column field="color" header="Color" style="min-width: '200px'">
|
||||
<template #loading>
|
||||
<div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
|
||||
<p-skeleton width="60%" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -12,18 +12,18 @@
|
|||
<div class="card">
|
||||
<DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<div class="grid grid-nogutter">
|
||||
<div class="col-6" style="text-align: left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
|
||||
</div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<div class="col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions v-model="layout" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="p-col-12">
|
||||
<div class="col-12">
|
||||
<div class="product-list-item">
|
||||
<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/>
|
||||
<div class="product-list-detail">
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="product-grid-item card">
|
||||
<div class="product-grid-item-top">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -43,15 +43,15 @@ export default {
|
|||
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
|
||||
<pre v-code><code><template v-pre>
|
||||
<template #list="slotProps">
|
||||
<div class="p-col-12">
|
||||
<div class="col-12">
|
||||
<div class="car-details">
|
||||
<div>
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
<div class="grid">
|
||||
<div class="col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<div class="col-12">Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div class="col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div class="col-12">Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
</div>
|
||||
<Button icon="pi pi-search"></Button>
|
||||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
</div>
|
||||
</template>
|
||||
<template #grid="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<div style="padding: .5em" class="col-12 md:col-3">
|
||||
<Panel :header="slotProps.data.vin" style="text-align: center">
|
||||
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||
|
|
@ -133,11 +133,11 @@ export default {
|
|||
<pre v-code><code><template v-pre>
|
||||
<DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<div class="grid grid-nogutter">
|
||||
<div class="col-6" style="text-align: left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/>
|
||||
</div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<div class="col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions v-model="layout" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -451,7 +451,7 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>PrimeFlex 2.0.0.</p>
|
||||
<p>PrimeFlex</p>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
|
|
@ -467,18 +467,18 @@ export default {
|
|||
<div class="card">
|
||||
<DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<div class="grid grid-nogutter">
|
||||
<div class="col-6" style="text-align: left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
|
||||
</div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<div class="col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions v-model="layout" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="p-col-12">
|
||||
<div class="col-12">
|
||||
<div class="product-list-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
|
||||
<div class="product-list-detail">
|
||||
|
|
@ -497,7 +497,7 @@ export default {
|
|||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="product-grid-item card">
|
||||
<div class="product-grid-item-top">
|
||||
<div>
|
||||
|
|
@ -702,18 +702,18 @@ export default {
|
|||
<div class="card">
|
||||
<DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<div class="grid grid-nogutter">
|
||||
<div class="col-6" style="text-align: left">
|
||||
<Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
|
||||
</div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<div class="col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions v-model="layout" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="p-col-12">
|
||||
<div class="col-12">
|
||||
<div class="product-list-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
|
||||
<div class="product-list-detail">
|
||||
|
|
@ -732,7 +732,7 @@ export default {
|
|||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="product-grid-item card">
|
||||
<div class="product-grid-item-top">
|
||||
<div>
|
||||
|
|
@ -939,18 +939,18 @@ export default {
|
|||
<div class="card">
|
||||
<p-dataview :value="products" :layout="layout" :paginator="true" :rows="9" :sort-order="sortOrder" :sort-field="sortField">
|
||||
<template #header>
|
||||
<div class="p-grid p-nogutter">
|
||||
<div class="p-col-6" style="text-align: left">
|
||||
<div class="grid grid-nogutter">
|
||||
<div class="col-6" style="text-align: left">
|
||||
<p-dropdown v-model="sortKey" :options="sortOptions" option-label="label" placeholder="Sort By Price" @change="onSortChange($event)"></p-dropdown>
|
||||
</div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<div class="col-6" style="text-align: right">
|
||||
<p-dataviewlayoutoptions v-model="layout"></p-dataviewlayoutoptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #list="slotProps">
|
||||
<div class="p-col-12">
|
||||
<div class="col-12">
|
||||
<div class="product-list-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
|
||||
<div class="product-list-detail">
|
||||
|
|
@ -969,7 +969,7 @@ export default {
|
|||
</template>
|
||||
|
||||
<template #grid="slotProps">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="product-grid-item card">
|
||||
<div class="product-grid-item-top">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
<h5>Modal</h5>
|
||||
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
|
||||
<Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
|
||||
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span>Are you sure you want to proceed?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
<h5>Maximizable</h5>
|
||||
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
|
||||
<Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -96,17 +96,17 @@
|
|||
</Dialog>
|
||||
|
||||
<h5>Position</h5>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<div class="grid flex-column">
|
||||
<div class="col">
|
||||
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
|
||||
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
|
||||
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
|
||||
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
|
||||
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
|
||||
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
</div>
|
||||
|
||||
<Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
|
|||
|
|
@ -392,7 +392,7 @@ export default {
|
|||
<h5>Modal</h5>
|
||||
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
|
||||
<Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -418,7 +418,7 @@ export default {
|
|||
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
|
||||
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span>Are you sure you want to proceed?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -430,7 +430,7 @@ export default {
|
|||
<h5>Maximizable</h5>
|
||||
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
|
||||
<Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -440,17 +440,17 @@ export default {
|
|||
</Dialog>
|
||||
|
||||
<h5>Position</h5>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<div class="grid flex-column">
|
||||
<div class="col">
|
||||
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
|
||||
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
|
||||
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
|
||||
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
|
||||
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
|
||||
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
|
||||
|
|
@ -458,7 +458,7 @@ export default {
|
|||
</div>
|
||||
|
||||
<Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -595,7 +595,7 @@ p {
|
|||
<h5>Modal</h5>
|
||||
<Button label="Show" icon="pi pi-external-link" @click="openModal" />
|
||||
<Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -621,7 +621,7 @@ p {
|
|||
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
|
||||
<Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
|
||||
<span>Are you sure you want to proceed?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -633,7 +633,7 @@ p {
|
|||
<h5>Maximizable</h5>
|
||||
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
|
||||
<Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -643,17 +643,17 @@ p {
|
|||
</Dialog>
|
||||
|
||||
<h5>Position</h5>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<div class="grid p-dir-col">
|
||||
<div class="col">
|
||||
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
|
||||
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
|
||||
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
|
||||
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
|
||||
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
|
||||
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
|
||||
|
|
@ -661,7 +661,7 @@ p {
|
|||
</div>
|
||||
|
||||
<Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -799,7 +799,7 @@ p {
|
|||
<h5>Modal</h5>
|
||||
<p-button label="Show" icon="pi pi-external-link" @click="openModal"></p-button>
|
||||
<p-dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -825,7 +825,7 @@ p {
|
|||
<p-button label="Confirm" icon="pi pi-external-link" @click="openConfirmation"></p-button>
|
||||
<p-dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
|
||||
<div class="confirmation-content">
|
||||
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i>
|
||||
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
|
||||
<span>Are you sure you want to proceed?</span>
|
||||
</div>
|
||||
<template #footer>
|
||||
|
|
@ -837,7 +837,7 @@ p {
|
|||
<h5>Maximizable</h5>
|
||||
<p-button label="Show" icon="pi pi-external-link" @click="openMaximizable"></p-button>
|
||||
<p-dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
@ -847,17 +847,17 @@ p {
|
|||
</p-dialog>
|
||||
|
||||
<h5>Position</h5>
|
||||
<div class="p-grid p-dir-col">
|
||||
<div class="p-col">
|
||||
<div class="grid p-dir-col">
|
||||
<div class="col">
|
||||
<p-button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning"></p-button>
|
||||
<p-button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning"></p-button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<p-button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning"></p-button>
|
||||
<p-button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning"></p-button>
|
||||
<p-button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning"></p-button>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<p-button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning"></p-button>
|
||||
<p-button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning"></p-button>
|
||||
<p-button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning"></p-button>
|
||||
|
|
@ -865,7 +865,7 @@ p {
|
|||
</div>
|
||||
|
||||
<p-dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
|
||||
<p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<template #footer>
|
||||
|
|
|
|||
|
|
@ -11,26 +11,20 @@
|
|||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<InputText class="p-mr-2 p-d-inline" />
|
||||
<InputText class="p-d-inline" />
|
||||
<InputText class="mr-2 inline" />
|
||||
<InputText class="inline" />
|
||||
|
||||
<h5>Block</h5>
|
||||
<InputText class="p-mb-2 p-d-block" />
|
||||
<InputText class="p-d-block" />
|
||||
<InputText class="mb-2 block" />
|
||||
<InputText class="block" />
|
||||
|
||||
<h5>Visible on a Small Screen</h5>
|
||||
<p>Resize to view.</p>
|
||||
<Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />
|
||||
<Button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden" />
|
||||
|
||||
<h5>Hidden on a Small Screen</h5>
|
||||
<p>Resize to hide.</p>
|
||||
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />
|
||||
|
||||
<h5>Visible to Print, Invisible for Screen</h5>
|
||||
<p class="p-d-none p-d-print-block">Only visible when printed.</p>
|
||||
|
||||
<h5>Visible to Screen, Invisible for Print</h5>
|
||||
<p class="p-d-block p-d-print-none">Not available for printing.</p>
|
||||
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<AppDoc name="DisplayDemo" :sources="sources" github="display/DisplayDemo.vue">
|
||||
<h5>Getting Started</h5>
|
||||
<p>The display classes use the <i>p-d-{value}</i> format and <i>p-d-{breakpoint}-{value}</i> format for responsive design.</p>
|
||||
<p>The display classes use the <i>{value}</i> format and <i>{breakpoint}:{value}</i> format for responsive design.</p>
|
||||
|
||||
<h5>Values</h5>
|
||||
<p>Value field can be one of the following options.</p>
|
||||
<ul>
|
||||
<li>none</li>
|
||||
<li>hidden</li>
|
||||
<li>inline</li>
|
||||
<li>inline-block</li>
|
||||
<li>block</li>
|
||||
|
|
@ -26,13 +26,11 @@
|
|||
|
||||
<h5>Examples</h5>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-inline">Displayed as inline.</div>
|
||||
<div class="p-d-flex">Displayed as a flexbox container.</div>
|
||||
<div class="p-d-block p-d-lg-inline">Inline for larger screens and block for others.</div>
|
||||
<div class="p-d-md-none">Visible on a Small Screen</div>
|
||||
<div class="p-d-none p-d-md-inline-flex">Hidden on a Small Screen</div>
|
||||
<div class="p-d-none p-d-print-block">Only visible when printed.</div>
|
||||
<div class="p-d-block p-d-print-none">Not available for printing.</div>
|
||||
<div class="inline">Displayed as inline.</div>
|
||||
<div class="flex">Displayed as a flexbox container.</div>
|
||||
<div class="block lg:inline">Inline for larger screens and block for others.</div>
|
||||
<div class="md:hidden">Visible on a Small Screen</div>
|
||||
<div class="hidden md:inline-flex">Hidden on a Small Screen</div>
|
||||
|
||||
</code></pre>
|
||||
|
||||
|
|
@ -40,7 +38,7 @@
|
|||
<p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>PrimeFlex 2.0.0.</p>
|
||||
<p>PrimeFlex 3.1.2.</p>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
|
|
@ -53,28 +51,22 @@ export default {
|
|||
tabName: 'Options API Source',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<h5>Inline</h5>
|
||||
<InputText class="p-mr-2 p-d-inline" />
|
||||
<InputText class="p-d-inline" />
|
||||
<InputText class="mr-2 inline" />
|
||||
<InputText class="inline" />
|
||||
|
||||
<h5>Block</h5>
|
||||
<InputText class="p-mb-2 p-d-block" />
|
||||
<InputText class="p-d-block" />
|
||||
<InputText class="mb-2 block" />
|
||||
<InputText class="block" />
|
||||
|
||||
<h5>Visible on a Small Screen</h5>
|
||||
<p>Resize to view.</p>
|
||||
<Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />
|
||||
<Button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden" />
|
||||
|
||||
<h5>Hidden on a Small Screen</h5>
|
||||
<p>Resize to hide.</p>
|
||||
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />
|
||||
|
||||
<h5>Visible to Print, Invisible for Screen</h5>
|
||||
<p class="p-d-none p-d-print-block">Only visible when printed.</p>
|
||||
|
||||
<h5>Visible to Screen, Invisible for Print</h5>
|
||||
<p class="p-d-block p-d-print-none">Not available for printing.</p>
|
||||
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -89,28 +81,22 @@ export default {
|
|||
tabName: 'Composition API Source',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<h5>Inline</h5>
|
||||
<InputText class="p-mr-2 p-d-inline" />
|
||||
<InputText class="p-d-inline" />
|
||||
<InputText class="mr-2 inline" />
|
||||
<InputText class="inline" />
|
||||
|
||||
<h5>Block</h5>
|
||||
<InputText class="p-mb-2 p-d-block" />
|
||||
<InputText class="p-d-block" />
|
||||
<InputText class="mb-2 block" />
|
||||
<InputText class="block" />
|
||||
|
||||
<h5>Visible on a Small Screen</h5>
|
||||
<p>Resize to view.</p>
|
||||
<Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />
|
||||
<Button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden" />
|
||||
|
||||
<h5>Hidden on a Small Screen</h5>
|
||||
<p>Resize to hide.</p>
|
||||
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />
|
||||
|
||||
<h5>Visible to Print, Invisible for Screen</h5>
|
||||
<p class="p-d-none p-d-print-block">Only visible when printed.</p>
|
||||
|
||||
<h5>Visible to Screen, Invisible for Print</h5>
|
||||
<p class="p-d-block p-d-print-none">Not available for printing.</p>
|
||||
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -125,26 +111,20 @@ export default {
|
|||
tabName: 'Browser Source',
|
||||
content: `<div id="app">
|
||||
<h5>Inline</h5>
|
||||
<p-inputtext class="p-mr-2 p-d-inline"></p-inputtext>
|
||||
<p-inputtext class="p-d-inline"></p-inputtext>
|
||||
<p-inputtext class="mr-2 inline"></p-inputtext>
|
||||
<p-inputtext class="inline"></p-inputtext>
|
||||
|
||||
<h5>Block</h5>
|
||||
<p-inputtext class="p-mb-2 p-d-block"></p-inputtext>
|
||||
<p-inputtext class="p-d-block"></p-inputtext>
|
||||
<p-inputtext class="mb-2 block"></p-inputtext>
|
||||
<p-inputtext class="block"></p-inputtext>
|
||||
|
||||
<h5>Visible on a Small Screen</h5>
|
||||
<p>Resize to view.</p>
|
||||
<p-button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none"></p-button>
|
||||
<p-button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden"></p-button>
|
||||
|
||||
<h5>Hidden on a Small Screen</h5>
|
||||
<p>Resize to hide.</p>
|
||||
<p-button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex"></p-button>
|
||||
|
||||
<h5>Visible to Print, Invisible for Screen</h5>
|
||||
<p class="p-d-none p-d-print-block">Only visible when printed.</p>
|
||||
|
||||
<h5>Visible to Screen, Invisible for Print</h5>
|
||||
<p class="p-d-block p-d-print-none">Not available for printing.</p>
|
||||
<p-button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex"></p-button>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@
|
|||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<Divider align="left">
|
||||
<div class="p-d-inline-flex p-ai-center">
|
||||
<i class="pi pi-user p-mr-2"></i>
|
||||
<div class="inline-flex align-items-center">
|
||||
<i class="pi pi-user mr-2"></i>
|
||||
<b>Icon</b>
|
||||
</div>
|
||||
</Divider>
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<div class="p-d-flex">
|
||||
<div class="flex">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
|
@ -122,26 +122,26 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical with Content</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-5 p-d-flex p-ai-center p-jc-center">
|
||||
<div class="grid">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="text" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<InputText id="password" type="password" />
|
||||
</div>
|
||||
<Button label="Login"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="col-2">
|
||||
<Divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</Divider>
|
||||
</div>
|
||||
<div class="p-col-5 p-d-flex p-ai-center p-jc-center">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ import Divider from 'primevue/divider';
|
|||
<h5>Vertical Divider</h5>
|
||||
<p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex">
|
||||
<div class="flex">
|
||||
<div>Content 1</div>
|
||||
<Divider layout="vertical" />
|
||||
<div>Content 2</div>
|
||||
|
|
@ -53,8 +53,8 @@ import Divider from 'primevue/divider';
|
|||
<div>Content 1</div>
|
||||
|
||||
<Divider align="left">
|
||||
<div class="p-d-inline-flex p-ai-center">
|
||||
<i class="pi pi-user p-mr-2"></i>
|
||||
<div class="inline-flex align-items-center">
|
||||
<i class="pi pi-user mr-2"></i>
|
||||
<b>Icon</b>
|
||||
</div>
|
||||
</Divider>
|
||||
|
|
@ -248,8 +248,8 @@ export default {
|
|||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<Divider align="left">
|
||||
<div class="p-d-inline-flex p-ai-center">
|
||||
<i class="pi pi-user p-mr-2"></i>
|
||||
<div class="inline-flex align-items-center">
|
||||
<i class="pi pi-user mr-2"></i>
|
||||
<b>Icon</b>
|
||||
</div>
|
||||
</Divider>
|
||||
|
|
@ -277,7 +277,7 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<div class="p-d-flex">
|
||||
<div class="flex">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
|
@ -298,26 +298,26 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical with Content</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-5 p-d-flex p-ai-center p-jc-center">
|
||||
<div class="grid">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="text" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<InputText id="password" type="password" />
|
||||
</div>
|
||||
<Button label="Login"></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="col-2">
|
||||
<Divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</Divider>
|
||||
</div>
|
||||
<div class="p-col-5 p-d-flex p-ai-center p-jc-center">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -399,8 +399,8 @@ export default {
|
|||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<Divider align="left">
|
||||
<div class="p-d-inline-flex p-ai-center">
|
||||
<i class="pi pi-user p-mr-2"></i>
|
||||
<div class="inline-flex align-items-center">
|
||||
<i class="pi pi-user mr-2"></i>
|
||||
<b>Icon</b>
|
||||
</div>
|
||||
</Divider>
|
||||
|
|
@ -428,7 +428,7 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<div class="p-d-flex">
|
||||
<div class="flex">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
|
@ -449,26 +449,26 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical with Content</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-5 p-d-flex p-ai-center p-jc-center">
|
||||
<div class="grid">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="text" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<InputText id="password" type="password" />
|
||||
</div>
|
||||
<Button label="Login"></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="col-2">
|
||||
<Divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</Divider>
|
||||
</div>
|
||||
<div class="p-col-5 p-d-flex p-ai-center p-jc-center">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -549,8 +549,8 @@ export default {
|
|||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
||||
<p-divider align="left">
|
||||
<div class="p-d-inline-flex p-ai-center">
|
||||
<i class="pi pi-user p-mr-2"></i>
|
||||
<div class="inline-flex align-items-center">
|
||||
<i class="pi pi-user mr-2"></i>
|
||||
<b>Icon</b>
|
||||
</div>
|
||||
</p-divider>
|
||||
|
|
@ -578,7 +578,7 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<div class="p-d-flex">
|
||||
<div class="flex">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
|
||||
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
|
|
@ -599,26 +599,26 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical with Content</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-5 p-d-flex p-ai-center p-jc-center">
|
||||
<div class="grid">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username">Username</label>
|
||||
<p-inputtext id="username" type="text"></p-inputtext>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="password">Password</label>
|
||||
<p-inputtext id="password" type="password"></p-inputtext>
|
||||
</div>
|
||||
<p-button label="Login"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="col-2">
|
||||
<p-divider layout="vertical">
|
||||
<b>OR</b>
|
||||
</p-divider>
|
||||
</div>
|
||||
<div class="p-col-5 p-d-flex p-ai-center p-jc-center">
|
||||
<div class="col-5 flex align-items-center justify-content-center">
|
||||
<p-button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<h5>Grouped</h5>
|
||||
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
|
||||
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
|
||||
<template v-slot:loader="{ options }">
|
||||
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
|
||||
<div class="flex align-items-center p-2" style="height: 31px" >
|
||||
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -532,7 +532,7 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
|
|
@ -567,7 +567,7 @@ export default {
|
|||
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
|
||||
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
|
||||
<template v-slot:loader="{ options }">
|
||||
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
|
||||
<div class="flex align-items-center p-2" style="height: 31px" >
|
||||
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -689,7 +689,7 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
|
|
@ -724,7 +724,7 @@ export default {
|
|||
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
|
||||
<Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
|
||||
<template v-slot:loader="{ options }">
|
||||
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
|
||||
<div class="flex align-items-center p-2" style="height: 31px" >
|
||||
<Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -850,7 +850,7 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<p-dropdown v-model="selectedGroupedCity" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
|
|
@ -885,7 +885,7 @@ export default {
|
|||
<h5>Virtual Scroll (1000 Items) and Lazy</h5>
|
||||
<p-dropdown v-model="selectedItem2" :options="lazyItems" option-label="label" option-value="value" :virtual-scroller-options="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
|
||||
<template v-slot:loader="{ options }">
|
||||
<div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
|
||||
<div class="flex align-items-center p-2" style="height: 31px" >
|
||||
<p-skeleton :width="options.even ? '60%' : '50%'" height="1rem"></p-skeleton>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="p-grid">
|
||||
<div class="p-col" v-for="index in 24" :key="index">
|
||||
<div :class="['shadow-box', 'p-shadow-' + index]">
|
||||
<div class="grid">
|
||||
<div class="p-col" v-for="index in 8" :key="index">
|
||||
<div :class="['shadow-box', 'shadow-' + index]">
|
||||
p-shadow-{{index}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<AppDoc name="ElevationDemo" :sources="sources" github="elevation/ElevationDemo.vue">
|
||||
<h5>Getting Started</h5>
|
||||
<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
|
||||
<p>Elevation is added to an element using the <i>.shadow-{level}</i> class.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-shadow-1" />
|
||||
<div class="shadow-1" />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Levels</h5>
|
||||
<p>There are 24 depths available varying from 1 to 24.</p>
|
||||
<p>There are 8 depths available varying from 1 to 8.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-shadow-1" />
|
||||
<div class="p-shadow-24" />
|
||||
<div class="shadow-1" />
|
||||
<div class="shadow-8" />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>PrimeFlex 2.0.0.</p>
|
||||
<p>PrimeFlex 3.1.2.</p>
|
||||
</AppDoc>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,10 +30,10 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col" v-for="index in 24" :key="index">
|
||||
<div :class="['shadow-box', 'p-shadow-' + index]">
|
||||
p-shadow-{{index}}
|
||||
<div class="grid">
|
||||
<div class="p-col" v-for="index in 8" :key="index">
|
||||
<div :class="['shadow-box', 'shadow-' + index]">
|
||||
shadow-{{index}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -65,10 +65,10 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-grid">
|
||||
<div class="p-col" v-for="index in 24" :key="index">
|
||||
<div :class="['shadow-box', 'p-shadow-' + index]">
|
||||
p-shadow-{{index}}
|
||||
<div class="grid">
|
||||
<div class="p-col" v-for="index in 8" :key="index">
|
||||
<div :class="['shadow-box', 'shadow-' + index]">
|
||||
shadow-{{index}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,10 +98,10 @@ export default {
|
|||
'browser-source': {
|
||||
tabName: 'Browser Source',
|
||||
content: `<div id="app">
|
||||
<div class="p-grid">
|
||||
<div class="p-col" v-for="index in 24" :key="index">
|
||||
<div :class="['shadow-box', 'p-shadow-' + index]">
|
||||
p-shadow-{{index}}
|
||||
<div class="grid">
|
||||
<div class="p-col" v-for="index in 8" :key="index">
|
||||
<div :class="['shadow-box', 'shadow-' + index]">
|
||||
shadow-{{index}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.p-fieldset p {
|
||||
.fieldset p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -154,19 +154,19 @@ import Fieldset from 'primevue/fieldset';
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-fieldset</td>
|
||||
<td>fieldset</td>
|
||||
<td>Fieldset element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fieldset-toggleable</td>
|
||||
<td>fieldset-toggleable</td>
|
||||
<td>Toggleable fieldset element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fieldset-legend</td>
|
||||
<td>fieldset-legend</td>
|
||||
<td>Legend element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-fieldset-content</td>
|
||||
<td>fieldset-content</td>
|
||||
<td>Content element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -212,7 +212,7 @@ export default {
|
|||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.p-fieldset p {
|
||||
.fieldset p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -247,7 +247,7 @@ export default {
|
|||
<\\/script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.p-fieldset p {
|
||||
.fieldset p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -258,20 +258,20 @@ export default {
|
|||
imports: `<script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<h5>Regular</h5>
|
||||
<p-fieldset legend="Header">
|
||||
<fieldset legend="Header">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</p-fieldset>
|
||||
</fieldset>
|
||||
|
||||
<h5>Toggleable</h5>
|
||||
<p-fieldset legend="Header" :toggleable="true">
|
||||
<fieldset legend="Header" :toggleable="true">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</p-fieldset>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
|
|
@ -279,7 +279,7 @@ export default {
|
|||
|
||||
const App = {
|
||||
components: {
|
||||
"p-fieldset": primevue.fieldset
|
||||
"fieldset": primevue.fieldset
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -289,7 +289,7 @@ export default {
|
|||
<\\/script>
|
||||
|
||||
<style>
|
||||
.p-fieldset p {
|
||||
.fieldset p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,19 +6,19 @@
|
|||
</p>
|
||||
|
||||
<h5>Flex Container</h5>
|
||||
<p>An element can configured as a flexbox container using the <i>p-d-flex</i> or <i>p-d-inline-flex</i> classes.</p>
|
||||
<p>An element can configured as a flexbox container using the <i>flex</i> or <i>inline-flex</i> classes.</p>
|
||||
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex">Flex Container</div>
|
||||
<div class="p-d-inline-flex">Inline Flex Container</div>
|
||||
<div class="flex">Flex Container</div>
|
||||
<div class="inline-flex">Inline Flex Container</div>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<div class="box p-d-flex p-mb-3">Flex Container</div>
|
||||
<div class="box p-d-inline-flex">Inline Flex Container</div>
|
||||
<div class="box flex mb-3">Flex Container</div>
|
||||
<div class="box inline-flex">Inline Flex Container</div>
|
||||
|
||||
<h5>Direction</h5>
|
||||
<p>Default is applied using the <i>p-flex-{direction}</i> class where direction can be either of the following.</p>
|
||||
<p>Default is applied using the <i>flex-{direction}</i> class where direction can be either of the following.</p>
|
||||
<ul>
|
||||
<li>row (default)</li>
|
||||
<li>row-reverse</li>
|
||||
|
|
@ -28,31 +28,31 @@
|
|||
|
||||
<h6>Row</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex">
|
||||
<div class="p-mr-2">Item 1</div>
|
||||
<div class="p-mr-2">Item 2</div>
|
||||
<div class="flex">
|
||||
<div class="mr-2">Item 1</div>
|
||||
<div class="mr-2">Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex">
|
||||
<div class="p-mr-2">Item 1</div>
|
||||
<div class="p-mr-2">Item 2</div>
|
||||
<div class="flex">
|
||||
<div class="mr-2">Item 1</div>
|
||||
<div class="mr-2">Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
|
||||
<h6>Column</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-flex-column">
|
||||
<div class="p-mb-2">Item 1</div>
|
||||
<div class="p-mb-2">Item 2</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="mb-2">Item 1</div>
|
||||
<div class="mb-2">Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex p-flex-column">
|
||||
<div class="p-mb-2">Item 1</div>
|
||||
<div class="p-mb-2">Item 2</div>
|
||||
<div class="flex flex-column">
|
||||
<div class="mb-2">Item 1</div>
|
||||
<div class="mb-2">Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -60,120 +60,120 @@
|
|||
<p>Row direction for larger screens and column for smaller.</p>
|
||||
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-flex-column p-flex-md-row">
|
||||
<div class="p-mb-2 p-mr-2">Item 1</div>
|
||||
<div class="p-mb-2 p-mr-2">Item 2</div>
|
||||
<div class="p-mb-2 p-mr-2">Item 3</div>
|
||||
<div class="flex flex-column md:flex-row">
|
||||
<div class="mb-2 mr-2">Item 1</div>
|
||||
<div class="mb-2 mr-2">Item 2</div>
|
||||
<div class="mb-2 mr-2">Item 3</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<div class="p-d-flex p-flex-column p-flex-md-row">
|
||||
<div class="p-mb-2 p-mr-2">Item 1</div>
|
||||
<div class="p-mb-2 p-mr-2">Item 2</div>
|
||||
<div class="p-mb-2 p-mr-2">Item 3</div>
|
||||
<div class="flex flex-column md:flex-row">
|
||||
<div class="mb-2 mr-2">Item 1</div>
|
||||
<div class="mb-2 mr-2">Item 2</div>
|
||||
<div class="mb-2 mr-2">Item 3</div>
|
||||
</div>
|
||||
|
||||
<h6>Direction Classes</h6>
|
||||
<ul>
|
||||
<li>p-flex-row</li>
|
||||
<li>p-flex-row-reverse</li>
|
||||
<li>p-flex-column</li>
|
||||
<li>p-flex-column-reverse</li>
|
||||
<li>p-flex-sm-row</li>
|
||||
<li>p-flex-sm-row-reverse</li>
|
||||
<li>p-flex-sm-column</li>
|
||||
<li>p-flex-sm-column-reverse</li>
|
||||
<li>p-flex-md-row</li>
|
||||
<li>p-flex-md-row-reverse</li>
|
||||
<li>p-flex-md-column</li>
|
||||
<li>p-flex-md-column-reverse</li>
|
||||
<li>p-flex-lg-row</li>
|
||||
<li>p-flex-lg-row-reverse</li>
|
||||
<li>p-flex-lg-column</li>
|
||||
<li>p-flex-lg-column-reverse</li>
|
||||
<li>p-flex-xl-row</li>
|
||||
<li>p-flex-xl-row-reverse</li>
|
||||
<li>p-flex-xl-column</li>
|
||||
<li>p-flex-xl-column-reverse</li>
|
||||
<li>flex-row</li>
|
||||
<li>flex-row-reverse</li>
|
||||
<li>flex-column</li>
|
||||
<li>flex-column-reverse</li>
|
||||
<li>sm:flex-row</li>
|
||||
<li>sm:flex-row-reverse</li>
|
||||
<li>sm:flex-column</li>
|
||||
<li>sm:flex-column-reverse</li>
|
||||
<li>md:flex-row</li>
|
||||
<li>md:flex-row-reverse</li>
|
||||
<li>md:flex-column</li>
|
||||
<li>md:flex-column-reverse</li>
|
||||
<li>lg:flex-row</li>
|
||||
<li>lg:flex-row-reverse</li>
|
||||
<li>lg:flex-column</li>
|
||||
<li>lg:flex-column-reverse</li>
|
||||
<li>xl:flex-row</li>
|
||||
<li>xl:flex-row-reverse</li>
|
||||
<li>xl:flex-column</li>
|
||||
<li>xl:flex-column-reverse</li>
|
||||
</ul>
|
||||
|
||||
<h5>Order</h5>
|
||||
<p>Order configures the way in which they appear in the flex container. <i>p-order-{value}</i> format is used where value can be a number from 0 to 6.</p>
|
||||
<p>Order configures the way in which they appear in the flex container. <i>order-{value}</i> format is used where value can be a number from 0 to 6.</p>
|
||||
|
||||
<h6>Customized</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex">
|
||||
<div class="p-mr-2 p-order-3">Item 1</div>
|
||||
<div class="p-mr-2 p-order-1">Item 2</div>
|
||||
<div class="p-mr-2 p-order-2">Item 3</div>
|
||||
<div class="flex">
|
||||
<div class="mr-2 order-3">Item 1</div>
|
||||
<div class="mr-2 order-1">Item 2</div>
|
||||
<div class="mr-2 order-2">Item 3</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex">
|
||||
<div class="p-mr-2 p-order-3">Item 1</div>
|
||||
<div class="p-mr-2 p-order-1">Item 2</div>
|
||||
<div class="p-mr-2 p-order-2">Item 3</div>
|
||||
<div class="flex">
|
||||
<div class="mr-2 order-3">Item 1</div>
|
||||
<div class="mr-2 order-1">Item 2</div>
|
||||
<div class="mr-2 order-2">Item 3</div>
|
||||
</div>
|
||||
|
||||
<h6>Responsive</h6>
|
||||
<p>Orders change depending on the screen size.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex">
|
||||
<div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
|
||||
<div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>
|
||||
<div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div>
|
||||
<div class="flex">
|
||||
<div class="mr-2 order-3 md:order-2">Item 1</div>
|
||||
<div class="mr-2 order-1 md:order-3">Item 2</div>
|
||||
<div class="mr-2 order-2 md:order-1">Item 3</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<div class="p-d-flex">
|
||||
<div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
|
||||
<div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>
|
||||
<div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div>
|
||||
<div class="flex">
|
||||
<div class="mr-2 order-3 md:order-2">Item 1</div>
|
||||
<div class="mr-2 order-1 md:order-3">Item 2</div>
|
||||
<div class="mr-2 order-2 md:order-1">Item 3</div>
|
||||
</div>
|
||||
|
||||
<h6>Order Classes</h6>
|
||||
<ul>
|
||||
<li>p-order-0</li>
|
||||
<li>p-order-1</li>
|
||||
<li>p-order-2</li>
|
||||
<li>p-order-3</li>
|
||||
<li>p-order-4</li>
|
||||
<li>p-order-5</li>
|
||||
<li>p-order-6</li>
|
||||
<li>p-order-sm-0</li>
|
||||
<li>p-order-sm-1</li>
|
||||
<li>p-order-sm-2</li>
|
||||
<li>p-order-sm-3</li>
|
||||
<li>p-order-sm-4</li>
|
||||
<li>p-order-sm-5</li>
|
||||
<li>p-order-sm-6</li>
|
||||
<li>p-order-md-0</li>
|
||||
<li>p-order-md-1</li>
|
||||
<li>p-order-md-2</li>
|
||||
<li>p-order-md-3</li>
|
||||
<li>p-order-md-4</li>
|
||||
<li>p-order-md-5</li>
|
||||
<li>p-order-md-6</li>
|
||||
<li>p-order-lg-0</li>
|
||||
<li>p-order-lg-1</li>
|
||||
<li>p-order-lg-2</li>
|
||||
<li>p-order-lg-3</li>
|
||||
<li>p-order-lg-4</li>
|
||||
<li>p-order-lg-5</li>
|
||||
<li>p-order-lg-6</li>
|
||||
<li>p-order-xl-0</li>
|
||||
<li>p-order-xl-1</li>
|
||||
<li>p-order-xl-2</li>
|
||||
<li>p-order-xl-3</li>
|
||||
<li>p-order-xl-4</li>
|
||||
<li>p-order-xl-5</li>
|
||||
<li>p-order-xl-6</li>
|
||||
<li>order-0</li>
|
||||
<li>order-1</li>
|
||||
<li>order-2</li>
|
||||
<li>order-3</li>
|
||||
<li>order-4</li>
|
||||
<li>order-5</li>
|
||||
<li>order-6</li>
|
||||
<li>sm:order-0</li>
|
||||
<li>sm:order-1</li>
|
||||
<li>sm:order-2</li>
|
||||
<li>sm:order-3</li>
|
||||
<li>sm:order-4</li>
|
||||
<li>sm:order-5</li>
|
||||
<li>sm:order-6</li>
|
||||
<li>md:order-0</li>
|
||||
<li>md:order-1</li>
|
||||
<li>md:order-2</li>
|
||||
<li>md:order-3</li>
|
||||
<li>md:order-4</li>
|
||||
<li>md:order-5</li>
|
||||
<li>md:order-6</li>
|
||||
<li>lg:order-0</li>
|
||||
<li>lg:order-1</li>
|
||||
<li>lg:order-2</li>
|
||||
<li>lg:order-3</li>
|
||||
<li>lg:order-4</li>
|
||||
<li>lg:order-5</li>
|
||||
<li>lg:order-6</li>
|
||||
<li>xl:order-0</li>
|
||||
<li>xl:order-1</li>
|
||||
<li>xl:order-2</li>
|
||||
<li>xl:order-3</li>
|
||||
<li>xl:order-4</li>
|
||||
<li>xl:order-5</li>
|
||||
<li>xl:order-6</li>
|
||||
</ul>
|
||||
|
||||
<h5>Wrap</h5>
|
||||
<p>Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is <i>p-flex-{value}</i> and the value field can be either of the
|
||||
<p>Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is <i>flex-{value}</i> and the value field can be either of the
|
||||
listed alternatives.</p>
|
||||
|
||||
<ul>
|
||||
|
|
@ -184,88 +184,88 @@
|
|||
|
||||
<h6>No Wrap</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex">
|
||||
<div class="p-mr-2 p-mb-2">Item 1</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 2</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 3</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 4</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 5</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 6</div>
|
||||
<div class="flex">
|
||||
<div class="mr-2 mb-2">Item 1</div>
|
||||
<div class="mr-2 mb-2">Item 2</div>
|
||||
<div class="mr-2 mb-2">Item 3</div>
|
||||
<div class="mr-2 mb-2">Item 4</div>
|
||||
<div class="mr-2 mb-2">Item 5</div>
|
||||
<div class="mr-2 mb-2">Item 6</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex">
|
||||
<div class="p-mr-2 p-mb-2">Item 1</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 2</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 3</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 4</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 5</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 6</div>
|
||||
<div class="flex">
|
||||
<div class="mr-2 mb-2">Item 1</div>
|
||||
<div class="mr-2 mb-2">Item 2</div>
|
||||
<div class="mr-2 mb-2">Item 3</div>
|
||||
<div class="mr-2 mb-2">Item 4</div>
|
||||
<div class="mr-2 mb-2">Item 5</div>
|
||||
<div class="mr-2 mb-2">Item 6</div>
|
||||
</div>
|
||||
|
||||
<h6>Wrap</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-flex-wrap">
|
||||
<div class="p-mr-2 p-mb-2">Item 1</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 2</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 3</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 4</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 5</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 6</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mr-2 mb-2">Item 1</div>
|
||||
<div class="mr-2 mb-2">Item 2</div>
|
||||
<div class="mr-2 mb-2">Item 3</div>
|
||||
<div class="mr-2 mb-2">Item 4</div>
|
||||
<div class="mr-2 mb-2">Item 5</div>
|
||||
<div class="mr-2 mb-2">Item 6</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex p-flex-wrap">
|
||||
<div class="p-mr-2 p-mb-2">Item 1</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 2</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 3</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 4</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 5</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 6</div>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="mr-2 mb-2">Item 1</div>
|
||||
<div class="mr-2 mb-2">Item 2</div>
|
||||
<div class="mr-2 mb-2">Item 3</div>
|
||||
<div class="mr-2 mb-2">Item 4</div>
|
||||
<div class="mr-2 mb-2">Item 5</div>
|
||||
<div class="mr-2 mb-2">Item 6</div>
|
||||
</div>
|
||||
|
||||
<h6>Wrap Reverse</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-flex-wrap-reverse">
|
||||
<div class="p-mr-2 p-mb-2">Item 1</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 2</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 3</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 4</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 5</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 6</div>
|
||||
<div class="flex flex-wrap-reverse">
|
||||
<div class="mr-2 mb-2">Item 1</div>
|
||||
<div class="mr-2 mb-2">Item 2</div>
|
||||
<div class="mr-2 mb-2">Item 3</div>
|
||||
<div class="mr-2 mb-2">Item 4</div>
|
||||
<div class="mr-2 mb-2">Item 5</div>
|
||||
<div class="mr-2 mb-2">Item 6</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex p-flex-wrap-reverse">
|
||||
<div class="p-mr-2 p-mb-2">Item 1</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 2</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 3</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 4</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 5</div>
|
||||
<div class="p-mr-2 p-mb-2">Item 6</div>
|
||||
<div class="flex flex-wrap-reverse">
|
||||
<div class="mr-2 mb-2">Item 1</div>
|
||||
<div class="mr-2 mb-2">Item 2</div>
|
||||
<div class="mr-2 mb-2">Item 3</div>
|
||||
<div class="mr-2 mb-2">Item 4</div>
|
||||
<div class="mr-2 mb-2">Item 5</div>
|
||||
<div class="mr-2 mb-2">Item 6</div>
|
||||
</div>
|
||||
|
||||
<h6>Wrap Classes</h6>
|
||||
<ul>
|
||||
<li>p-flex-nowrap</li>
|
||||
<li>p-flex-wrap</li>
|
||||
<li>p-flex-wrap-reverse</li>
|
||||
<li>p-flex-sm-nowrap</li>
|
||||
<li>p-flex-sm-wrap</li>
|
||||
<li>p-flex-sm-wrap-reverse</li>
|
||||
<li>p-flex-md-nowrap</li>
|
||||
<li>p-flex-md-wrap</li>
|
||||
<li>p-flex-md-wrap-reverse</li>
|
||||
<li>p-flex-lg-nowrap</li>
|
||||
<li>p-flex-lg-wrap</li>
|
||||
<li>p-flex-lg-wrap-reverse</li>
|
||||
<li>p-flex-xl-nowrap</li>
|
||||
<li>p-flex-xl-wrap</li>
|
||||
<li>p-flex-xl-wrap-reverse</li>
|
||||
<li>flex-nowrap</li>
|
||||
<li>flex-wrap</li>
|
||||
<li>flex-wrap-reverse</li>
|
||||
<li>sm:flex-nowrap</li>
|
||||
<li>sm:flex-wrap</li>
|
||||
<li>sm:flex-wrap-reverse</li>
|
||||
<li>md:flex-nowrap</li>
|
||||
<li>md:flex-wrap</li>
|
||||
<li>md:flex-wrap-reverse</li>
|
||||
<li>lg:flex-nowrap</li>
|
||||
<li>lg:flex-wrap</li>
|
||||
<li>lg:flex-wrap-reverse</li>
|
||||
<li>xl:flex-nowrap</li>
|
||||
<li>xl:flex-wrap</li>
|
||||
<li>xl:flex-wrap-reverse</li>
|
||||
</ul>
|
||||
|
||||
<h5>Justify Content</h5>
|
||||
<p>Justify content is the alignment along the main axis and defined using the <i>p-jc-{value}</i> format with responsive alternatives. Value field accepts
|
||||
<p>Justify content is the alignment along the main axis and defined using the <i>justify-content-{value}</i> format with responsive alternatives. Value field accepts
|
||||
the options below.</p>
|
||||
<ul>
|
||||
<li>start</li>
|
||||
|
|
@ -278,66 +278,66 @@
|
|||
|
||||
<h6>Between</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<div class="flex justify-content-center">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<div class="flex justify-content-center">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
<h6>Center</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-jc-center">
|
||||
<div class="p-mr-2">Item 1</div>
|
||||
<div class="flex justify-content-center">
|
||||
<div class="mr-2">Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex p-jc-center">
|
||||
<div class="p-mr-2">Item 1</div>
|
||||
<div class="flex justify-content-center">
|
||||
<div class="mr-2">Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
<h6>Justify Content Classes</h6>
|
||||
<ul>
|
||||
<li>p-jc-start</li>
|
||||
<li>p-jc-end</li>
|
||||
<li>p-jc-center</li>
|
||||
<li>p-jc-between</li>
|
||||
<li>p-jc-around</li>
|
||||
<li>p-jc-evenly</li>
|
||||
<li>p-jc-sm-start</li>
|
||||
<li>p-jc-sm-end</li>
|
||||
<li>p-jc-sm-center</li>
|
||||
<li>p-jc-sm-between</li>
|
||||
<li>p-jc-sm-around</li>
|
||||
<li>p-jc-sm-evenly</li>
|
||||
<li>p-jc-md-start</li>
|
||||
<li>p-jc-md-end</li>
|
||||
<li>p-jc-md-center</li>
|
||||
<li>p-jc-md-between</li>
|
||||
<li>p-jc-md-around</li>
|
||||
<li>p-jc-md-evenly</li>
|
||||
<li>p-jc-lg-start</li>
|
||||
<li>p-jc-lg-end</li>
|
||||
<li>p-jc-lg-center</li>
|
||||
<li>p-jc-lg-between</li>
|
||||
<li>p-jc-lg-around</li>
|
||||
<li>p-jc-lg-evenly</li>
|
||||
<li>p-jc-xl-start</li>
|
||||
<li>p-jc-xl-end</li>
|
||||
<li>p-jc-xl-center</li>
|
||||
<li>p-jc-xl-between</li>
|
||||
<li>p-jc-xl-around</li>
|
||||
<li>p-jc-xl-evenly</li>
|
||||
<li>justify-content-start</li>
|
||||
<li>justify-content-end</li>
|
||||
<li>justify-content-center</li>
|
||||
<li>justify-content-center</li>
|
||||
<li>justify-content-around</li>
|
||||
<li>justify-content-evenly</li>
|
||||
<li>sm:justify-content-start</li>
|
||||
<li>sm:justify-content-end</li>
|
||||
<li>sm:justify-content-center</li>
|
||||
<li>sm:justify-content-between</li>
|
||||
<li>sm:justify-content-around</li>
|
||||
<li>sm:justify-content-evenly</li>
|
||||
<li>md:justify-content-start</li>
|
||||
<li>md:justify-content-end</li>
|
||||
<li>md:justify-content-center</li>
|
||||
<li>md:justiify-content-between</li>
|
||||
<li>md:justify-content-around</li>
|
||||
<li>md:justify-content-evenly</li>
|
||||
<li>lg:justify-content-start</li>
|
||||
<li>lg:justify-content-end</li>
|
||||
<li>lg:justify-content-center</li>
|
||||
<li>lg:justify-content-between</li>
|
||||
<li>lg:justify-content-around</li>
|
||||
<li>lg:justify-content-evenly</li>
|
||||
<li>xl:justify-content-start</li>
|
||||
<li>xl:justify-content-end</li>
|
||||
<li>xl:justify-content-center</li>
|
||||
<li>xl:justify-content-between</li>
|
||||
<li>xl:justify-content-around</li>
|
||||
<li>xl:justify-content-evenly</li>
|
||||
</ul>
|
||||
|
||||
<h5>Align Items</h5>
|
||||
<p>Align Items configuration is the alignment along the cross axis and defined using the <i>p-ai-{value}</i> format with responsive alternatives. Value field accepts
|
||||
<p>Align Items configuration is the alignment along the cross axis and defined using the <i>align-items-{value}</i> format with responsive alternatives. Value field accepts
|
||||
the options below.</p>
|
||||
<ul>
|
||||
<li>start</li>
|
||||
|
|
@ -349,61 +349,61 @@
|
|||
|
||||
<h6>Start</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-ai-start">
|
||||
<div class="p-mr-2" style="height:100px">Item 1</div>
|
||||
<div class="flex align-items-start">
|
||||
<div class="mr-2" style="height:100px">Item 1</div>
|
||||
<div style="height:50px">Item 2</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex p-ai-start">
|
||||
<div class="p-mr-2" style="height:100px">Item 1</div>
|
||||
<div class="flex align-items-start">
|
||||
<div class="mr-2" style="height:100px">Item 1</div>
|
||||
<div style="height:50px">Item 2</div>
|
||||
</div>
|
||||
|
||||
<h6>Center</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<div class="p-mr-2" style="height:100px">Item 1</div>
|
||||
<div class="flex align-items-center">
|
||||
<div class="mr-2" style="height:100px">Item 1</div>
|
||||
<div style="height:50px">Item 2</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<div class="p-mr-2" style="height:100px">Item 1</div>
|
||||
<div class="flex align-items-center">
|
||||
<div class="mr-2" style="height:100px">Item 1</div>
|
||||
<div style="height:50px">Item 2</div>
|
||||
</div>
|
||||
|
||||
<h6>Align Items Classes</h6>
|
||||
<ul>
|
||||
<li>p-ai-start</li>
|
||||
<li>p-ai-end</li>
|
||||
<li>p-ai-center</li>
|
||||
<li>p-ai-baseline</li>
|
||||
<li>p-ai-strech</li>
|
||||
<li>p-ai-sm-start</li>
|
||||
<li>p-ai-sm-end</li>
|
||||
<li>p-ai-sm-center</li>
|
||||
<li>p-ai-sm-baseline</li>
|
||||
<li>p-ai-sm-strech</li>
|
||||
<li>p-ai-md-start</li>
|
||||
<li>p-ai-md-end</li>
|
||||
<li>p-ai-md-center</li>
|
||||
<li>p-ai-md-baseline</li>
|
||||
<li>p-ai-md-strech</li>
|
||||
<li>p-ai-lg-start</li>
|
||||
<li>p-ai-lg-end</li>
|
||||
<li>p-ai-lg-center</li>
|
||||
<li>p-ai-lg-baseline</li>
|
||||
<li>p-ai-lg-strech</li>
|
||||
<li>p-ai-xl-start</li>
|
||||
<li>p-ai-xl-end</li>
|
||||
<li>p-ai-xl-center</li>
|
||||
<li>p-ai-xl-baseline</li>
|
||||
<li>p-ai-xl-strech</li>
|
||||
<li>align-items-start</li>
|
||||
<li>align-items-end</li>
|
||||
<li>align-items-center</li>
|
||||
<li>align-items-baseline</li>
|
||||
<li>align-items-stretch</li>
|
||||
<li>sm:align-items-start</li>
|
||||
<li>sm:align-items-end</li>
|
||||
<li>sm:align-items-center</li>
|
||||
<li>sm:align-items-baseline</li>
|
||||
<li>sm:align-items-stretch</li>
|
||||
<li>md:align-items-start</li>
|
||||
<li>md:align-items-end</li>
|
||||
<li>md:align-items-center</li>
|
||||
<li>md:align-items-baseline</li>
|
||||
<li>md:align-items-stretch</li>
|
||||
<li>lg:align-items-start</li>
|
||||
<li>lg:align-items-end</li>
|
||||
<li>lg:align-items-center</li>
|
||||
<li>lg:align-items-baseline</li>
|
||||
<li>lg:align-items-stretch</li>
|
||||
<li>xl:align-items-start</li>
|
||||
<li>xl:align-items-end</li>
|
||||
<li>xl:align-items-center</li>
|
||||
<li>xl:align-items-baseline</li>
|
||||
<li>xl:align-items-stretch</li>
|
||||
</ul>
|
||||
|
||||
<h5>Align Self</h5>
|
||||
<p>Align self configuration is the alignment along the cross axis for a particular element and defined using the <i>p-as-{value}</i> format with responsive alternatives. Value field accepts
|
||||
<p>Align self configuration is the alignment along the cross axis for a particular element and defined using the <i>align-self-{value}</i> format with responsive alternatives. Value field accepts
|
||||
the options below.</p>
|
||||
<ul>
|
||||
<li>start</li>
|
||||
|
|
@ -414,52 +414,52 @@
|
|||
</ul>
|
||||
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex" style="height: 150px;">
|
||||
<div class="p-mr-2 p-as-start">Start</div>
|
||||
<div class="p-mr-2 p-as-center">Center</div>
|
||||
<div class="p-mr-2 p-as-end">End</div>
|
||||
<div class="p-mr-2 p-as-stretch">Stretch</div>
|
||||
<div class="flex" style="height: 150px;">
|
||||
<div class="mr-2 align-self-start">Start</div>
|
||||
<div class="mr-2 align-self-center">Center</div>
|
||||
<div class="mr-2 align-self-end">End</div>
|
||||
<div class="mr-2 align-self-stretch">Stretch</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex" style="height: 150px;">
|
||||
<div class="p-mr-2 p-as-start">Start</div>
|
||||
<div class="p-mr-2 p-as-center">Center</div>
|
||||
<div class="p-mr-2 p-as-end">End</div>
|
||||
<div class="p-mr-2 p-as-stretch">Stretch</div>
|
||||
<div class="flex" style="height: 150px;">
|
||||
<div class="mr-2 align-self-start">Start</div>
|
||||
<div class="mr-2 align-self-center">Center</div>
|
||||
<div class="mr-2 align-self-end">End</div>
|
||||
<div class="mr-2 align-self-stretch">Stretch</div>
|
||||
</div>
|
||||
|
||||
<h6>Align Items Classes</h6>
|
||||
<ul>
|
||||
<li>p-as-start</li>
|
||||
<li>p-as-end</li>
|
||||
<li>p-as-center</li>
|
||||
<li>p-as-baseline</li>
|
||||
<li>p-as-strech</li>
|
||||
<li>p-as-sm-start</li>
|
||||
<li>p-as-sm-end</li>
|
||||
<li>p-as-sm-center</li>
|
||||
<li>p-as-sm-baseline</li>
|
||||
<li>p-as-sm-strech</li>
|
||||
<li>p-as-md-start</li>
|
||||
<li>p-as-md-end</li>
|
||||
<li>p-as-md-center</li>
|
||||
<li>p-as-md-baseline</li>
|
||||
<li>p-as-md-strech</li>
|
||||
<li>p-as-lg-start</li>
|
||||
<li>p-as-lg-end</li>
|
||||
<li>p-as-lg-center</li>
|
||||
<li>p-as-lg-baseline</li>
|
||||
<li>p-as-lg-strech</li>
|
||||
<li>p-as-xl-start</li>
|
||||
<li>p-as-xl-end</li>
|
||||
<li>p-as-xl-center</li>
|
||||
<li>p-as-xl-baseline</li>
|
||||
<li>p-as-xl-strech</li>
|
||||
<li>align-self-start</li>
|
||||
<li>align-self-end</li>
|
||||
<li>align-self-center</li>
|
||||
<li>align-self-baseline</li>
|
||||
<li>align-self-stretch</li>
|
||||
<li>sm:align-self-start</li>
|
||||
<li>sm:align-self-end</li>
|
||||
<li>sm:align-self-center</li>
|
||||
<li>sm:align-self-baseline</li>
|
||||
<li>sm:align-self-stretch</li>
|
||||
<li>md:align-self-start</li>
|
||||
<li>md:align-self-end</li>
|
||||
<li>md:align-self-center</li>
|
||||
<li>md:align-self-baseline</li>
|
||||
<li>md:align-self-stretch</li>
|
||||
<li>lg:align-self-start</li>
|
||||
<li>lg:align-self-end</li>
|
||||
<li>lg:align-self-center</li>
|
||||
<li>lg:align-self-baseline</li>
|
||||
<li>lg:align-self-stretch</li>
|
||||
<li>xl:align-self-start</li>
|
||||
<li>xl:align-self-end</li>
|
||||
<li>xl:align-self-center</li>
|
||||
<li>xl:align-self-baseline</li>
|
||||
<li>xl:align-self-stretch</li>
|
||||
</ul>
|
||||
|
||||
<h5>Align Content</h5>
|
||||
<p>Align content is the alignment along the cross axis and defined using the <i>p-ac-{value}</i> format with responsive alternatives. Value field accepts
|
||||
<p>Align content is the alignment along the cross axis and defined using the <i>align-content-{value}</i> format with responsive alternatives. Value field accepts
|
||||
the options below.</p>
|
||||
<ul>
|
||||
<li>start</li>
|
||||
|
|
@ -472,36 +472,36 @@
|
|||
|
||||
<h6>Align Content Classes</h6>
|
||||
<ul>
|
||||
<li>p-ac-start</li>
|
||||
<li>p-ac-end</li>
|
||||
<li>p-ac-center</li>
|
||||
<li>p-ac-around</li>
|
||||
<li>p-ac-stretch</li>
|
||||
<li>p-ac-between</li>
|
||||
<li>p-ac-sm-start</li>
|
||||
<li>p-ac-sm-end</li>
|
||||
<li>p-ac-sm-center</li>
|
||||
<li>p-ac-sm-around</li>
|
||||
<li>p-ac-sm-stretch</li>
|
||||
<li>p-ac-sm-between</li>
|
||||
<li>p-ac-md-start</li>
|
||||
<li>p-ac-md-end</li>
|
||||
<li>p-ac-md-center</li>
|
||||
<li>p-ac-md-around</li>
|
||||
<li>p-ac-md-stretch</li>
|
||||
<li>p-ac-md-between</li>
|
||||
<li>p-ac-lg-start</li>
|
||||
<li>p-ac-lg-end</li>
|
||||
<li>p-ac-lg-center</li>
|
||||
<li>p-ac-lg-around</li>
|
||||
<li>p-ac-lg-stretch</li>
|
||||
<li>p-ac-lg-between</li>
|
||||
<li>p-ac-xl-start</li>
|
||||
<li>p-ac-xl-end</li>
|
||||
<li>p-ac-xl-center</li>
|
||||
<li>p-ac-xl-around</li>
|
||||
<li>p-ac-xl-stretch</li>
|
||||
<li>p-ac-xl-between</li>
|
||||
<li>align-content-start</li>
|
||||
<li>align-content-end</li>
|
||||
<li>align-content-center</li>
|
||||
<li>align-content-around</li>
|
||||
<li>align-content-stretch</li>
|
||||
<li>align-content-between</li>
|
||||
<li>sm:align-content-start</li>
|
||||
<li>sm:align-content-end</li>
|
||||
<li>sm:align-content-center</li>
|
||||
<li>sm:align-content-around</li>
|
||||
<li>sm:align-content-stretch</li>
|
||||
<li>sm:align-content-between</li>
|
||||
<li>md:align-content-start</li>
|
||||
<li>md:align-content-end</li>
|
||||
<li>md:align-content-center</li>
|
||||
<li>md:align-content-around</li>
|
||||
<li>md:align-content-stretch</li>
|
||||
<li>md:align-content-between</li>
|
||||
<li>lg:align-content-start</li>
|
||||
<li>lg:align-content-end</li>
|
||||
<li>lg:align-content-center</li>
|
||||
<li>lg:align-content-around</li>
|
||||
<li>lg:align-content-stretch</li>
|
||||
<li>lg:align-content-between</li>
|
||||
<li>xl:align-content-start</li>
|
||||
<li>xl:align-content-end</li>
|
||||
<li>xl:align-content-center</li>
|
||||
<li>xl:align-content-around</li>
|
||||
<li>xl:align-content-stretch</li>
|
||||
<li>xl:align-content-between</li>
|
||||
</ul>
|
||||
|
||||
<h5>Margin with FlexBox</h5>
|
||||
|
|
@ -509,34 +509,34 @@
|
|||
<h6>Horizontal Spacing</h6>
|
||||
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-p-3 card">
|
||||
<Button type="Button" icon="pi pi-check" class="p-mr-2" />
|
||||
<div class="flex p-3 card">
|
||||
<Button type="Button" icon="pi pi-check" class="mr-2" />
|
||||
<Button type="Button" icon="pi pi-trash" class="p-button-danger"/>
|
||||
<Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/>
|
||||
<Button type="Button" icon="pi pi-search" class="ml-auto p-button-help"/>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex p-p-3 card">
|
||||
<Button type="Button" icon="pi pi-check" class="p-mr-2" />
|
||||
<div class="flex p-3 card">
|
||||
<Button type="Button" icon="pi pi-check" class="mr-2" />
|
||||
<Button type="Button" icon="pi pi-trash" class="p-button-danger"/>
|
||||
<Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/>
|
||||
<Button type="Button" icon="pi pi-search" class="ml-auto p-button-help"/>
|
||||
</div>
|
||||
|
||||
<h6>Vertical Spacing</h6>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-flex p-flex-column" style="height:150px">
|
||||
<div class="flex flex-column" style="height:150px">
|
||||
<div>Item 1</div>
|
||||
<div class="p-mt-auto">Item 2</div>
|
||||
<div class="mt-auto">Item 2</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="p-d-flex p-flex-column" style="height:150px">
|
||||
<div class="flex flex-column" style="height:150px">
|
||||
<div>Item 1</div>
|
||||
<div class="p-mt-auto">Item 2</div>
|
||||
<div class="mt-auto">Item 2</div>
|
||||
</div>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>PrimeFlex 2.0.0.</p>
|
||||
<p>PrimeFlex 3.1.2.</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -547,7 +547,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.p-d-flex > div,
|
||||
.flex > div,
|
||||
.box {
|
||||
background-color: var(--surface-e);
|
||||
text-align: center;
|
||||
|
|
@ -556,7 +556,7 @@ export default {
|
|||
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||
}
|
||||
|
||||
.p-d-flex > div {
|
||||
.flex > div {
|
||||
width: 8rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,58 +10,58 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<InputText id="inputtext" type="text" v-model="value1" />
|
||||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
|
||||
<label for="inputtext-left">Left Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label p-input-icon-right">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-right">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-right" type="text" v-model="valueIconRight" />
|
||||
<label for="inputtext-right">Right Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Calendar id="calendar" v-model="value3" />
|
||||
<label for="calendar">Calendar</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Chips id="chips" v-model="value4" />
|
||||
<label for="chips">Chips</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
<label for="inputmask">InputMask</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<InputNumber id="inputnumber" v-model="value6" />
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
|
|
@ -72,38 +72,38 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" />
|
||||
<label for="multiselect">CascadeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
|
||||
<label for="dropdown">Dropdown</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
|
||||
<label for="treeselect">TreeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Password id="password" v-model="value11" />
|
||||
<label for="password">Password</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Textarea id="textarea" v-model="value10" rows="3" />
|
||||
<label for="textarea">Textarea</label>
|
||||
|
|
@ -232,58 +232,58 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<InputText id="inputtext" type="text" v-model="value1" />
|
||||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
|
||||
<label for="inputtext-left">Left Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label p-input-icon-right">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-right">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-right" type="text" v-model="valueIconRight" />
|
||||
<label for="inputtext-right">Right Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Calendar id="calendar" v-model="value3" />
|
||||
<label for="calendar">Calendar</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Chips id="chips" v-model="value4" />
|
||||
<label for="chips">Chips</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
<label for="inputmask">InputMask</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<InputNumber id="inputnumber" v-model="value6" />
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
|
|
@ -294,38 +294,38 @@ export default {
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" />
|
||||
<label for="multiselect">CascadeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
|
||||
<label for="dropdown">Dropdown</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
|
||||
<label for="treeselect">TreeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Password id="password" v-model="value11" />
|
||||
<label for="password">Password</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Textarea id="textarea" v-model="value10" rows="3" />
|
||||
<label for="textarea">Textarea</label>
|
||||
|
|
@ -480,58 +480,58 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<InputText id="inputtext" type="text" v-model="value1" />
|
||||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
|
||||
<label for="inputtext-left">Left Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<span class="p-float-label p-input-icon-right">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-right">
|
||||
<i class="pi pi-search" />
|
||||
<InputText id="inputtext-right" type="text" v-model="valueIconRight" />
|
||||
<label for="inputtext-right">Right Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Calendar id="calendar" v-model="value3" />
|
||||
<label for="calendar">Calendar</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Chips id="chips" v-model="value4" />
|
||||
<label for="chips">Chips</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
<label for="inputmask">InputMask</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<InputNumber id="inputnumber" v-model="value6" />
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
|
|
@ -542,38 +542,38 @@ export default {
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" />
|
||||
<label for="multiselect">CascadeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
|
||||
<label for="dropdown">Dropdown</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
|
||||
<label for="treeselect">TreeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Password id="password" v-model="value11" />
|
||||
<label for="password">Password</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<Textarea id="textarea" v-model="value10" rows="3" />
|
||||
<label for="textarea">Textarea</label>
|
||||
|
|
@ -735,58 +735,58 @@ export default {
|
|||
<script src="./NodeService.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<div class="card">
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputtext id="inputtext" type="text" v-model="value1"></p-inputtext>
|
||||
<label for="inputtext">InputText</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<p-inputtext id="inputtext-left" type="text" v-model="valueIconLeft"></p-inputtext>
|
||||
<label for="inputtext-left">Left Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label p-input-icon-right">
|
||||
<i class="pi pi-search"></i>
|
||||
<p-inputtext id="inputtext-right" type="text" v-model="valueIconRight"></p-inputtext>
|
||||
<label for="inputtext-right">Right Icon</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
|
||||
<label for="autocomplete">AutoComplete</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-calendar id="calendar" v-model="value3"></p-calendar>
|
||||
<label for="calendar">Calendar</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-chips id="chips" v-model="value4"></p-chips>
|
||||
<label for="chips">Chips</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
|
||||
<label for="inputmask">InputMask</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-inputnumber id="inputnumber" v-model="value6"></p-inputnumber>
|
||||
<label for="inputnumber">InputNumber</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
|
|
@ -797,38 +797,38 @@ export default {
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-cascadeselect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
|
||||
:option-group-children="['states', 'cities']"></p-cascadeselect>
|
||||
<label for="multiselect">CascadeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-dropdown id="dropdown" v-model="value8" :options="cities" option-label="name"></p-dropdown>
|
||||
<label for="dropdown">Dropdown</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-multiselect id="multiselect" v-model="value9" :options="cities" option-label="name">
|
||||
<label for="multiselect">MultiSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-treeselect v-model="selectedNode" :options="nodes"></p-treeselect>
|
||||
<label for="treeselect">TreeSelect</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-password id="password" v-model="value11"></p-password>
|
||||
<label for="password">Password</label>
|
||||
</span>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<span class="p-float-label">
|
||||
<p-textarea id="textarea" v-model="value10" rows="3"></p-textarea>
|
||||
<label for="textarea">Textarea</label>
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@
|
|||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="firstname1">Firstname</label>
|
||||
<InputText id="firstname1" type="text" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname1">Lastname</label>
|
||||
<InputText id="lastname1" type="text" />
|
||||
</div>
|
||||
|
|
@ -26,12 +26,12 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical and Grid</h5>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col">
|
||||
<label for="firstname2">Firstname</label>
|
||||
<InputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<div class="field col">
|
||||
<label for="lastname2">Lastname</label>
|
||||
<InputText id="lastname2" type="text" />
|
||||
</div>
|
||||
|
|
@ -40,15 +40,15 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Horizontal and Fixed Width</h5>
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
|
||||
<div class="p-col">
|
||||
<div class="field grid">
|
||||
<label for="firstname3" class="col-fixed" style="width:100px">Firstname</label>
|
||||
<div class="col">
|
||||
<InputText id="firstname3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
|
||||
<div class="p-col">
|
||||
<div class="field grid">
|
||||
<label for="lastname3" class="col-fixed" style="width:100px">Lastname</label>
|
||||
<div class="col">
|
||||
<InputText id="lastname3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,15 +57,15 @@
|
|||
<div class="card">
|
||||
<h5>Horizontal and Fluid</h5>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<InputText id="firstname4" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<InputText id="lastname4" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -74,12 +74,12 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label for="firstname5" class="p-sr-only">Firstname</label>
|
||||
<InputText id="firstname5" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname5" class="p-sr-only">Lastname</label>
|
||||
<InputText id="lastname5" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
|
|
@ -89,22 +89,22 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical Checkbox</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Checkbox</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
|
||||
<label for="city3">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
|
||||
<label for="city4">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -113,22 +113,22 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical RadioButton</h5>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
|
||||
<label for="city5">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
|
||||
<label for="city6">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal RadioButton</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
|
||||
<label for="city7">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
|
||||
<label for="city8">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field p-fluid">
|
||||
<div class="field p-fluid">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="username" aria-describedby="username-help" />
|
||||
<small id="username-help">Enter your username to reset your password.</small>
|
||||
|
|
@ -146,28 +146,28 @@
|
|||
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="firstname6">Firstname</label>
|
||||
<InputText id="firstname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="lastname6">Lastname</label>
|
||||
<InputText id="lastname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12">
|
||||
<div class="field col-12">
|
||||
<label for="address">Address</label>
|
||||
<Textarea id="address" rows="4" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="city">City</label>
|
||||
<InputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="state">State</label>
|
||||
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="zip">Zip</label>
|
||||
<InputText id="zip" type="text" />
|
||||
</div>
|
||||
|
|
@ -207,8 +207,8 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 489px) {
|
||||
.p-formgroup-inline {
|
||||
.p-field {
|
||||
.formgroup-inline {
|
||||
.field {
|
||||
margin-bottom: 1em !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<AppDoc name="FormLayoutDemo" :sources="sources" github="formlayout/FormLayoutDemo.vue">
|
||||
<h5>Getting Started</h5>
|
||||
<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
|
||||
<p>Core member of the FormLayout is the <i>.field</i> class that wraps the input field and the associated label.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="fieldId">Label</label>
|
||||
<InputText id="fieldId" type="text" />
|
||||
</div>
|
||||
|
|
@ -14,11 +14,11 @@
|
|||
<p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
|
|
@ -27,15 +27,15 @@
|
|||
</code></pre>
|
||||
|
||||
<h5>Vertical Layout with Grid</h5>
|
||||
<p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example
|
||||
<p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.formgrid</i> class to optimize the content for form design. Example
|
||||
below arranges two fields to be displayed next two each other.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field p-col">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<div class="field p-col">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
|
|
@ -48,13 +48,13 @@
|
|||
example, label has a fixed width where container of the inputs gets the remaining space.
|
||||
</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-field p-grid">
|
||||
<div class="field grid">
|
||||
<label for="firstname" class="p-col-fixed" style="width:100px">Firstname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<div class="field grid">
|
||||
<label for="lastname" class="p-col-fixed" style="width:100px">Lastname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="lastname" type="text" />
|
||||
|
|
@ -67,15 +67,15 @@
|
|||
<p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="firstname" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="lastname" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,15 +84,15 @@
|
|||
</code></pre>
|
||||
|
||||
<h5>Inline</h5>
|
||||
<p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels
|
||||
<p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.formgroup-inline</i> to the form container. Note that per design requirements, if labels
|
||||
are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label for="firstname" class="p-sr-only">Firstname</label>
|
||||
<InputText id="firstname" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname" class="p-sr-only">Lastname</label>
|
||||
<InputText id="lastname" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
|
|
@ -102,26 +102,26 @@
|
|||
</code></pre>
|
||||
|
||||
<h5>Checkbox and RadioButton</h5>
|
||||
<p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively.
|
||||
<p>Checkbox and RadioButton have exclusive layout support via <i>.field-checkbox</i> and <i>.field-radiobutton</i> classes respectively.
|
||||
Examples here demonstrates vertical and horizontal layout alternatives.</p>
|
||||
<pre v-code><code>
|
||||
<h3>Vertical Checkbox</h3>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal Checkbox</h3>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
|
||||
<label for="city3">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
|
||||
<label for="city4">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -131,22 +131,22 @@
|
|||
|
||||
<pre v-code><code>
|
||||
<h3>Vertical RadioButton</h3>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
|
||||
<label for="city5">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
|
||||
<label for="city6">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h3>Horizontal RadioButton</h3>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-checkbox">
|
||||
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
|
||||
<label for="city7">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
|
||||
<label for="city8">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -157,7 +157,7 @@
|
|||
<h5>Helper text</h5>
|
||||
<p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-field p-fluid">
|
||||
<div class="field p-fluid">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="username" aria-describedby="username-help" />
|
||||
<small id="username-help">Enter your username to reset your password.</small>
|
||||
|
|
@ -166,30 +166,30 @@
|
|||
</code></pre>
|
||||
|
||||
<h5>Advanced Forms</h5>
|
||||
<p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p>
|
||||
<p>A responsive form with various input fields can easily be implemented using a combination of <i>.field</i>, <i>.formgrid</i> and <i>.p-fluid</i>.</p>
|
||||
<pre v-code><code>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12">
|
||||
<div class="field col-12">
|
||||
<label for="address">Address</label>
|
||||
<Textarea id="address" rows="4" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="city">City</label>
|
||||
<InputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="state">State</label>
|
||||
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="zip">Zip</label>
|
||||
<InputText id="zip" type="text" />
|
||||
</div>
|
||||
|
|
@ -236,11 +236,11 @@ export default {
|
|||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="firstname1">Firstname</label>
|
||||
<InputText id="firstname1" type="text" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname1">Lastname</label>
|
||||
<InputText id="lastname1" type="text" />
|
||||
</div>
|
||||
|
|
@ -249,12 +249,12 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical and Grid</h5>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field p-col">
|
||||
<label for="firstname2">Firstname</label>
|
||||
<InputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<div class="field p-col">
|
||||
<label for="lastname2">Lastname</label>
|
||||
<InputText id="lastname2" type="text" />
|
||||
</div>
|
||||
|
|
@ -263,13 +263,13 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Horizontal and Fixed Width</h5>
|
||||
<div class="p-field p-grid">
|
||||
<div class="field grid">
|
||||
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="firstname3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<div class="field grid">
|
||||
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="lastname3" type="text" />
|
||||
|
|
@ -280,15 +280,15 @@ export default {
|
|||
<div class="card">
|
||||
<h5>Horizontal and Fluid</h5>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<InputText id="firstname4" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<InputText id="lastname4" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -297,12 +297,12 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label for="firstname5" class="p-sr-only">Firstname</label>
|
||||
<InputText id="firstname5" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname5" class="p-sr-only">Lastname</label>
|
||||
<InputText id="lastname5" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
|
|
@ -312,22 +312,22 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical Checkbox</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Checkbox</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
|
||||
<label for="city3">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
|
||||
<label for="city4">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -336,22 +336,22 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical RadioButton</h5>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
|
||||
<label for="city5">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
|
||||
<label for="city6">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal RadioButton</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
|
||||
<label for="city7">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
|
||||
<label for="city8">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -360,7 +360,7 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field p-fluid">
|
||||
<div class="field p-fluid">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="username" aria-describedby="username-help" />
|
||||
<small id="username-help">Enter your username to reset your password.</small>
|
||||
|
|
@ -369,28 +369,28 @@ export default {
|
|||
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="firstname6">Firstname</label>
|
||||
<InputText id="firstname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="lastname6">Lastname</label>
|
||||
<InputText id="lastname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12">
|
||||
<div class="field col-12">
|
||||
<label for="address">Address</label>
|
||||
<Textarea id="address" rows="4" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="city">City</label>
|
||||
<InputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="state">State</label>
|
||||
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="zip">Zip</label>
|
||||
<InputText id="zip" type="text" />
|
||||
</div>
|
||||
|
|
@ -422,8 +422,8 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 489px) {
|
||||
.p-formgroup-inline {
|
||||
.p-field {
|
||||
.formgroup-inline {
|
||||
.field {
|
||||
margin-bottom: 1em !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -447,11 +447,11 @@ textarea {
|
|||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="firstname1">Firstname</label>
|
||||
<InputText id="firstname1" type="text" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname1">Lastname</label>
|
||||
<InputText id="lastname1" type="text" />
|
||||
</div>
|
||||
|
|
@ -460,12 +460,12 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical and Grid</h5>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field p-col">
|
||||
<label for="firstname2">Firstname</label>
|
||||
<InputText id="firstname2" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<div class="field p-col">
|
||||
<label for="lastname2">Lastname</label>
|
||||
<InputText id="lastname2" type="text" />
|
||||
</div>
|
||||
|
|
@ -474,13 +474,13 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Horizontal and Fixed Width</h5>
|
||||
<div class="p-field p-grid">
|
||||
<div class="field grid">
|
||||
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="firstname3" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<div class="field grid">
|
||||
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="lastname3" type="text" />
|
||||
|
|
@ -491,15 +491,15 @@ textarea {
|
|||
<div class="card">
|
||||
<h5>Horizontal and Fluid</h5>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<InputText id="firstname4" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<InputText id="lastname4" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -508,12 +508,12 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label for="firstname5" class="p-sr-only">Firstname</label>
|
||||
<InputText id="firstname5" type="text" placeholder="Firstname" />
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname5" class="p-sr-only">Lastname</label>
|
||||
<InputText id="lastname5" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
|
|
@ -523,22 +523,22 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical Checkbox</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Checkbox</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
|
||||
<label for="city3">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
|
||||
<label for="city4">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -547,22 +547,22 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical RadioButton</h5>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
|
||||
<label for="city5">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
|
||||
<label for="city6">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal RadioButton</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
|
||||
<label for="city7">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
|
||||
<label for="city8">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -571,7 +571,7 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field p-fluid">
|
||||
<div class="field p-fluid">
|
||||
<label for="username">Username</label>
|
||||
<InputText id="username" type="username" aria-describedby="username-help" />
|
||||
<small id="username-help">Enter your username to reset your password.</small>
|
||||
|
|
@ -580,28 +580,28 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="firstname6">Firstname</label>
|
||||
<InputText id="firstname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="lastname6">Lastname</label>
|
||||
<InputText id="lastname6" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12">
|
||||
<div class="field col-12">
|
||||
<label for="address">Address</label>
|
||||
<Textarea id="address" rows="4" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="city">City</label>
|
||||
<InputText id="city" type="text" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="state">State</label>
|
||||
<Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="zip">Zip</label>
|
||||
<InputText id="zip" type="text" />
|
||||
</div>
|
||||
|
|
@ -635,8 +635,8 @@ export default {
|
|||
|
||||
<style lang="scss" scoped>
|
||||
@media screen and (max-width: 489px) {
|
||||
.p-formgroup-inline {
|
||||
.p-field {
|
||||
.formgroup-inline {
|
||||
.field {
|
||||
margin-bottom: 1em !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -662,11 +662,11 @@ textarea {
|
|||
<div class="card">
|
||||
<h5>Vertical</h5>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="firstname1">Firstname</label>
|
||||
<p-inputtext id="firstname1" type="text"></p-inputtext>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname1">Lastname</label>
|
||||
<p-inputtext id="lastname1" type="text"></p-inputtext>
|
||||
</div>
|
||||
|
|
@ -675,12 +675,12 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical and Grid</h5>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field p-col">
|
||||
<label for="firstname2">Firstname</label>
|
||||
<p-inputtext id="firstname2" type="text"></p-inputtext>
|
||||
</div>
|
||||
<div class="p-field p-col">
|
||||
<div class="field p-col">
|
||||
<label for="lastname2">Lastname</label>
|
||||
<p-inputtext id="lastname2" type="text"></p-inputtext>
|
||||
</div>
|
||||
|
|
@ -689,13 +689,13 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Horizontal and Fixed Width</h5>
|
||||
<div class="p-field p-grid">
|
||||
<div class="field grid">
|
||||
<label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
|
||||
<div class="p-col">
|
||||
<p-inputtext id="firstname3" type="text"></p-inputtext>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<div class="field grid">
|
||||
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
|
||||
<div class="p-col">
|
||||
<p-inputtext id="lastname3" type="text"></p-inputtext>
|
||||
|
|
@ -706,15 +706,15 @@ textarea {
|
|||
<div class="card">
|
||||
<h5>Horizontal and Fluid</h5>
|
||||
<div class="p-fluid">
|
||||
<div class="p-field p-grid">
|
||||
<label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<p-inputtext id="firstname4" type="text"></p-inputtext>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-field p-grid">
|
||||
<label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
|
||||
<div class="p-col-12 p-md-10">
|
||||
<div class="field grid">
|
||||
<label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
|
||||
<div class="col-12 md:col-10">
|
||||
<p-inputtext id="lastname4" type="text"></p-inputtext>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -723,12 +723,12 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Inline</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field">
|
||||
<label for="firstname5" class="p-sr-only">Firstname</label>
|
||||
<p-inputtext id="firstname5" type="text" placeholder="Firstname"></p-inputtext>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="lastname5" class="p-sr-only">Lastname</label>
|
||||
<p-inputtext id="lastname5" type="text" placeholder="Lastname"></p-inputtext>
|
||||
</div>
|
||||
|
|
@ -738,22 +738,22 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical Checkbox</h5>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox id="city1" name="city1" value="Chicago" v-model="cities1"></p-checkbox>
|
||||
<label for="city1">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1"></p-checkbox>
|
||||
<label for="city2">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Checkbox</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-checkbox">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox id="city3" name="city2" value="Chicago" v-model="cities2"></p-checkbox>
|
||||
<label for="city3">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-checkbox">
|
||||
<div class="field-checkbox">
|
||||
<p-checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2"></p-checkbox>
|
||||
<label for="city4">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -762,22 +762,22 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Vertical RadioButton</h5>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<p-radiobutton id="city5" name="city1" value="Chicago" v-model="city1"></p-radiobutton>
|
||||
<label for="city5">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<p-radiobutton id="city6" name="city1" value="Los Angeles" v-model="city1"></p-radiobutton>
|
||||
<label for="city6">Los Angeles</label>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal RadioButton</h5>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-radiobutton">
|
||||
<p-radiobutton id="city7" name="city2" value="Chicago" v-model="city2"></p-radiobutton>
|
||||
<label for="city7">Chicago</label>
|
||||
</div>
|
||||
<div class="p-field-radiobutton">
|
||||
<div class="field-radiobutton">
|
||||
<p-radiobutton id="city8" name="city2" value="Los Angeles" v-model="city2"></p-radiobutton>
|
||||
<label for="city8">Los Angeles</label>
|
||||
</div>
|
||||
|
|
@ -786,7 +786,7 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field p-fluid">
|
||||
<div class="field p-fluid">
|
||||
<label for="username">Username</label>
|
||||
<p-inputtext id="username" type="username" aria-describedby="username-help"></p-inputtext>
|
||||
<small id="username-help">Enter your username to reset your password.</small>
|
||||
|
|
@ -795,28 +795,28 @@ textarea {
|
|||
|
||||
<div class="card">
|
||||
<h5>Advanced</h5>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="firstname6">Firstname</label>
|
||||
<p-inputtext id="firstname6" type="text"></p-inputtext>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="lastname6">Lastname</label>
|
||||
<p-inputtext id="lastname6" type="text"></p-inputtext>
|
||||
</div>
|
||||
<div class="p-field p-col-12">
|
||||
<div class="field col-12">
|
||||
<label for="address">Address</label>
|
||||
<p-textarea id="address" rows="4"></p-textarea>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-6">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="city">City</label>
|
||||
<p-inputtext id="city" type="text"></p-inputtext>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="state">State</label>
|
||||
<p-dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select"></p-dropdown>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="zip">Zip</label>
|
||||
<p-inputtext id="zip" type="text"></p-inputtext>
|
||||
</div>
|
||||
|
|
@ -861,7 +861,7 @@ textarea {
|
|||
|
||||
<style>
|
||||
@media screen and (max-width: 489px) {
|
||||
.p-formgroup-inline .p-field {
|
||||
.formgroup-inline .field {
|
||||
margin-bottom: 1em !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnail="{item}">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnail="{item}">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@
|
|||
</template>
|
||||
</Galleria>
|
||||
|
||||
<div v-if="images" class="p-grid" style="max-width: 400px;">
|
||||
<div v-for="(image, index) of images" class="p-col-3" :key="index">
|
||||
<div v-if="images" class="grid" style="max-width: 400px;">
|
||||
<div v-for="(image, index) of images" class="col-3" :key="index">
|
||||
<img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -99,8 +99,8 @@
|
|||
</template>
|
||||
</Galleria>
|
||||
|
||||
<div v-if="images" class="p-grid" style="max-width: 400px;">
|
||||
<div v-for="(image, index) of images" class="p-col-3" :key="index">
|
||||
<div v-if="images" class="grid" style="max-width: 400px;">
|
||||
<div v-for="(image, index) of images" class="col-3" :key="index">
|
||||
<img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
<img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
|
||||
</template>
|
||||
<template #thumbnail="slotProps">
|
||||
<div class="p-grid p-nogutter p-justify-center">
|
||||
<div class="grid grid-nogutter justify-content-center">
|
||||
<img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
<p>Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.</p>
|
||||
|
||||
<h5>Basic</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<div class="grid">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -26,331 +26,331 @@
|
|||
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
||||
|
||||
<div style="margin-top: .5em">
|
||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||
<div v-for="col of columns" :key="col" class="p-col">
|
||||
<transition-group name="dynamic-box" tag="div" class="grid">
|
||||
<div v-for="col of columns" :key="col" class="col">
|
||||
<div class="box">{{col}}</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<h5>Reverse Direction</h5>
|
||||
<div class="p-grid p-flex-row-reverse">
|
||||
<div class="p-col">
|
||||
<div class="grid flex-row-reverse">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Column Direction</h5>
|
||||
<div class="p-grid p-flex-column">
|
||||
<div class="p-col">
|
||||
<div class="grid flex-column">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Reverse Column Direction</h5>
|
||||
<div class="p-grid p-flex-column-reverse">
|
||||
<div class="p-col">
|
||||
<div class="grid flex-column-reverse">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>12 Column Grid</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="grid">
|
||||
<div class="col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-2">
|
||||
<div class="grid">
|
||||
<div class="col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="grid">
|
||||
<div class="col-8">
|
||||
<div class="box">8</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-2">
|
||||
<div class="col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>MultiLine</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Fixed Width Column</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-fixed" style="width:100px">
|
||||
<div class="grid">
|
||||
<div class="col-fixed" style="width:100px">
|
||||
<div class="box">100px</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">auto</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Responsive</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="box">col-12 md:col-6 lg:col-3</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="box">col-12 md:col-6 lg:col-3</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="box">col-12 md:col-6 lg:col-3</div>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-6 p-lg-3">
|
||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="box">col-12 md:col-6 lg:col-3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Alignment - Start</h5>
|
||||
<div class="p-grid p-jc-start">
|
||||
<div class="p-col-2">
|
||||
<div class="grid justify-content-start">
|
||||
<div class="col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Alignment - End</h5>
|
||||
<div class="p-grid p-jc-end">
|
||||
<div class="p-col-2">
|
||||
<div class="grid justify-content-end">
|
||||
<div class="col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Alignment - Center</h5>
|
||||
<div class="p-grid p-jc-center">
|
||||
<div class="p-col-2">
|
||||
<div class="grid justify-content-center">
|
||||
<div class="col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Alignment - Between</h5>
|
||||
<div class="p-grid p-jc-between">
|
||||
<div class="p-col-2">
|
||||
<div class="grid justify-content-center">
|
||||
<div class="col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Alignment - Around</h5>
|
||||
<div class="p-grid p-jc-around">
|
||||
<div class="p-col-2">
|
||||
<div class="grid justify-content-around">
|
||||
<div class="col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Horizontal Alignment - Even</h5>
|
||||
<div class="p-grid p-jc-evenly">
|
||||
<div class="p-col-2">
|
||||
<div class="grid justify-content-evenly">
|
||||
<div class="col-2">
|
||||
<div class="box">2</div>
|
||||
</div>
|
||||
<div class="p-col-1">
|
||||
<div class="col-1">
|
||||
<div class="box">1</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Vertical Alignment - Start</h5>
|
||||
<div class="p-grid p-ai-start vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="grid align-items-start vertical-container">
|
||||
<div class="col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Vertical Alignment - End</h5>
|
||||
<div class="p-grid p-ai-end vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="grid align-items-end vertical-container">
|
||||
<div class="col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Vertical Alignment - Center</h5>
|
||||
<div class="p-grid p-ai-center vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="grid align-items-center vertical-container">
|
||||
<div class="col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Vertical Alignment - Stretch</h5>
|
||||
<div class="p-grid p-ai-stretch vertical-container">
|
||||
<div class="p-col">
|
||||
<div class="grid align-items-stretch vertical-container">
|
||||
<div class="col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Vertical Alignment - Per Column</h5>
|
||||
<div class="p-grid vertical-container">
|
||||
<div class="p-col p-as-start">
|
||||
<div class="grid vertical-container">
|
||||
<div class="col align-self-start">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-as-center">
|
||||
<div class="col align-self-center">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col p-as-end">
|
||||
<div class="col align-self-end">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Offset</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6 p-offset-3">
|
||||
<div class="grid">
|
||||
<div class="col-6 col-offset-3">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-4">
|
||||
<div class="grid">
|
||||
<div class="col-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
<div class="p-col-4 p-offset-4">
|
||||
<div class="col-4 col-offset-4">
|
||||
<div class="box">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Nested</h5>
|
||||
<div class="p-grid nested-grid">
|
||||
<div class="p-col-8">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6">
|
||||
<div class="grid nested-grid">
|
||||
<div class="col-8">
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-6">
|
||||
<div class="col-6">
|
||||
<div class="box">6</div>
|
||||
</div>
|
||||
<div class="p-col-12">
|
||||
<div class="col-12">
|
||||
<div class="box">12</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-col-4">
|
||||
<div class="col-4">
|
||||
<div class="box box-stretched">4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Panels</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col">
|
||||
<div class="grid">
|
||||
<div class="col">
|
||||
<Panel header="Header">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
|
@ -358,7 +358,7 @@
|
|||
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<Panel header="Header">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
|
@ -366,7 +366,7 @@
|
|||
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</Panel>
|
||||
</div>
|
||||
<div class="p-col">
|
||||
<div class="col">
|
||||
<Panel header="Header">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
|
|
@ -426,7 +426,7 @@ export default {
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.nested-grid .p-col-4 {
|
||||
.nested-grid .col-4 {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -94,8 +94,8 @@ export default {
|
|||
|
||||
<InputText v-model="filter" class="icon-filter" placeholder="Search an icon" />
|
||||
|
||||
<div class="p-grid icons-list">
|
||||
<div class="p-col-12 p-md-2" v-for="icon of filteredIcons" :key="icon.properties.name">
|
||||
<div class="grid icons-list">
|
||||
<div class="col-12 md:col-2 icon" v-for="icon of filteredIcons" :key="icon.properties.name">
|
||||
<i :class="'pi pi-' + icon.properties.name"></i>
|
||||
<div>pi-{{icon.properties.name}}</div>
|
||||
</div>
|
||||
|
|
@ -158,7 +158,7 @@ export default {
|
|||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.p-md-2 {
|
||||
.icon {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@
|
|||
<div class="card">
|
||||
|
||||
<h5>Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputText placeholder="Price" />
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">W</span>
|
||||
<InputText placeholder="Website" />
|
||||
|
|
@ -39,8 +39,8 @@
|
|||
</div>
|
||||
|
||||
<h5>Multiple Addons</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-clock"></i>
|
||||
|
|
@ -56,22 +56,22 @@
|
|||
</div>
|
||||
|
||||
<h5>Button Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button label="Search"/>
|
||||
<InputText placeholder="Keyword"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Keyword"/>
|
||||
<Button icon="pi pi-search" class="p-button-warning"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button icon="pi pi-check" class="p-button-success"/>
|
||||
<InputText placeholder="Vote"/>
|
||||
|
|
@ -81,8 +81,8 @@
|
|||
</div>
|
||||
|
||||
<h5>Checkbox and RadioButton</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked1" :binary="true" />
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Price"/>
|
||||
<span class="p-inputgroup-addon">
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked2" :binary="true" />
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
|
|
@ -23,7 +23,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputText placeholder="Price" />
|
||||
|
|
@ -31,7 +31,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">W</span>
|
||||
<InputText placeholder="Website" />
|
||||
|
|
@ -40,8 +40,8 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Multiple Addons</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-clock"></i>
|
||||
|
|
@ -57,22 +57,22 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Button Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button label="Search"/>
|
||||
<InputText placeholder="Keyword"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Keyword"/>
|
||||
<Button icon="pi pi-search" class="p-button-warning"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button icon="pi pi-check" class="p-button-success"/>
|
||||
<InputText placeholder="Vote"/>
|
||||
|
|
@ -82,8 +82,8 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Checkbox and RadioButton</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked1" :binary="true" />
|
||||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Price"/>
|
||||
<span class="p-inputgroup-addon">
|
||||
|
|
@ -101,7 +101,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked2" :binary="true" />
|
||||
|
|
@ -135,8 +135,8 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
|
|
@ -145,7 +145,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<InputText placeholder="Price" />
|
||||
|
|
@ -153,7 +153,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">W</span>
|
||||
<InputText placeholder="Website" />
|
||||
|
|
@ -162,8 +162,8 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Multiple Addons</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-clock"></i>
|
||||
|
|
@ -179,22 +179,22 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Button Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button label="Search"/>
|
||||
<InputText placeholder="Keyword"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Keyword"/>
|
||||
<Button icon="pi pi-search" class="p-button-warning"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<Button icon="pi pi-check" class="p-button-success"/>
|
||||
<InputText placeholder="Vote"/>
|
||||
|
|
@ -204,8 +204,8 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Checkbox and RadioButton</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked1" :binary="true" />
|
||||
|
|
@ -214,7 +214,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<InputText placeholder="Price"/>
|
||||
<span class="p-inputgroup-addon">
|
||||
|
|
@ -223,7 +223,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<Checkbox v-model="checked2" :binary="true" />
|
||||
|
|
@ -259,8 +259,8 @@ export default {
|
|||
<script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<h5>Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-user"></i>
|
||||
|
|
@ -269,7 +269,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">$</span>
|
||||
<p-inputtext placeholder="Price"></p-inputtext>
|
||||
|
|
@ -277,7 +277,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">W</span>
|
||||
<p-inputtext placeholder="Website"></p-inputtext>
|
||||
|
|
@ -286,8 +286,8 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Multiple Addons</h5>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<i class="pi pi-clock"></i>
|
||||
|
|
@ -303,22 +303,22 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Button Addons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<p-button label="Search"></p-button>
|
||||
<p-inputtext placeholder="Keyword"></p-inputtext>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<p-inputtext placeholder="Keyword"></p-inputtext>
|
||||
<p-button icon="pi pi-search" class="p-button-warning"></p-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="p-inputgroup">
|
||||
<p-button icon="pi pi-check" class="p-button-success"></p-button>
|
||||
<p-inputtext placeholder="Vote"></p-inputtext>
|
||||
|
|
@ -328,8 +328,8 @@ export default {
|
|||
</div>
|
||||
|
||||
<h5>Checkbox and RadioButton</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="grid p-fluid">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<p-checkbox v-model="checked1" :binary="true"></p-checkbox>
|
||||
|
|
@ -338,7 +338,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<p-inputtext placeholder="Price"></p-inputtext>
|
||||
<span class="p-inputgroup-addon">
|
||||
|
|
@ -347,7 +347,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-12">
|
||||
<div class="col-12 md:col-12">
|
||||
<div class="p-inputgroup">
|
||||
<span class="p-inputgroup-addon">
|
||||
<p-checkbox v-model="checked2" :binary="true"></p-checkbox>
|
||||
|
|
|
|||
|
|
@ -10,33 +10,33 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="basic">Basic</label>
|
||||
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="ssn">SSN</label>
|
||||
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="date">Date</label>
|
||||
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="Phone">Phone</label>
|
||||
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="phoneext">Phone Ext</label>
|
||||
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="serial">Serial</label>
|
||||
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -139,33 +139,33 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="basic">Basic</label>
|
||||
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="ssn">SSN</label>
|
||||
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="date">Date</label>
|
||||
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="Phone">Phone</label>
|
||||
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="phoneext">Phone Ext</label>
|
||||
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="serial">Serial</label>
|
||||
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
|
||||
</div>
|
||||
|
|
@ -194,33 +194,33 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="basic">Basic</label>
|
||||
<InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="ssn">SSN</label>
|
||||
<InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="date">Date</label>
|
||||
<InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="Phone">Phone</label>
|
||||
<InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="phoneext">Phone Ext</label>
|
||||
<InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="serial">Serial</label>
|
||||
<InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
|
||||
</div>
|
||||
|
|
@ -250,33 +250,33 @@ export default {
|
|||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<div class="p-fluid p-formgrid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="basic">Basic</label>
|
||||
<p-inputmask mask="99-999999" v-model="val1" placeholder="99-999999"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="ssn">SSN</label>
|
||||
<p-inputmask mask="999-99-9999" v-model="val2" placeholder="999-99-9999"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="date">Date</label>
|
||||
<p-inputmask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="Phone">Phone</label>
|
||||
<p-inputmask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="phoneext">Phone Ext</label>
|
||||
<p-inputmask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"></p-inputmask>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<label for="serial">Serial</label>
|
||||
<p-inputmask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999"></p-inputmask>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,100 +12,100 @@
|
|||
<div class="card">
|
||||
|
||||
<h5>Numerals</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="p-fluid grid formgrid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="integeronly">Integer Only</label>
|
||||
<InputNumber id="integeronly" v-model="value1" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="withoutgrouping">Without Grouping</label>
|
||||
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmaxfraction">Min-Max Fraction Digits</label>
|
||||
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmax">Min-Max Boundaries</label>
|
||||
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-user">User Locale</label>
|
||||
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-us">United States Locale</label>
|
||||
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-german">German Locale</label>
|
||||
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-indian">Indian Locale</label>
|
||||
<InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Currency</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-us">United States</label>
|
||||
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-germany">Germany</label>
|
||||
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-india">India</label>
|
||||
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-japan">Japan</label>
|
||||
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Prefix and Suffix</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="mile">Mile</label>
|
||||
<InputNumber id="mile" v-model="value13" suffix=" mi" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="percent">Percent</label>
|
||||
<InputNumber id="percent" v-model="value14" prefix="%" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="expiry">Expiry</label>
|
||||
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="temperature">Temperature</label>
|
||||
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Buttons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="stacked">Stacked</label>
|
||||
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="horizontal">Horizontal with Step</label>
|
||||
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
|
||||
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmax-buttons">Min-Max Boundaries</label>
|
||||
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="vertical" style="display: block">Vertical</label>
|
||||
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
|
||||
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
|
||||
|
|
|
|||
|
|
@ -409,100 +409,100 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Numerals</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="p-fluid grid formgrid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="integeronly">Integer Only</label>
|
||||
<InputNumber id="integeronly" v-model="value1" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="withoutgrouping">Without Grouping</label>
|
||||
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmaxfraction">Min-Max Fraction Digits</label>
|
||||
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmax">Min-Max Boundaries</label>
|
||||
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-user">User Locale</label>
|
||||
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-us">United States Locale</label>
|
||||
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-german">German Locale</label>
|
||||
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-indian">Indian Locale</label>
|
||||
<InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Currency</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-us">United States</label>
|
||||
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-germany">Germany</label>
|
||||
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-india">India</label>
|
||||
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-japan">Japan</label>
|
||||
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Prefix and Suffix</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="mile">Mile</label>
|
||||
<InputNumber id="mile" v-model="value13" suffix=" mi" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="percent">Percent</label>
|
||||
<InputNumber id="percent" v-model="value14" prefix="%" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="expiry">Expiry</label>
|
||||
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="temperature">Temperature</label>
|
||||
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Buttons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="stacked">Stacked</label>
|
||||
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="horizontal">Horizontal with Step</label>
|
||||
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
|
||||
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmax-buttons">Min-Max Boundaries</label>
|
||||
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="vertical" style="display: block">Vertical</label>
|
||||
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
|
||||
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
|
||||
|
|
@ -546,100 +546,100 @@ export default {
|
|||
<template>
|
||||
<div>
|
||||
<h5>Numerals</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="p-fluid grid formgrid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="integeronly">Integer Only</label>
|
||||
<InputNumber id="integeronly" v-model="value1" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="withoutgrouping">Without Grouping</label>
|
||||
<InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmaxfraction">Min-Max Fraction Digits</label>
|
||||
<InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmax">Min-Max Boundaries</label>
|
||||
<InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-user">User Locale</label>
|
||||
<InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-us">United States Locale</label>
|
||||
<InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-german">German Locale</label>
|
||||
<InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-indian">Indian Locale</label>
|
||||
<InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Currency</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-us">United States</label>
|
||||
<InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-germany">Germany</label>
|
||||
<InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-india">India</label>
|
||||
<InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-japan">Japan</label>
|
||||
<InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Prefix and Suffix</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="mile">Mile</label>
|
||||
<InputNumber id="mile" v-model="value13" suffix=" mi" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="percent">Percent</label>
|
||||
<InputNumber id="percent" v-model="value14" prefix="%" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="expiry">Expiry</label>
|
||||
<InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="temperature">Temperature</label>
|
||||
<InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Buttons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="stacked">Stacked</label>
|
||||
<InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="horizontal">Horizontal with Step</label>
|
||||
<InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
|
||||
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmax-buttons">Min-Max Boundaries</label>
|
||||
<InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="vertical" style="display: block">Vertical</label>
|
||||
<InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
|
||||
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
|
||||
|
|
@ -684,100 +684,100 @@ export default {
|
|||
tabName: 'Browser Source',
|
||||
content: `<div id="app">
|
||||
<h5>Numerals</h5>
|
||||
<div class="p-fluid p-grid p-formgrid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="p-fluid grid formgrid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="integeronly">Integer Only</label>
|
||||
<p-inputnumber id="integeronly" v-model="value1"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="withoutgrouping">Without Grouping</label>
|
||||
<p-inputnumber id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmaxfraction">Min-Max Fraction Digits</label>
|
||||
<p-inputnumber id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmax">Min-Max Boundaries</label>
|
||||
<p-inputnumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-user">User Locale</label>
|
||||
<p-inputnumber id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-us">United States Locale</label>
|
||||
<p-inputnumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-german">German Locale</label>
|
||||
<p-inputnumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="locale-indian">Indian Locale</label>
|
||||
<p-inputnumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Currency</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-us">United States</label>
|
||||
<p-inputnumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-germany">Germany</label>
|
||||
<p-inputnumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-india">India</label>
|
||||
<p-inputnumber id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="currency-japan">Japan</label>
|
||||
<p-inputnumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Prefix and Suffix</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="mile">Mile</label>
|
||||
<p-inputnumber id="mile" v-model="value13" suffix=" mi"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="percent">Percent</label>
|
||||
<p-inputnumber id="percent" v-model="value14" prefix="%"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="expiry">Expiry</label>
|
||||
<p-inputnumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="temperature">Temperature</label>
|
||||
<p-inputnumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Buttons</h5>
|
||||
<div class="p-grid p-fluid">
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="grid p-fluid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="stacked">Stacked</label>
|
||||
<p-inputnumber id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="horizontal">Horizontal with Step</label>
|
||||
<p-inputnumber id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25"
|
||||
decrement-button-class="p-button-danger" increment-button-class="p-button-success" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus" mode="currency" currency="EUR"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="minmax-buttons">Min-Max Boundaries</label>
|
||||
<p-inputnumber id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-field p-col-12 p-md-3">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="vertical" style="display: block">Vertical</label>
|
||||
<p-inputnumber id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem"
|
||||
decrement-button-class="p-button-secondary" increment-button-class="p-button-secondary" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus"></p-inputnumber>
|
||||
|
|
|
|||
|
|
@ -33,14 +33,14 @@
|
|||
</span>
|
||||
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username1">Username</label>
|
||||
<InputText id="username1" type="username" aria-describedby="username1-help" />
|
||||
<small id="username1-help">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
|
||||
<h5>Invalid</h5>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username2">Username</label>
|
||||
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
||||
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||
|
|
@ -93,7 +93,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.p-field * {
|
||||
.field * {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -182,14 +182,14 @@ export default {
|
|||
</span>
|
||||
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username1">Username</label>
|
||||
<InputText id="username1" type="username" aria-describedby="username1-help" />
|
||||
<small id="username1-help">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
|
||||
<h5>Invalid</h5>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username2">Username</label>
|
||||
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
||||
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||
|
|
@ -233,7 +233,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.p-field * {
|
||||
.field * {
|
||||
display: block;
|
||||
}
|
||||
</style>`
|
||||
|
|
@ -266,14 +266,14 @@ export default {
|
|||
</span>
|
||||
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username1">Username</label>
|
||||
<InputText id="username1" type="username" aria-describedby="username1-help" />
|
||||
<small id="username1-help">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
|
||||
<h5>Invalid</h5>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username2">Username</label>
|
||||
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
||||
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||
|
|
@ -319,7 +319,7 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.p-field * {
|
||||
.field * {
|
||||
display: block;
|
||||
}
|
||||
</style>`
|
||||
|
|
@ -351,14 +351,14 @@ export default {
|
|||
</span>
|
||||
|
||||
<h5>Help Text</h5>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username1">Username</label>
|
||||
<p-inputtext id="username1" type="username" aria-describedby="username1-help"></p-inputtext>
|
||||
<small id="username1-help">Enter your username to reset your password.</small>
|
||||
</div>
|
||||
|
||||
<h5>Invalid</h5>
|
||||
<div class="p-field">
|
||||
<div class="field">
|
||||
<label for="username2">Username</label>
|
||||
<p-inputtext id="username2" type="username" aria-describedby="username2-help" class="p-invalid"></p-inputtext>
|
||||
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||
|
|
@ -409,7 +409,7 @@ export default {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.p-field * {
|
||||
.field * {
|
||||
display: block;
|
||||
}
|
||||
</style>`
|
||||
|
|
|
|||
|
|
@ -10,42 +10,42 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,42 +167,42 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -349,42 +349,42 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
|
||||
:optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -538,42 +538,42 @@ export default {
|
|||
<script src="./CountryService.js"><\\/script>
|
||||
<script src="./NodeService.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<div class="p-fluid p-grid">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="p-fluid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-inputtext id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid"></p-inputtext>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid"></p-autocomplete>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :show-icon="true"></p-calendar>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid"></p-chips>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy" placeholder="InputMask" class="p-invalid"></p-inputmask>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-inputnumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid"></p-inputnumber>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-cascadeselect v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
|
||||
:option-group-children="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid"></p-cascadeselect>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-dropdown id="dropdown" v-model="value7" :options="cities" option-label="name" placeholder="Dropdown" class="p-invalid"></p-dropdown>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-multiselect id="multiselect" v-model="value8" :options="cities" option-label="name" placeholder="MultiSelect" class="p-invalid"></p-multiselect>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-treeselect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></p-treeselect>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-password id="password" v-model="value10" placeholder="Password" class="p-invalid"></p-password>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p-textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid"></p-textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,41 +10,41 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<div class="p-grid p-formgrid p-text-center">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="grid formgrid text-center">
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Basic</h5>
|
||||
<Knob v-model="value1" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Readonly</h5>
|
||||
<Knob v-model="value2" readonly />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5>Disabled</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Disabled</h5>
|
||||
<Knob v-model="value3" disabled />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Min/Max</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Min/Max</h5>
|
||||
<Knob v-model="value4" :min="-50" :max="50" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Step</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Step</h5>
|
||||
<Knob v-model="value5" :step="10" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Template</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Template</h5>
|
||||
<Knob v-model="value6" valueTemplate="{value}%" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Stroke</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Stroke</h5>
|
||||
<Knob v-model="value7" :strokeWidth="5" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Size</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Size</h5>
|
||||
<Knob v-model="value8" :size="200"/>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Color</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Color</h5>
|
||||
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -222,41 +222,41 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-grid p-formgrid p-text-center">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="grid formgrid text-center">
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Basic</h5>
|
||||
<Knob v-model="value1" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Readonly</h5>
|
||||
<Knob v-model="value2" readonly />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5>Disabled</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Disabled</h5>
|
||||
<Knob v-model="value3" disabled />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Min/Max</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Min/Max</h5>
|
||||
<Knob v-model="value4" :min="-50" :max="50" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Step</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Step</h5>
|
||||
<Knob v-model="value5" :step="10" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Template</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Template</h5>
|
||||
<Knob v-model="value6" valueTemplate="{value}%" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Stroke</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Stroke</h5>
|
||||
<Knob v-model="value7" :strokeWidth="5" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Size</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Size</h5>
|
||||
<Knob v-model="value8" :size="200"/>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Color</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Color</h5>
|
||||
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -287,41 +287,41 @@ export default {
|
|||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-grid p-formgrid p-text-center">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="grid formgrid text-center">
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Basic</h5>
|
||||
<Knob v-model="value1" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Readonly</h5>
|
||||
<Knob v-model="value2" readonly />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5>Disabled</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Disabled</h5>
|
||||
<Knob v-model="value3" disabled />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Min/Max</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Min/Max</h5>
|
||||
<Knob v-model="value4" :min="-50" :max="50" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Step</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Step</h5>
|
||||
<Knob v-model="value5" :step="10" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Template</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Template</h5>
|
||||
<Knob v-model="value6" valueTemplate="{value}%" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Stroke</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Stroke</h5>
|
||||
<Knob v-model="value7" :strokeWidth="5" />
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Size</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Size</h5>
|
||||
<Knob v-model="value8" :size="200"/>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Color</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Color</h5>
|
||||
<Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -352,41 +352,41 @@ export default {
|
|||
tabName: 'Browser Source',
|
||||
imports: `<script src="https://unpkg.com/primevue@^3/knob/knob.min.js"><\\/script>`,
|
||||
content: `<div id="app">
|
||||
<div class="p-grid p-formgrid p-text-center">
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="grid formgrid text-center">
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Basic</h5>
|
||||
<p-knob v-model="value1"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Readonly</h5>
|
||||
<p-knob v-model="value2" readonly></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5>Disabled</h5>
|
||||
<p-knob v-model="value3" disabled></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Min/Max</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Min/Max</h5>
|
||||
<p-knob v-model="value4" :min="-50" :max="50"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Step</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Step</h5>
|
||||
<p-knob v-model="value5" :step="10"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Template</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Template</h5>
|
||||
<p-knob v-model="value6" value-template="{value}%"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Stroke</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Stroke</h5>
|
||||
<p-knob v-model="value7" :stroke-width="5"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Size</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Size</h5>
|
||||
<p-knob v-model="value8" :size="200"></p-knob>
|
||||
</div>
|
||||
<div class="p-field p-col-12 p-md-4">
|
||||
<h5 class="p-mt-3">Color</h5>
|
||||
<div class="field col-12 md:col-4">
|
||||
<h5 class="mt-3">Color</h5>
|
||||
<p-knob v-model="value9" value-color="SlateGray" range-color="MediumTurquoise"></p-knob>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<h5>Grouped</h5>
|
||||
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -389,8 +389,8 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -400,7 +400,7 @@ export default {
|
|||
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -483,8 +483,8 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -494,7 +494,7 @@ export default {
|
|||
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -581,8 +581,8 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<p-listbox v-model="selectedGroupedCity" :options="groupedCities" option-label="label" style="width:15rem" option-group-label="label" option-group-children="items" list-style="max-height:250px">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -592,7 +592,7 @@ export default {
|
|||
<p-listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" option-label="name" list-style="max-height:250px" style="width:15rem" filter-placeholder="Search">
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<span v-if="showEditor" class="p-d-flex p-jc-end">
|
||||
<span v-if="showEditor" class="flex justify-content-end">
|
||||
<SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" v-show="false"/>
|
||||
</span>
|
||||
</template>
|
||||
|
|
@ -302,7 +302,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
files: {
|
||||
'package.json': {
|
||||
|
|
@ -418,7 +417,7 @@ export default {
|
|||
<!-- PrimeVue -->
|
||||
<link href="https://unpkg.com/primevue@^3/resources/themes/lara-light-indigo/theme.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
|
||||
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
|
||||
|
||||
<!-- Dependencies -->
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<div class="card">
|
||||
<Menubar :model="items">
|
||||
<template #start>
|
||||
<img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2">
|
||||
<img alt="logo" src="../../assets/images/logo.svg" height="40" class="mr-2">
|
||||
</template>
|
||||
<template #end>
|
||||
<InputText placeholder="Search" type="text" />
|
||||
|
|
@ -33,132 +33,129 @@ export default {
|
|||
return {
|
||||
items: [
|
||||
{
|
||||
label:'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-plus',
|
||||
items:[
|
||||
{
|
||||
label:'Bookmark',
|
||||
icon:'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label:'Video',
|
||||
icon:'pi pi-fw pi-video'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Export',
|
||||
icon:'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
label:'File',
|
||||
icon:'pi pi-fw pi-file',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-plus',
|
||||
items:[
|
||||
{
|
||||
label:'Bookmark',
|
||||
icon:'pi pi-fw pi-bookmark'
|
||||
},
|
||||
{
|
||||
label:'Video',
|
||||
icon:'pi pi-fw pi-video'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-trash'
|
||||
},
|
||||
{
|
||||
separator:true
|
||||
},
|
||||
{
|
||||
label:'Export',
|
||||
icon:'pi pi-fw pi-external-link'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Left',
|
||||
icon:'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label:'Right',
|
||||
icon:'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label:'Center',
|
||||
icon:'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label:'Justify',
|
||||
icon:'pi pi-fw pi-align-justify'
|
||||
},
|
||||
|
||||
]
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Left',
|
||||
icon:'pi pi-fw pi-align-left'
|
||||
},
|
||||
{
|
||||
label:'Right',
|
||||
icon:'pi pi-fw pi-align-right'
|
||||
},
|
||||
{
|
||||
label:'Center',
|
||||
icon:'pi pi-fw pi-align-center'
|
||||
},
|
||||
{
|
||||
label:'Justify',
|
||||
icon:'pi pi-fw pi-align-justify'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Users',
|
||||
icon:'pi pi-fw pi-user',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-user-plus',
|
||||
label:'Users',
|
||||
icon:'pi pi-fw pi-user',
|
||||
items:[
|
||||
{
|
||||
label:'New',
|
||||
icon:'pi pi-fw pi-user-plus',
|
||||
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-user-minus',
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-user-minus',
|
||||
|
||||
},
|
||||
{
|
||||
label:'Search',
|
||||
icon:'pi pi-fw pi-users',
|
||||
items:[
|
||||
{
|
||||
label:'Filter',
|
||||
icon:'pi pi-fw pi-filter',
|
||||
items:[
|
||||
{
|
||||
label:'Print',
|
||||
icon:'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon:'pi pi-fw pi-bars',
|
||||
label:'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Search',
|
||||
icon:'pi pi-fw pi-users',
|
||||
items:[
|
||||
{
|
||||
label:'Filter',
|
||||
icon:'pi pi-fw pi-filter',
|
||||
items:[
|
||||
{
|
||||
label:'Print',
|
||||
icon:'pi pi-fw pi-print'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
icon:'pi pi-fw pi-bars',
|
||||
label:'List'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Events',
|
||||
icon:'pi pi-fw pi-calendar',
|
||||
items:[
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Save',
|
||||
icon:'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Archieve',
|
||||
icon:'pi pi-fw pi-calendar-times',
|
||||
items:[
|
||||
{
|
||||
label:'Remove',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
label:'Events',
|
||||
icon:'pi pi-fw pi-calendar',
|
||||
items:[
|
||||
{
|
||||
label:'Edit',
|
||||
icon:'pi pi-fw pi-pencil',
|
||||
items:[
|
||||
{
|
||||
label:'Save',
|
||||
icon:'pi pi-fw pi-calendar-plus'
|
||||
},
|
||||
{
|
||||
label:'Delete',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Archieve',
|
||||
icon:'pi pi-fw pi-calendar-times',
|
||||
items:[
|
||||
{
|
||||
label:'Remove',
|
||||
icon:'pi pi-fw pi-calendar-minus'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label:'Quit',
|
||||
icon:'pi pi-fw pi-power-off'
|
||||
label:'Quit',
|
||||
icon:'pi pi-fw pi-power-off'
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -305,7 +305,7 @@ export default {
|
|||
<div>
|
||||
<Menubar :model="items">
|
||||
<template #start>
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
|
||||
</template>
|
||||
<template #end>
|
||||
<InputText placeholder="Search" type="text" />
|
||||
|
|
@ -459,7 +459,7 @@ export default {
|
|||
<div>
|
||||
<Menubar :model="items">
|
||||
<template #start>
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
|
||||
</template>
|
||||
<template #end>
|
||||
<InputText placeholder="Search" type="text" />
|
||||
|
|
@ -610,7 +610,7 @@ export default {
|
|||
content: `<div id="app">
|
||||
<p-menubar :model="items">
|
||||
<template #start>
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
|
||||
<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
|
||||
</template>
|
||||
<template #end>
|
||||
<p-inputtext placeholder="Search" type="text"></p-inputtext>
|
||||
|
|
|
|||
|
|
@ -27,17 +27,17 @@
|
|||
|
||||
<h5>Inline Messages</h5>
|
||||
<p>Message component is used to display inline messages mostly within forms.</p>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="info">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="success">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="warn">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="error">Message Content</InlineMessage>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,12 +46,12 @@
|
|||
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
|
||||
|
||||
<h5>Validation Message</h5>
|
||||
<div class="p-formgroup-inline" style="margin-bottom:.5rem">
|
||||
<div class="formgroup-inline" style="margin-bottom:.5rem">
|
||||
<label for="username" class="p-sr-only">Username</label>
|
||||
<InputText id="username" placeholder="Username" class="p-invalid" />
|
||||
<InlineMessage>Username is required</InlineMessage>
|
||||
</div>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="formgroup-inline">
|
||||
<label for="email" class="p-sr-only">email</label>
|
||||
<InputText id="email" placeholder="Email" class="p-invalid" />
|
||||
<InlineMessage />
|
||||
|
|
|
|||
|
|
@ -286,17 +286,17 @@ export default {
|
|||
|
||||
<h5>Inline Messages</h5>
|
||||
<p>Message component is used to display inline messages mostly within forms.</p>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="info">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="success">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="warn">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="error">Message Content</InlineMessage>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -305,12 +305,12 @@ export default {
|
|||
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
|
||||
|
||||
<h5>Validation Message</h5>
|
||||
<div class="p-formgroup-inline" style="margin-bottom:.5rem">
|
||||
<div class="formgroup-inline" style="margin-bottom:.5rem">
|
||||
<label for="username" class="p-sr-only">Username</label>
|
||||
<InputText id="username" placeholder="Username" class="p-invalid" />
|
||||
<InlineMessage>Username is required</InlineMessage>
|
||||
</div>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="formgroup-inline">
|
||||
<label for="email" class="p-sr-only">email</label>
|
||||
<InputText id="email" placeholder="Email" class="p-invalid" />
|
||||
<InlineMessage />
|
||||
|
|
@ -367,17 +367,17 @@ button.p-button {
|
|||
|
||||
<h5>Inline Messages</h5>
|
||||
<p>Message component is used to display inline messages mostly within forms.</p>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="info">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="success">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="warn">Message Content</InlineMessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<InlineMessage severity="error">Message Content</InlineMessage>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -386,12 +386,12 @@ button.p-button {
|
|||
<Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
|
||||
|
||||
<h5>Validation Message</h5>
|
||||
<div class="p-formgroup-inline" style="margin-bottom:.5rem">
|
||||
<div class="formgroup-inline" style="margin-bottom:.5rem">
|
||||
<label for="username" class="p-sr-only">Username</label>
|
||||
<InputText id="username" placeholder="Username" class="p-invalid" />
|
||||
<InlineMessage>Username is required</InlineMessage>
|
||||
</div>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="formgroup-inline">
|
||||
<label for="email" class="p-sr-only">email</label>
|
||||
<InputText id="email" placeholder="Email" class="p-invalid" />
|
||||
<InlineMessage />
|
||||
|
|
@ -447,17 +447,17 @@ button.p-button {
|
|||
|
||||
<h5>Inline Messages</h5>
|
||||
<p>Message component is used to display inline messages mostly within forms.</p>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<p-inlinemessage severity="info">Message Content</p-inlinemessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<p-inlinemessage severity="success">Message Content</p-inlinemessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<p-inlinemessage severity="warn">Message Content</p-inlinemessage>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-3">
|
||||
<div class="col-12 md:col-3">
|
||||
<p-inlinemessage severity="error">Message Content</p-inlinemessage>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -466,12 +466,12 @@ button.p-button {
|
|||
<p-message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</p-message>
|
||||
|
||||
<h5>Validation Message</h5>
|
||||
<div class="p-formgroup-inline" style="margin-bottom:.5rem">
|
||||
<div class="formgroup-inline" style="margin-bottom:.5rem">
|
||||
<label for="username" class="p-sr-only">Username</label>
|
||||
<p-inputtext id="username" placeholder="Username" class="p-invalid"></p-inputtext>
|
||||
<p-inlinemessage>Username is required</p-inlinemessage>
|
||||
</div>
|
||||
<div class="p-formgroup-inline">
|
||||
<div class="formgroup-inline">
|
||||
<label for="email" class="p-sr-only">email</label>
|
||||
<p-inputtext id="email" placeholder="Email" class="p-invalid"></p-inputtext>
|
||||
<p-inlinemessage></p-inlinemessage>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<h5>Grouped</h5>
|
||||
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -552,8 +552,8 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -563,7 +563,7 @@ export default {
|
|||
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
|
||||
<template #value="slotProps">
|
||||
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
|
|
@ -572,7 +572,7 @@ export default {
|
|||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -703,8 +703,8 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -714,7 +714,7 @@ export default {
|
|||
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
|
||||
<template #value="slotProps">
|
||||
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
|
|
@ -723,7 +723,7 @@ export default {
|
|||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -857,8 +857,8 @@ export default {
|
|||
<h5>Grouped</h5>
|
||||
<p-multiselect v-model="selectedGroupedCities" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items" placeholder="Select Cities">
|
||||
<template #optiongroup="slotProps">
|
||||
<div class="p-d-flex p-ai-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<div class="flex align-items-center country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
|
||||
<div>{{slotProps.option.label}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -868,7 +868,7 @@ export default {
|
|||
<p-multiselect v-model="selectedCountries" :options="countries" option-label="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
|
||||
<template #value="slotProps">
|
||||
<div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
|
||||
<div>{{option.name}}</div>
|
||||
</div>
|
||||
<template v-if="!slotProps.value || slotProps.value.length === 0">
|
||||
|
|
@ -877,7 +877,7 @@ export default {
|
|||
</template>
|
||||
<template #option="slotProps">
|
||||
<div class="country-item">
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
|
||||
<div>{{slotProps.option.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -20,12 +20,12 @@
|
|||
<img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
|
||||
</div>
|
||||
<div class="product-list-detail">
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<h6 class="mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<h6 class="p-mb-2">${{slotProps.item.price}}</h6>
|
||||
<h6 class="mb-2">${{slotProps.item.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -243,12 +243,12 @@ 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">
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<h6 class="mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
|
||||
<h6 class="mb-2">\${{slotProps.item.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -350,12 +350,12 @@ 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">
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<h6 class="mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
|
||||
<h6 class="mb-2">\${{slotProps.item.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -458,12 +458,12 @@ 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">
|
||||
<h6 class="p-mb-2">{{slotProps.item.name}}</h6>
|
||||
<h6 class="mb-2">{{slotProps.item.name}}</h6>
|
||||
<i class="pi pi-tag product-category-icon"></i>
|
||||
<span class="product-category">{{slotProps.item.category}}</span>
|
||||
</div>
|
||||
<div class="product-list-action">
|
||||
<h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
|
||||
<h6 class="mb-2">\${{slotProps.item.price}}</h6>
|
||||
<span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<h5>Advanced</h5>
|
||||
<Panel header="Header" :toggleable="true">
|
||||
<template #icons>
|
||||
<button class="p-panel-header-icon p-link p-mr-2" @click="toggle">
|
||||
<button class="p-panel-header-icon p-link mr-2" @click="toggle">
|
||||
<span class="pi pi-cog"></span>
|
||||
</button>
|
||||
<Menu id="config_menu" ref="menu" :model="items" :popup="true" />
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue