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

Fixed #2017 - Move PrimeFlex v2 Docs to Github

pull/2018/head
Cagatay Civici 2022-01-18 15:15:27 +03:00
parent 6032532358
commit e2b443b2b2
17 changed files with 5 additions and 5117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/assets/menu/menu.json
View File

@ -112,46 +112,12 @@
"meta": ["primeflex"], "meta": ["primeflex"],
"children": [ "children": [
{ {
"name": "Setup", "name": "PrimeFlex v3",
"to": "/primeflex" "href": "https://www.primefaces.org/primeflex"
}, },
{ {
"name": "Display", "name": "PrimeFlex v2",
"to": "/display" "href": "https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2"
},
{
"name": "Elevation",
"to": "/elevation"
},
{
"name": "Flexbox",
"to": "/flexbox"
},
{
"name": "Form Layout",
"to": "/formlayout"
},
{
"name": "Grid System",
"to": "/grid"
},
{
"name": "Spacing",
"to": "/spacing"
},
{
"name": "Text",
"to": "/text"
}
]
},
{
"name": "PrimeIcons",
"meta": ["primeicons"],
"children": [
{
"name": "Icons v5",
"to": "/icons"
} }
] ]
}, },

40
src/router/index.js
View File

@ -327,11 +327,6 @@ const routes = [
name: 'dialog', name: 'dialog',
component: () => import('../views/dialog/DialogDemo.vue') component: () => import('../views/dialog/DialogDemo.vue')
}, },
{
path: '/display',
name: 'display',
component: () => import('../views/display/DisplayDemo.vue')
},
{ {
path: '/divider', path: '/divider',
name: 'divider', name: 'divider',
@ -352,11 +347,6 @@ const routes = [
name: 'editor', name: 'editor',
component: () => import('../views/editor/EditorDemo.vue') component: () => import('../views/editor/EditorDemo.vue')
}, },
{
path: '/elevation',
name: 'elevation',
component: () => import('../views/elevation/ElevationDemo.vue')
},
{ {
path: '/fieldset', path: '/fieldset',
name: 'fieldset', name: 'fieldset',
@ -372,16 +362,6 @@ const routes = [
name: 'fileupload', name: 'fileupload',
component: () => import('../views/fileupload/FileUploadDemo.vue') component: () => import('../views/fileupload/FileUploadDemo.vue')
}, },
{
path: '/grid',
name: 'grid',
component: () => import('../views/grid/GridDemo.vue')
},
{
path: '/formlayout',
name: 'formlayout',
component: () => import('../views/formlayout/FormLayoutDemo.vue')
},
{ {
path: '/fullcalendar', path: '/fullcalendar',
name: 'fullcalendar', name: 'fullcalendar',
@ -452,11 +432,6 @@ const routes = [
name: 'listbox', name: 'listbox',
component: () => import('../views/listbox/ListboxDemo.vue') component: () => import('../views/listbox/ListboxDemo.vue')
}, },
{
path: '/flexbox',
name: 'flexbox',
component: () => import('../views/flexbox/FlexBoxDemo.vue')
},
{ {
path: '/floatlabel', path: '/floatlabel',
name: 'floatlabel', name: 'floatlabel',
@ -542,11 +517,6 @@ const routes = [
name: 'progressspinner', name: 'progressspinner',
component: () => import('../views/progressspinner/ProgressSpinnerDemo.vue') component: () => import('../views/progressspinner/ProgressSpinnerDemo.vue')
}, },
{
path: '/primeflex',
name: 'primeflex',
component: () => import('../views/primeflex/PrimeFlexSetup.vue')
},
{ {
path: '/radiobutton', path: '/radiobutton',
name: 'radiobutton', name: 'radiobutton',
@ -587,11 +557,6 @@ const routes = [
name: 'slider', name: 'slider',
component: () => import('../views/slider/SliderDemo.vue') component: () => import('../views/slider/SliderDemo.vue')
}, },
{
path: '/spacing',
name: 'spacing',
component: () => import('../views/spacing/SpacingDemo.vue')
},
{ {
path: '/speeddial', path: '/speeddial',
name: 'speeddial', name: 'speeddial',
@ -661,11 +626,6 @@ const routes = [
name: 'tag', name: 'tag',
component: () => import('../views/tag/TagDemo.vue') component: () => import('../views/tag/TagDemo.vue')
}, },
{
path: '/text',
name: 'text',
component: () => import('../views/text/TextDemo.vue')
},
{ {
path: '/textarea', path: '/textarea',
name: 'textarea', name: 'textarea',

2
src/views/dataview/DataViewDoc.vue
View File

@ -15,7 +15,7 @@ import DataView from 'primevue/dataview';
</code></pre> </code></pre>
<h5>PrimeFlex</h5> <h5>PrimeFlex</h5>
<p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <router-link to="/grid">FlexGrid</router-link> documentation for details.</p> <p>DataView utilizes PrimeFlex library so it needs to be installed before getting started. Refer to <a href="https://www.primefaces.org/primeflex/gridsystem">PrimeFlex</a> documentation for details.</p>
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.</p> <p>DataView requires a collection of items as its value and one or more templates depending on the layout mode e.g. list and grid. Throughout the samples, a car interface having vin, brand, year and color properties are used to define an object to be displayed by the dataview. Cars are loaded by a CarService that connects to a server to fetch the cars.</p>

43
src/views/display/DisplayDemo.vue
View File

@ -1,43 +0,0 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Display</h1>
<p>Efficiently configure the display of the component with <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> display utilities.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Inline</h5>
<InputText class="mr-2 inline" />
<InputText class="inline" />
<h5>Block</h5>
<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 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 hidden md:inline-flex" />
</div>
</div>
<DisplayDoc />
</div>
</template>
<script>
import DisplayDoc from './DisplayDoc';
export default {
components: {
'DisplayDoc': DisplayDoc
}
}
</script>

150
src/views/display/DisplayDoc.vue
View File

@ -1,150 +0,0 @@
<template>
<AppDoc name="DisplayDemo" :sources="sources" github="display/DisplayDemo.vue">
<h5>Getting Started</h5>
<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>hidden</li>
<li>inline</li>
<li>inline-block</li>
<li>block</li>
<li>flex</li>
<li>inline-flex</li>
</ul>
<h5>Breakpoint</h5>
<p>Breakpoints define how the display property should be defined depending on the screen size. Design is mobile first so smaller values
can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.</p>
<ul>
<li><b>sm</b>: small screens e.g. phones</li>
<li><b>md</b>: medium screens e.g. tablets</li>
<li><b>lg</b>: large screens e.g. notebooks</li>
<li><b>xl</b>: larger screens .e.g monitors</li>
</ul>
<h5>Examples</h5>
<pre v-code><code>
&lt;div class="inline"&gt;Displayed as inline.&lt;/div&gt;
&lt;div class="flex"&gt;Displayed as a flexbox container.&lt;/div&gt;
&lt;div class="block lg:inline"&gt;Inline for larger screens and block for others.&lt;/div&gt;
&lt;div class="md:hidden"&gt;Visible on a Small Screen&lt;/div&gt;
&lt;div class="hidden md:inline-flex"&gt;Hidden on a Small Screen&lt;/div&gt;
</code></pre>
<h5>Customization</h5>
<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 3.1.2.</p>
</AppDoc>
</template>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Options API Source',
content: `
<template>
<div>
<h5>Inline</h5>
<InputText class="mr-2 inline" />
<InputText class="inline" />
<h5>Block</h5>
<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 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 hidden md:inline-flex" />
</div>
</template>
<script>
export default {
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API Source',
content: `
<template>
<div>
<h5>Inline</h5>
<InputText class="mr-2 inline" />
<InputText class="inline" />
<h5>Block</h5>
<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 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 hidden md:inline-flex" />
</div>
</template>
<script>
export default {
}
<\\/script>
`
},
'browser-source': {
tabName: 'Browser Source',
content: `<div id="app">
<h5>Inline</h5>
<p-inputtext class="mr-2 inline"></p-inputtext>
<p-inputtext class="inline"></p-inputtext>
<h5>Block</h5>
<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 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 hidden md:inline-flex"></p-button>
</div>
<script type="module">
const { createApp } = Vue;
const App = {
components: {
"p-inputtext": primevue.inputtext,
"p-button": primevue.button
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
`
}
}
}
}
}
</script>

50
src/views/elevation/ElevationDemo.vue
View File

@ -1,50 +0,0 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Elevation</h1>
<p>Elevation is an add-on utility of <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> and used to specify the separation between surfaces and elements along the z-axis.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="grid">
<div class="p-col">
<div class="shadow-box shadow-none">shadow-none</div>
</div>
<div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'shadow-' + index]">
shadow-{{index}}
</div>
</div>
</div>
</div>
<ElevationDoc />
</div>
</template>
<script>
import ElevationDoc from './ElevationDoc';
export default {
components: {
'ElevationDoc': ElevationDoc
}
}
</script>
<style lang="scss" scoped>
.shadow-box {
min-height: 100px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 2rem;
border-radius: 4px;
background-color: var(--surface-e);
}
</style>

146
src/views/elevation/ElevationDoc.vue
View File

@ -1,146 +0,0 @@
<template>
<AppDoc name="ElevationDemo" :sources="sources" github="elevation/ElevationDemo.vue">
<h5>Getting Started</h5>
<p>Elevation is added to an element using the <i>.shadow-{level}</i> class.</p>
<pre v-code><code>
&lt;div class="shadow-1" /&gt;
</code></pre>
<h5>Levels</h5>
<p>There are 8 depths available varying from 1 to 8.</p>
<pre v-code><code>
&lt;div class="shadow-1" /&gt;
&lt;div class="shadow-8" /&gt;
</code></pre>
<h5>Dependencies</h5>
<p>PrimeFlex 3.1.2.</p>
</AppDoc>
</template>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Options API Source',
content: `
<template>
<div>
<div class="grid">
<div class="p-col">
<div class="shadow-box shadow-none">shadow-none</div>
</div>
<div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'shadow-' + index]">
shadow-{{index}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
<\\/script>
<style lang="scss" scoped>
.shadow-box {
min-height: 100px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 2rem;
border-radius: 4px;
background-color: var(--surface-e);
}
</style>
`
},
'composition-api': {
tabName: 'Composition API Source',
content: `
<template>
<div>
<div class="grid">
<div class="p-col">
<div class="shadow-box shadow-none">shadow-none</div>
</div>
<div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'shadow-' + index]">
shadow-{{index}}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
<\\/script>
<style lang="scss" scoped>
.shadow-box {
min-height: 100px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 2rem;
border-radius: 4px;
background-color: var(--surface-e);
}
</style>
`
},
'browser-source': {
tabName: 'Browser Source',
content: `<div id="app">
<div class="grid">
<div class="p-col">
<div class="shadow-box shadow-none">shadow-none</div>
</div>
<div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'shadow-' + index]">
shadow-{{index}}
</div>
</div>
</div>
</div>
<script type="module">
const { createApp } = Vue;
const App = {};
createApp(App).mount("#app");
<\\/script>
<style lang="scss" scoped>
.shadow-box {
min-height: 100px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 2rem;
border-radius: 4px;
background-color: var(--surface-e);
}
</style>
`
}
}
}
}
}
</script>

562
src/views/flexbox/FlexBoxDemo.vue
View File

@ -1,562 +0,0 @@
<template>
<div>
<div class="content-section documentation">
<h1>FlexBox</h1>
<p>Easily manage the layout of your components with the responsive FlexBox utilities.
</p>
<h5>Flex Container</h5>
<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>
&lt;div class="flex"&gt;Flex Container&lt;/div&gt;
&lt;div class="inline-flex"&gt;Inline Flex Container&lt;/div&gt;
</code></pre>
<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>flex-{direction}</i> class where direction can be either of the following.</p>
<ul>
<li>row (default)</li>
<li>row-reverse</li>
<li>column</li>
<li>column-reverse</li>
</ul>
<h6>Row</h6>
<pre v-code><code>
&lt;div class="flex"&gt;
&lt;div class="mr-2"&gt;Item 1&lt;/div&gt;
&lt;div class="mr-2"&gt;Item 2&lt;/div&gt;
&lt;div&gt;Item 3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>
&lt;div class="flex flex-column"&gt;
&lt;div class="mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="mb-2"&gt;Item 2&lt;/div&gt;
&lt;div&gt;Item 3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="flex flex-column">
<div class="mb-2">Item 1</div>
<div class="mb-2">Item 2</div>
<div>Item 3</div>
</div>
<h6>Responsive</h6>
<p>Row direction for larger screens and column for smaller.</p>
<pre v-code><code>
&lt;div class="flex flex-column md:flex-row"&gt;
&lt;div class="mb-2 mr-2"&gt;Item 1&lt;/div&gt;
&lt;div class="mb-2 mr-2"&gt;Item 2&lt;/div&gt;
&lt;div class="mb-2 mr-2"&gt;Item 3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>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>order-{value}</i> format is used where value can be a number from 0 to 6.</p>
<h6>Customized</h6>
<pre v-code><code>
&lt;div class="flex"&gt;
&lt;div class="mr-2 order-3"&gt;Item 1&lt;/div&gt;
&lt;div class="mr-2 order-1"&gt;Item 2&lt;/div&gt;
&lt;div class="mr-2 order-2"&gt;Item 3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>
&lt;div class="flex"&gt;
&lt;div class="mr-2 order-3 md:order-2"&gt;Item 1&lt;/div&gt;
&lt;div class="mr-2 order-1 md:order-3"&gt;Item 2&lt;/div&gt;
&lt;div class="mr-2 order-2 md:order-1"&gt;Item 3&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>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>flex-{value}</i> and the value field can be either of the
listed alternatives.</p>
<ul>
<li>nowrap (default)</li>
<li>wrap</li>
<li>wrap-reverse</li>
</ul>
<h6>No Wrap</h6>
<pre v-code><code>
&lt;div class="flex"&gt;
&lt;div class="mr-2 mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 2&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 3&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 4&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 5&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 6&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>
&lt;div class="flex flex-wrap"&gt;
&lt;div class="mr-2 mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 2&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 3&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 4&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 5&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 6&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>
&lt;div class="flex flex-wrap-reverse"&gt;
&lt;div class="mr-2 mb-2"&gt;Item 1&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 2&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 3&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 4&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 5&lt;/div&gt;
&lt;div class="mr-2 mb-2"&gt;Item 6&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>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>justify-content-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>between</li>
<li>around</li>
<li>evenly</li>
</ul>
<h6>Between</h6>
<pre v-code><code>
&lt;div class="flex justify-content-center"&gt;
&lt;div&gt;Item 1&lt;/div&gt;
&lt;div&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="flex justify-content-center">
<div>Item 1</div>
<div>Item 2</div>
</div>
<h6>Center</h6>
<pre v-code><code>
&lt;div class="flex justify-content-center"&gt;
&lt;div class="mr-2"&gt;Item 1&lt;/div&gt;
&lt;div&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>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>align-items-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>baseline</li>
<li>stretch (default)</li>
</ul>
<h6>Start</h6>
<pre v-code><code>
&lt;div class="flex align-items-start"&gt;
&lt;div class="mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
&lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>
&lt;div class="flex align-items-center"&gt;
&lt;div class="mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
&lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>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>align-self-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>baseline</li>
<li>stretch (default)</li>
</ul>
<pre v-code><code>
&lt;div class="flex" style="height: 150px;"&gt;
&lt;div class="mr-2 align-self-start"&gt;Start&lt;/div&gt;
&lt;div class="mr-2 align-self-center"&gt;Center&lt;/div&gt;
&lt;div class="mr-2 align-self-end"&gt;End&lt;/div&gt;
&lt;div class="mr-2 align-self-stretch"&gt;Stretch&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>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>align-content-{value}</i> format with responsive alternatives. Value field accepts
the options below.</p>
<ul>
<li>start</li>
<li>end</li>
<li>center</li>
<li>around</li>
<li>stretch</li>
<li>between</li>
</ul>
<h6>Align Content Classes</h6>
<ul>
<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>
<p>When combined with <router-link to="/spacing">spacing utilities</router-link>, flexbox offers endless possibilities.</p>
<h6>Horizontal Spacing</h6>
<pre v-code><code>
&lt;div class="flex p-3 card"&gt;
&lt;Button type="Button" icon="pi pi-check" class="mr-2" /&gt;
&lt;Button type="Button" icon="pi pi-trash" class="p-button-danger"/&gt;
&lt;Button type="Button" icon="pi pi-search" class="ml-auto p-button-help"/&gt;
&lt;/div&gt;
</code></pre>
<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="ml-auto p-button-help"/>
</div>
<h6>Vertical Spacing</h6>
<pre v-code><code>
&lt;div class="flex flex-column" style="height:150px"&gt;
&lt;div&gt;Item 1&lt;/div&gt;
&lt;div class="mt-auto"&gt;Item 2&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<div class="flex flex-column" style="height:150px">
<div>Item 1</div>
<div class="mt-auto">Item 2</div>
</div>
<h5>Dependencies</h5>
<p>PrimeFlex 3.1.2.</p>
</div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
.flex > div,
.box {
background-color: var(--surface-e);
text-align: center;
padding: 1rem;
border-radius: 4px;
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);
}
.flex > div {
width: 8rem;
}
</style>

224
src/views/formlayout/FormLayoutDemo.vue
View File

@ -1,224 +0,0 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Form Layout</h1>
<p>Form layout is a CSS utility optimized for creating forms with ease. FormLayout is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>,
a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Vertical</h5>
<div class="p-fluid">
<div class="field">
<label for="firstname1">Firstname</label>
<InputText id="firstname1" type="text" />
</div>
<div class="field">
<label for="lastname1">Lastname</label>
<InputText id="lastname1" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Vertical and Grid</h5>
<div class="p-fluid formgrid grid">
<div class="field col">
<label for="firstname2">Firstname</label>
<InputText id="firstname2" type="text" />
</div>
<div class="field col">
<label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fixed Width</h5>
<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="field grid">
<label for="lastname3" class="col-fixed" style="width:100px">Lastname</label>
<div class="col">
<InputText id="lastname3" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fluid</h5>
<div class="p-fluid">
<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="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>
</div>
</div>
<div class="card">
<h5>Inline</h5>
<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="field">
<label for="lastname5" class="p-sr-only">Lastname</label>
<InputText id="lastname5" type="text" placeholder="Lastname" />
</div>
<Button type="button" label="Submit" />
</div>
</div>
<div class="card">
<h5>Vertical Checkbox</h5>
<div class="field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label>
</div>
<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="formgroup-inline">
<div class="field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city3">Chicago</label>
</div>
<div class="field-checkbox">
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city4">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Vertical RadioButton</h5>
<div class="field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label>
</div>
<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="formgroup-inline">
<div class="field-radiobutton">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label>
</div>
<div class="field-radiobutton">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Help Text</h5>
<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>
</div>
</div>
<div class="card">
<h5>Advanced</h5>
<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="field col-12 md:col-6">
<label for="lastname6">Lastname</label>
<InputText id="lastname6" type="text" />
</div>
<div class="field col-12">
<label for="address">Address</label>
<Textarea id="address" rows="4" />
</div>
<div class="field col-12 md:col-6">
<label for="city">City</label>
<InputText id="city" type="text" />
</div>
<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="field col-12 md:col-3">
<label for="zip">Zip</label>
<InputText id="zip" type="text" />
</div>
</div>
</div>
</div>
<FormLayoutDoc />
</div>
</template>
<script>
import FormLayoutDoc from './FormLayoutDoc';
export default {
data() {
return {
selectedState: null,
states: [
{name: 'Arizona', code: 'Arizona'},
{name: 'California', value: 'California'},
{name: 'Florida', code: 'Florida'},
{name: 'Ohio', code: 'Ohio'},
{name: 'Washington', code: 'Washington'}
],
cities1: [],
cities2: [],
city1: null,
city2: null
}
},
components: {
'FormLayoutDoc': FormLayoutDoc
}
}
</script>
<style lang="scss" scoped>
@media screen and (max-width: 489px) {
.formgroup-inline {
.field {
margin-bottom: 1em !important;
}
}
}
.layout-content .content-section.implementation > h3 {
font-weight: 600;
}
textarea {
resize: none;
}
</style>

883
src/views/formlayout/FormLayoutDoc.vue
View File

@ -1,883 +0,0 @@
<template>
<AppDoc name="FormLayoutDemo" :sources="sources" github="formlayout/FormLayoutDemo.vue">
<h5>Getting Started</h5>
<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>
&lt;div class="field"&gt;
&lt;label for="fieldId"&gt;Label&lt;/label&gt;
&lt;InputText id="fieldId" type="text" /&gt;
&lt;/div&gt;
</code></pre>
<h5>Vertical Layout</h5>
<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>
&lt;div class="p-fluid"&gt;
&lt;div class="field"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt;
&lt;div class="field"&gt;
&lt;label for="lastname"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h5>Vertical Layout with Grid</h5>
<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>
&lt;div class="p-fluid formgrid grid"&gt;
&lt;div class="field p-col"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt;
&lt;div class="field p-col"&gt;
&lt;label for="lastname"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h5>Horizontal and Fixed Width</h5>
<p>In horizontal form, label of the field is displayed on the same row of the input as opposed to the vertical alternative. In this
example, label has a fixed width where container of the inputs gets the remaining space.
</p>
<pre v-code><code>
&lt;div class="field grid"&gt;
&lt;label for="firstname" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
&lt;div class="p-col"&gt;
&lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="field grid"&gt;
&lt;label for="lastname" class="p-col-fixed" style="width:100px"&gt;Lastname&lt;/label&gt;
&lt;div class="p-col"&gt;
&lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h5>Horizontal and Fluid</h5>
<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>
&lt;div class="p-fluid"&gt;
&lt;div class="field grid"&gt;
&lt;label for="firstname" class="col-12 mb-2 md:col-2 md:mb-0"&gt;Firstname&lt;/label&gt;
&lt;div class="col-12 md:col-10"&gt;
&lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="field grid"&gt;
&lt;label for="lastname" class="col-12 mb-2 md:col-2 md:mb-0"&gt;Lastname&lt;/label&gt;
&lt;div class="col-12 md:col-10"&gt;
&lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</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>.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>
&lt;div class="formgroup-inline"&gt;
&lt;div class="field"&gt;
&lt;label for="firstname" class="p-sr-only"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" type="text" placeholder="Firstname" /&gt;
&lt;/div&gt;
&lt;div class="field"&gt;
&lt;label for="lastname" class="p-sr-only"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname" type="text" placeholder="Lastname" /&gt;
&lt;/div&gt;
&lt;Button type="button" label="Submit" /&gt;
&lt;/div&gt;
</code></pre>
<h5>Checkbox and RadioButton</h5>
<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>
&lt;h3&gt;Vertical Checkbox&lt;/h3&gt;
&lt;div class="field-checkbox"&gt;
&lt;Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /&gt;
&lt;label for="city1"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="field-checkbox"&gt;
&lt;Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" /&gt;
&lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal Checkbox&lt;/h3&gt;
&lt;div class="formgroup-inline"&gt;
&lt;div class="field-checkbox"&gt;
&lt;Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" /&gt;
&lt;label for="city3"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="field-checkbox"&gt;
&lt;Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" /&gt;
&lt;label for="city4"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<pre v-code><code>
&lt;h3&gt;Vertical RadioButton&lt;/h3&gt;
&lt;div class="field-radiobutton"&gt;
&lt;RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /&gt;
&lt;label for="city5"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="field-radiobutton"&gt;
&lt;RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" /&gt;
&lt;label for="city6"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal RadioButton&lt;/h3&gt;
&lt;div class="formgroup-inline"&gt;
&lt;div class="field-checkbox"&gt;
&lt;RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /&gt;
&lt;label for="city7"&gt;Chicago&lt;/label&gt;
&lt;/div&gt;
&lt;div class="field-checkbox"&gt;
&lt;RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" /&gt;
&lt;label for="city8"&gt;Los Angeles&lt;/label&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<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>
&lt;div class="field p-fluid"&gt;
&lt;label for="username"&gt;Username&lt;/label&gt;
&lt;InputText id="username" type="username" aria-describedby="username-help" /&gt;
&lt;small id="username-help"&gt;Enter your username to reset your password.&lt;/small&gt;
&lt;/div&gt;
</code></pre>
<h5>Advanced Forms</h5>
<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>
&lt;div class="p-fluid formgrid grid"&gt;
&lt;div class="field col-12 md:col-6"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" type="text" /&gt;
&lt;/div&gt;
&lt;div class="field col-12 md:col-6"&gt;
&lt;label for="lastname"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname" type="text" /&gt;
&lt;/div&gt;
&lt;div class="field col-12"&gt;
&lt;label for="address"&gt;Address&lt;/label&gt;
&lt;Textarea id="address" rows="4" /&gt;
&lt;/div&gt;
&lt;div class="field col-12 md:col-6"&gt;
&lt;label for="city"&gt;City&lt;/label&gt;
&lt;InputText id="city" type="text" /&gt;
&lt;/div&gt;
&lt;div class="field col-12 md:col-3"&gt;
&lt;label for="state"&gt;State&lt;/label&gt;
&lt;Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" /&gt;
&lt;/div&gt;
&lt;div class="field col-12 md:col-3"&gt;
&lt;label for="zip"&gt;Zip&lt;/label&gt;
&lt;InputText id="zip" type="text" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<h5>Customization</h5>
<p>FormLayout comes with sensible defaults, in case these values need to be customized suggested way is building <a href="https://github.com/primefaces/primeflex/blob/master/primeflex.scss">primeflex.scss</a> with your on variables.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Variable</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>$fieldMargin</td>
<td>1em</td>
</tr>
<tr>
<td>$fieldLabelMargin</td>
<td>.5em</td>
</tr>
</tbody>
</table>
</div>
</AppDoc>
</template>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Options API Source',
content: `
<template>
<div>
<div class="card">
<h5>Vertical</h5>
<div class="p-fluid">
<div class="field">
<label for="firstname1">Firstname</label>
<InputText id="firstname1" type="text" />
</div>
<div class="field">
<label for="lastname1">Lastname</label>
<InputText id="lastname1" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Vertical and Grid</h5>
<div class="p-fluid formgrid grid">
<div class="field p-col">
<label for="firstname2">Firstname</label>
<InputText id="firstname2" type="text" />
</div>
<div class="field p-col">
<label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fixed Width</h5>
<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="field grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col">
<InputText id="lastname3" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fluid</h5>
<div class="p-fluid">
<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="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>
</div>
</div>
<div class="card">
<h5>Inline</h5>
<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="field">
<label for="lastname5" class="p-sr-only">Lastname</label>
<InputText id="lastname5" type="text" placeholder="Lastname" />
</div>
<Button type="button" label="Submit" />
</div>
</div>
<div class="card">
<h5>Vertical Checkbox</h5>
<div class="field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label>
</div>
<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="formgroup-inline">
<div class="field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city3">Chicago</label>
</div>
<div class="field-checkbox">
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city4">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Vertical RadioButton</h5>
<div class="field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label>
</div>
<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="formgroup-inline">
<div class="field-radiobutton">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label>
</div>
<div class="field-radiobutton">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Help Text</h5>
<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>
</div>
</div>
<div class="card">
<h5>Advanced</h5>
<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="field col-12 md:col-6">
<label for="lastname6">Lastname</label>
<InputText id="lastname6" type="text" />
</div>
<div class="field col-12">
<label for="address">Address</label>
<Textarea id="address" rows="4" />
</div>
<div class="field col-12 md:col-6">
<label for="city">City</label>
<InputText id="city" type="text" />
</div>
<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="field col-12 md:col-3">
<label for="zip">Zip</label>
<InputText id="zip" type="text" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedState: null,
states: [
{name: 'Arizona', code: 'Arizona'},
{name: 'California', value: 'California'},
{name: 'Florida', code: 'Florida'},
{name: 'Ohio', code: 'Ohio'},
{name: 'Washington', code: 'Washington'}
],
cities1: [],
cities2: [],
city1: null,
city2: null
}
}
}
<\\/script>
<style lang="scss" scoped>
@media screen and (max-width: 489px) {
.formgroup-inline {
.field {
margin-bottom: 1em !important;
}
}
}
.layout-content .content-section.implementation > h3 {
font-weight: 600;
}
textarea {
resize: none;
}
</style>
`
},
'composition-api': {
tabName: 'Composition API Source',
content: `
<template>
<div>
<div class="card">
<h5>Vertical</h5>
<div class="p-fluid">
<div class="field">
<label for="firstname1">Firstname</label>
<InputText id="firstname1" type="text" />
</div>
<div class="field">
<label for="lastname1">Lastname</label>
<InputText id="lastname1" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Vertical and Grid</h5>
<div class="p-fluid formgrid grid">
<div class="field p-col">
<label for="firstname2">Firstname</label>
<InputText id="firstname2" type="text" />
</div>
<div class="field p-col">
<label for="lastname2">Lastname</label>
<InputText id="lastname2" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fixed Width</h5>
<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="field grid">
<label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
<div class="p-col">
<InputText id="lastname3" type="text" />
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fluid</h5>
<div class="p-fluid">
<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="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>
</div>
</div>
<div class="card">
<h5>Inline</h5>
<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="field">
<label for="lastname5" class="p-sr-only">Lastname</label>
<InputText id="lastname5" type="text" placeholder="Lastname" />
</div>
<Button type="button" label="Submit" />
</div>
</div>
<div class="card">
<h5>Vertical Checkbox</h5>
<div class="field-checkbox">
<Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
<label for="city1">Chicago</label>
</div>
<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="formgroup-inline">
<div class="field-checkbox">
<Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
<label for="city3">Chicago</label>
</div>
<div class="field-checkbox">
<Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
<label for="city4">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Vertical RadioButton</h5>
<div class="field-radiobutton">
<RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
<label for="city5">Chicago</label>
</div>
<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="formgroup-inline">
<div class="field-radiobutton">
<RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
<label for="city7">Chicago</label>
</div>
<div class="field-radiobutton">
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
<label for="city8">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Help Text</h5>
<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>
</div>
</div>
<div class="card">
<h5>Advanced</h5>
<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="field col-12 md:col-6">
<label for="lastname6">Lastname</label>
<InputText id="lastname6" type="text" />
</div>
<div class="field col-12">
<label for="address">Address</label>
<Textarea id="address" rows="4" />
</div>
<div class="field col-12 md:col-6">
<label for="city">City</label>
<InputText id="city" type="text" />
</div>
<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="field col-12 md:col-3">
<label for="zip">Zip</label>
<InputText id="zip" type="text" />
</div>
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const selectedState = ref(null);
const states = ref([
{name: 'Arizona', code: 'Arizona'},
{name: 'California', value: 'California'},
{name: 'Florida', code: 'Florida'},
{name: 'Ohio', code: 'Ohio'},
{name: 'Washington', code: 'Washington'}
]);
const cities1 = ref([]);
const cities2 = ref([]);
const city1 = ref(null);
const city2 = ref(null);
return { selectedState, states, cities1, cities2, city1, city2 }
}
}
<\\/script>
<style lang="scss" scoped>
@media screen and (max-width: 489px) {
.formgroup-inline {
.field {
margin-bottom: 1em !important;
}
}
}
.layout-content .content-section.implementation > h3 {
font-weight: 600;
}
textarea {
resize: none;
}
</style>
`
},
'browser-source': {
tabName: 'Browser Source',
imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/textarea/textarea.min.js"><\\/script>
<script src="https://unpkg.com/primevue@^3/dropdown/dropdown.min.js"><\\/script>`,
content: `<div id="app">
<div class="card">
<h5>Vertical</h5>
<div class="p-fluid">
<div class="field">
<label for="firstname1">Firstname</label>
<p-inputtext id="firstname1" type="text"></p-inputtext>
</div>
<div class="field">
<label for="lastname1">Lastname</label>
<p-inputtext id="lastname1" type="text"></p-inputtext>
</div>
</div>
</div>
<div class="card">
<h5>Vertical and Grid</h5>
<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="field p-col">
<label for="lastname2">Lastname</label>
<p-inputtext id="lastname2" type="text"></p-inputtext>
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fixed Width</h5>
<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="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>
</div>
</div>
</div>
<div class="card">
<h5>Horizontal and Fluid</h5>
<div class="p-fluid">
<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="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>
</div>
</div>
<div class="card">
<h5>Inline</h5>
<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="field">
<label for="lastname5" class="p-sr-only">Lastname</label>
<p-inputtext id="lastname5" type="text" placeholder="Lastname"></p-inputtext>
</div>
<p-button type="button" label="Submit"></p-button>
</div>
</div>
<div class="card">
<h5>Vertical Checkbox</h5>
<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="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="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="field-checkbox">
<p-checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2"></p-checkbox>
<label for="city4">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Vertical RadioButton</h5>
<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="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="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="field-radiobutton">
<p-radiobutton id="city8" name="city2" value="Los Angeles" v-model="city2"></p-radiobutton>
<label for="city8">Los Angeles</label>
</div>
</div>
</div>
<div class="card">
<h5>Help Text</h5>
<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>
</div>
</div>
<div class="card">
<h5>Advanced</h5>
<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="field col-12 md:col-6">
<label for="lastname6">Lastname</label>
<p-inputtext id="lastname6" type="text"></p-inputtext>
</div>
<div class="field col-12">
<label for="address">Address</label>
<p-textarea id="address" rows="4"></p-textarea>
</div>
<div class="field col-12 md:col-6">
<label for="city">City</label>
<p-inputtext id="city" type="text"></p-inputtext>
</div>
<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="field col-12 md:col-3">
<label for="zip">Zip</label>
<p-inputtext id="zip" type="text"></p-inputtext>
</div>
</div>
</div>
</div>
<script type="module">
const { createApp, ref } = Vue;
const App = {
setup() {
const selectedState = ref(null);
const states = ref([
{name: 'Arizona', code: 'Arizona'},
{name: 'California', value: 'California'},
{name: 'Florida', code: 'Florida'},
{name: 'Ohio', code: 'Ohio'},
{name: 'Washington', code: 'Washington'}
]);
const cities1 = ref([]);
const cities2 = ref([]);
const city1 = ref(null);
const city2 = ref(null);
return { selectedState, states, cities1, cities2, city1, city2 }
},
components: {
"p-inputtext": primevue.inputtext,
"p-button": primevue.button,
"p-checkbox": primevue.checkbox,
"p-radiobutton": primevue.radiobutton,
"p-textarea": primevue.textarea,
"p-dropdown": primevue.dropdown
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
<style>
@media screen and (max-width: 489px) {
.formgroup-inline .field {
margin-bottom: 1em !important;
}
}
.layout-content .content-section.implementation > h3 {
font-weight: 600;
}
textarea {
resize: none;
}
</style>
`
}
}
}
}
}
</script>

449
src/views/grid/GridDemo.vue
View File

@ -1,449 +0,0 @@
<template>
<div>
<div class="content-section introduction">
<AppDemoActions />
</div>
<div class="content-section implementation flexgrid-demo">
<h1>Grid System</h1>
<p>Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.</p>
<h5>Basic</h5>
<div class="grid">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
</div>
<h5>Dynamic</h5>
<Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" />
<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="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="grid flex-row-reverse">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
</div>
<h5>Column Direction</h5>
<div class="grid flex-column">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
</div>
<h5>Reverse Column Direction</h5>
<div class="grid flex-column-reverse">
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">2</div>
</div>
<div class="col">
<div class="box">3</div>
</div>
</div>
<h5>12 Column Grid</h5>
<div class="grid">
<div class="col-4">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">1</div>
</div>
<div class="col">
<div class="box">1</div>
</div>
</div>
<div class="grid">
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-6">
<div class="box">6</div>
</div>
<div class="col-4">
<div class="box">4</div>
</div>
</div>
<div class="grid">
<div class="col-8">
<div class="box">8</div>
</div>
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-2">
<div class="box">2</div>
</div>
</div>
<h5>MultiLine</h5>
<div class="grid">
<div class="col-6">
<div class="box">6</div>
</div>
<div class="col-6">
<div class="box">6</div>
</div>
<div class="col-6">
<div class="box">6</div>
</div>
<div class="col-6">
<div class="box">6</div>
</div>
</div>
<h5>Fixed Width Column</h5>
<div class="grid">
<div class="col-fixed" style="width:100px">
<div class="box">100px</div>
</div>
<div class="col">
<div class="box">auto</div>
</div>
</div>
<h5>Responsive</h5>
<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="col-12 md:col-6 lg:col-3">
<div class="box">col-12 md:col-6 lg:col-3</div>
</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="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="grid justify-content-start">
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">1</div>
</div>
<div class="col-4">
<div class="box">4</div>
</div>
</div>
<h5>Horizontal Alignment - End</h5>
<div class="grid justify-content-end">
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">1</div>
</div>
<div class="col-4">
<div class="box">4</div>
</div>
</div>
<h5>Horizontal Alignment - Center</h5>
<div class="grid justify-content-center">
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">1</div>
</div>
<div class="col-4">
<div class="box">4</div>
</div>
</div>
<h5>Horizontal Alignment - Between</h5>
<div class="grid justify-content-center">
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">1</div>
</div>
<div class="col-4">
<div class="box">4</div>
</div>
</div>
<h5>Horizontal Alignment - Around</h5>
<div class="grid justify-content-around">
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">1</div>
</div>
<div class="col-4">
<div class="box">4</div>
</div>
</div>
<h5>Horizontal Alignment - Even</h5>
<div class="grid justify-content-evenly">
<div class="col-2">
<div class="box">2</div>
</div>
<div class="col-1">
<div class="box">1</div>
</div>
<div class="col-4">
<div class="box">4</div>
</div>
</div>
<h5>Vertical Alignment - Start</h5>
<div class="grid align-items-start vertical-container">
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
</div>
<h5>Vertical Alignment - End</h5>
<div class="grid align-items-end vertical-container">
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
</div>
<h5>Vertical Alignment - Center</h5>
<div class="grid align-items-center vertical-container">
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
<div class="col">
<div class="box">4</div>
</div>
</div>
<h5>Vertical Alignment - Stretch</h5>
<div class="grid align-items-stretch vertical-container">
<div class="col">
<div class="box box-stretched">4</div>
</div>
<div class="col">
<div class="box box-stretched">4</div>
</div>
<div class="col">
<div class="box box-stretched">4</div>
</div>
</div>
<h5>Vertical Alignment - Per Column</h5>
<div class="grid vertical-container">
<div class="col align-self-start">
<div class="box">4</div>
</div>
<div class="col align-self-center">
<div class="box">4</div>
</div>
<div class="col align-self-end">
<div class="box">4</div>
</div>
</div>
<h5>Offset</h5>
<div class="grid">
<div class="col-6 col-offset-3">
<div class="box">6</div>
</div>
</div>
<div class="grid">
<div class="col-4">
<div class="box">4</div>
</div>
<div class="col-4 col-offset-4">
<div class="box">4</div>
</div>
</div>
<h5>Nested</h5>
<div class="grid nested-grid">
<div class="col-8">
<div class="grid">
<div class="col-6">
<div class="box">6</div>
</div>
<div class="col-6">
<div class="box">6</div>
</div>
<div class="col-12">
<div class="box">12</div>
</div>
</div>
</div>
<div class="col-4">
<div class="box box-stretched">4</div>
</div>
</div>
<h5>Panels</h5>
<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.
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>
</Panel>
</div>
<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.
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>
</Panel>
</div>
<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.
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>
</Panel>
</div>
</div>
</div>
<GridDoc />
</div>
</template>
<script>
import GridDoc from './GridDoc';
export default {
data() {
return {
columns: [0, 1, 2, 3, 4, 5]
}
},
methods: {
addColumn() {
this.columns = [...this.columns, this.columns.length];
},
removeColumn() {
this.columns.pop();
}
},
components: {
'GridDoc': GridDoc
}
}
</script>
<style lang="scss" scoped>
.flexgrid-demo {
.box {
background-color: var(--surface-e);
text-align: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-radius: 4px;
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);
}
.box-stretched {
height: 100%;
}
.vertical-container {
margin: 0;
height: 200px;
background: var(--surface-d);
border-radius: 4px;
}
.nested-grid .col-4 {
padding-bottom: 1rem;
}
.dynamic-box-enter-active, .dynamic-box-leave-active {
transition: all .5s;
}
.dynamic-box-enter, .dynamic-box-leave-to {
opacity: 0;
}
.dynamic-box-enter, .dynamic-box-leave-to {
transform: translateX(30px);
}
p {
margin: 0;
}
}
</style>

1692
src/views/grid/GridDoc.vue
View File

File diff suppressed because it is too large Load Diff

160
src/views/primeflex/PrimeFlexSetup.vue
View File

@ -1,160 +0,0 @@
<template>
<div>
<div class="content-section documentation">
<h1>PrimeFlex (v3.0.0)</h1>
<p>PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
recommended to add PrimeFlex as it is likely to need such utilities when developing applications with PrimeVue.</p>
<h5>Download</h5>
<p>PrimeFlex is available at <a href="https://www.npmjs.com/package/primeflex">npm</a>, if you have an existing application run the following commands to install it.</p>
<pre v-code.script><code>
npm install primeflex --save
</code></pre>
<h5>Import via Module</h5>
<p>Next step is adding the primeflex.css to your application to include all utilities. If you prefer to pick the utilities, move to next step instead.</p>
<pre v-code.css><code>
import 'primeflex/primeflex.css';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code.script><code>
&lt;link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" /&gt;
</code></pre>
<p>PrimeFlex is a lightweight library still if you have an application such as one based on vue-cli
that is able to import scss then you will be able to pick the utilities you need to make the app bundle even smaller.</p>
<pre v-code.css><code>
import 'primeflex/src/_animations.scss';
import 'primeflex/src/_border.scss';
import 'primeflex/src/_borderradius.scss';
import 'primeflex/src/_colors.scss';
import 'primeflex/src/_display.scss';
import 'primeflex/src/_elevation.scss';
import 'primeflex/src/_flexbox.scss';
import 'primeflex/src/_formlayout.scss';
import 'primeflex/src/_grid.scss';
import 'primeflex/src/_image.scss';
import 'primeflex/src/_liststyle.scss';
import 'primeflex/src/_misc.scss';
import 'primeflex/src/_mixins.scss';
import 'primeflex/src/_overflow.scss';
import 'primeflex/src/_padding.scss';
import 'primeflex/src/_position.scss';
import 'primeflex/src/_size.scss';
import 'primeflex/src/_spacing.scss';
import 'primeflex/src/_transform.scss';
import 'primeflex/src/_transition.scss';
import 'primeflex/src/_typography.scss';
import 'primeflex/src/_userselect.scss';
import 'primeflex/src/_utils.scss';
import 'primeflex/src/_variables.scss';
import 'primeflex/src/_zindex.scss';
</code></pre>
<h5>Variables</h5>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Variable</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>$sm</td>
<td>Breakpoint of screens such as phones.</td>
<td>576px</td>
</tr>
<tr>
<td>$md</td>
<td>Breakpoint of screens such as tablets.</td>
<td>768px</td>
</tr>
<tr>
<td>$lg</td>
<td>Breakpoint of screens such as notebook monitors.</td>
<td>992px</td>
</tr>
<tr>
<td>$xl</td>
<td>Breakpoint of smaller screens such as desktop monitors.</td>
<td>1200px</td>
</tr>
<tr>
<td>$gutter</td>
<td>Padding of a grid column.</td>
<td>.5rem</td>
</tr>
<tr>
<td>$fieldMargin</td>
<td>Spacing of a field. Can be vertical of horizontal depending on form layout.</td>
<td>1rem</td>
</tr>
<tr>
<td>$fieldLabelMargin</td>
<td>Spacing of a field label. Can be vertical of horizontal depending on form layout.</td>
<td>.5rem</td>
</tr>
<tr>
<td>$helperTextMargin</td>
<td>Top spacing of a helper text.</td>
<td>.25rem</td>
</tr>
<tr>
<td>$spacer</td>
<td>Base value to use in spacing utilities, view spacing documentation for details.</td>
<td>1rem</td>
</tr>
<tr>
<td>$separator</td>
<td>Separator between responsive breakpoints like <i>md:</i> and pseudo classes like <i>hover:</i></td>
<td>:</td>
</tr>
</tbody>
</table>
</div>
<p>There are two ways to use these variables, one option is getting the source code of PrimeFlex from github, compile your own primeflex and importing the css file. Other
alternative is importing your own variables to override the defaults if your application can import scss files. Example below overrides breakpoints;
</p>
<p><b>_overrides.scss</b></p>
<pre v-code.css><code>
$sm:640px;
$md:720px;
$lg:960px;
$xl:1080px;
</code></pre>
<pre v-code.css><code>
import './assets/_overrides.scss';
import 'primeflex/src/_variables.css';
import 'primeflex/src/_grid.css';
import 'primeflex/src/_formlayout.css';
import 'primeflex/src/_display.css';
import 'primeflex/src/_text.css';
import 'primeflex/src/_flexbox.css';
import 'primeflex/src/_spacing.css';
import 'primeflex/src/_elevation.css';
</code></pre>
<h5>Production Size</h5>
<p>When using a utility CSS library like PrimeFlex, it is likely to use only a set of classes from the library leaving the rest of the library as unused. To avoid including
the unused part from your application, it is strongly recommended to use a tool like <a href="https://purgecss.com/">PurgeCSS</a> that analyzes your code and generates an optimized primeflex file that only contains the utilities you've used.</p>
<h5>VSCode Extension</h5>
<p>The official PrimeFlex extension for <a href="https://marketplace.visualstudio.com/items?itemName=yigitfindikli.primeflexsnippets">VSCode</a> provides code completion and snippets support for the classes. Search for "PrimeFlex" at VSCode marketplace to download and install the extension.</p>
</div>
</div>
</template>

92
src/views/spacing/SpacingDemo.vue
View File

@ -1,92 +0,0 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Spacing</h1>
<p><a href="https://github.com/primefaces/primeflex">PrimeFlex</a> provides various spacing utilities to modify an element's layout.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Margin</h5>
<h6>Without Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" />
<Button type="button" label="Button 2" style="width:20rem" />
<h6>With Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" class="mr-2 mb-2" />
<Button type="button" label="Button 2" style="width:20rem" class="mb-2"/>
<h5>Responsive Margin</h5>
<h6>Without Spacing</h6>
<div class="grid formgrid p-fluid">
<div class="col-12 lg:col-4">
<InputText />
</div>
<div class="col-12 lg:col-4">
<InputText />
</div>
<div class="col-12 lg:col-4">
<InputText />
</div>
</div>
<h6>With Spacing</h6>
<div class="grid formgrid p-fluid">
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText />
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText />
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText />
</div>
</div>
<h6>Center</h6>
<div class="demo-container p-4">
<Button type="button" label="Button" class="block mx-auto" />
</div>
</div>
<div class="card">
<h5>Padding</h5>
<h6>Without Spacing</h6>
<div class="demo-container">
<Button type="button" label="Button" />
</div>
<h6>With Spacing</h6>
<div class="demo-container p-3">
<Button type="button" label="Button" />
</div>
<h6>Responsive Spacing</h6>
<div class="demo-container p-0 sm:col-1 md:col-2 lg:col-3">
<Button type="button" label="Button" />
</div>
</div>
</div>
<SpacingDoc />
</div>
</template>
<script>
import SpacingDoc from './SpacingDoc';
export default {
components: {
'SpacingDoc': SpacingDoc
}
}
</script>
<style scoped>
.demo-container {
border: 1px solid var(--surface-d);
}
</style>

329
src/views/spacing/SpacingDoc.vue
View File

@ -1,329 +0,0 @@
<template>
<AppDoc name="SpacingDemo" :sources="sources" github="spacing/SpacingDemo.vue" >
<h5>Getting Started</h5>
<p>The spacing classes use the <i>{property}{position}-{value}</i> syntax whereas for responsive
values <i>{breakpoint}:{property}{position}-{value}</i> format is used.</p>
<h5>Property</h5>
<p>Property can either be a margin or a padding.</p>
<ul>
<li><b>m</b>: margin</li>
<li><b>p</b>: padding</li>
</ul>
<h5>Position</h5>
<p>Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.</p>
<ul>
<li><b>t</b>: top</li>
<li><b>b</b>: bottom</li>
<li><b>l</b>: left</li>
<li><b>r</b>: right</li>
<li><b>x</b>: left and right</li>
<li><b>y</b>: top and bottom</li>
<li><b>blank</b>: all sides</li>
</ul>
<h5>Value</h5>
<p>Value field varies from 0 to 6 where default value of the <i>$spacer</i> is 1rem. The special <i>auto</i> value is available to margins only and used to center elements.</p>
<ul>
<li><b>0</b>: $spacer * 0</li>
<li><b>1</b>: $spacer * .25</li>
<li><b>2</b>: $spacer * .5</li>
<li><b>3</b>: $spacer * 1</li>
<li><b>4</b>: $spacer * 1.5</li>
<li><b>5</b>: $spacer * 2</li>
<li><b>6</b>: $spacer * 3</li>
<li><b>7</b>: $spacer * 4</li>
<li><b>8</b>: $spacer * 5</li>
<li><b>auto</b>: auto margin</li>
</ul>
<h5>Breakpoint</h5>
<p>Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values
can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.</p>
<ul>
<li><b>sm</b>: small screens e.g. phones</li>
<li><b>md</b>: medium screens e.g. tablets</li>
<li><b>lg</b>: large screens e.g. notebooks</li>
<li><b>xl</b>: larger screens .e.g monitors</li>
</ul>
<h5>Examples</h5>
<pre v-code><code>
&lt;div class="mb-2"&gt;Margin bottom with level 2&lt;/div&gt;
&lt;div class="mt-4"&gt;Margin top with level 2&lt;/div&gt;
&lt;div class="m-2"&gt;Margin for all sides with level 2&lt;/div&gt;
&lt;div class="mx-auto"&gt;Auto margins for left and right side&lt;/div&gt;
&lt;div class="pb-4"&gt;Padding bottom with level 4&lt;/div&gt;
&lt;div class="p-1"&gt;Padding for all sides with level 1&lt;/div&gt;
&lt;div class="m-1 p-1 lg:m-3"&gt;Level 3 spacing for lg screens and level 1 for smaller screens (xs).&lt;/div&gt;
</code></pre>
<h5>Customization</h5>
<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 3.1.2.</p>
</AppDoc>
</template>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Options API Source',
content: `
<template>
<div>
<div class="card">
<h5>Margin</h5>
<h6>Without Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" />
<Button type="button" label="Button 2" style="width:20rem" />
<h6>With Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" class="mr-2 mb-2" />
<Button type="button" label="Button 2" style="width:20rem" class="mb-2"/>
<h5>Responsive Margin</h5>
<h6>Without Spacing</h6>
<div class="grid formgrid p-fluid">
<div class="col-12 lg:col-4">
<InputText />
</div>
<div class="col-12 lg:col-4">
<InputText />
</div>
<div class="col-12 lg:col-4">
<InputText />
</div>
</div>
<h6>With Spacing</h6>
<div class="grid formgrid p-fluid">
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText />
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText />
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText />
</div>
</div>
<h6>Center</h6>
<div class="demo-container p-4">
<Button type="button" label="Button" class="block mx-auto" />
</div>
</div>
<div class="card">
<h5>Padding</h5>
<h6>Without Spacing</h6>
<div class="demo-container">
<Button type="button" label="Button" />
</div>
<h6>With Spacing</h6>
<div class="demo-container p-3">
<Button type="button" label="Button" />
</div>
<h6>Responsive Spacing</h6>
<div class="demo-container p-0 sm:col-1 md:col-2 lg:col-3">
<Button type="button" label="Button" />
</div>
</div>
</div>
</template>
<script>
export default {
}
<\\/script>
<style scoped>
.demo-container {
border: 1px solid var(--surface-d);
}
</style>
`
},
'composition-api': {
tabName: 'Composition API Source',
content: `
<template>
<div>
<div class="card">
<h5>Margin</h5>
<h6>Without Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" />
<Button type="button" label="Button 2" style="width:20rem" />
<h6>With Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" class="mr-2 mb-2" />
<Button type="button" label="Button 2" style="width:20rem" class="mb-2"/>
<h5>Responsive Margin</h5>
<h6>Without Spacing</h6>
<div class="grid formgrid p-fluid">
<div class="col-12 lg:col-4">
<InputText />
</div>
<div class="col-12 lg:col-4">
<InputText />
</div>
<div class="col-12 lg:col-4">
<InputText />
</div>
</div>
<h6>With Spacing</h6>
<div class="grid formgrid p-fluid">
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText />
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText />
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<InputText />
</div>
</div>
<h6>Center</h6>
<div class="demo-container p-4">
<Button type="button" label="Button" class="block mx-auto" />
</div>
</div>
<div class="card">
<h5>Padding</h5>
<h6>Without Spacing</h6>
<div class="demo-container">
<Button type="button" label="Button" />
</div>
<h6>With Spacing</h6>
<div class="demo-container p-3">
<Button type="button" label="Button" />
</div>
<h6>Responsive Spacing</h6>
<div class="demo-container p-0 sm:col-1 md:col-2 lg:col-3">
<Button type="button" label="Button" />
</div>
</div>
</div>
</template>
<script>
export default {
}
<\\/script>
<style scoped>
.demo-container {
border: 1px solid var(--surface-d);
}
</style>
`
},
'browser-source': {
tabName: 'Browser Source',
content: `<div id="app">
<div class="card">
<h5>Margin</h5>
<h6>Without Spacing</h6>
<p-button type="button" label="Button 1" style="width:20rem"></p-button>
<p-button type="button" label="Button 2" style="width:20rem"></p-button>
<h6>With Spacing</h6>
<p-button type="button" label="Button 1" style="width:20rem" class="mr-2 mb-2"></p-button>
<p-button type="button" label="Button 2" style="width:20rem" class="mb-2"></p-button>
<h5>Responsive Margin</h5>
<h6>Without Spacing</h6>
<div class="grid formgrid p-fluid">
<div class="col-12 lg:col-4">
<p-inputtext></p-inputtext>
</div>
<div class="col-12 lg:col-4">
<p-inputtext></p-inputtext>
</div>
<div class="col-12 lg:col-4">
<p-inputtext></p-inputtext>
</div>
</div>
<h6>With Spacing</h6>
<div class="grid formgrid p-fluid">
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<p-inputtext></p-inputtext>
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<p-inputtext></p-inputtext>
</div>
<div class="col-12 mb-2 lg:col-4 lg:mb-0">
<p-inputtext></p-inputtext>
</div>
</div>
<h6>Center</h6>
<div class="demo-container p-4">
<p-button type="button" label="Button" class="block mx-auto"></p-button>
</div>
</div>
<div class="card">
<h5>Padding</h5>
<h6>Without Spacing</h6>
<div class="demo-container">
<p-button type="button" label="Button"></p-button>
</div>
<h6>With Spacing</h6>
<div class="demo-container p-3">
<p-button type="button" label="Button"></p-button>
</div>
<h6>Responsive Spacing</h6>
<div class="demo-container p-0 sm:col-1 md:col-2 lg:col-3">
<p-button type="button" label="Button"></p-button>
</div>
</div>
</div>
<script type="module">
const { createApp } = Vue;
const App = {
components: {
"p-inputtext": primevue.inputtext,
"p-button": primevue.button
}
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
<style>
.demo-container {
border: 1px solid var(--surface-d);
}
</style>
`
}
}
}
}
}
</script>

54
src/views/text/TextDemo.vue
View File

@ -1,54 +0,0 @@
<template>
<div>
<div class="content-section introduction">
<div class="feature-intro">
<h1>Text</h1>
<p>Manage the alignment and the styling of a text with <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> text utilities.</p>
</div>
<AppDemoActions />
</div>
<div class="content-section implementation">
<div class="card">
<h5>Alignment</h5>
<div class="mb-3 text-left">Left</div>
<div class="mb-3 text-center">Center</div>
<div class="text-right">Right</div>
<h5>Wrap</h5>
<div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="mb-3 text-lowercase">LOWERCASE</div>
<div class="mb-3 text-uppercase">uppercase</div>
<div class="text-capitalize">capitalize</div>
<h5>Style</h5>
<div class="mb-3 font-bold">Bold</div>
<div class="mb-3 font-norrmal">Normal</div>
<div class="mb-3 font-light">Light</div>
<div class="mb-3 font-italic">Italic</div>
</div>
</div>
<TextDoc />
</div>
</template>
<script>
import TextDoc from './TextDoc';
export default {
components: {
'TextDoc': TextDoc
}
}
</script>
<style scoped>
.demo-container {
border: 2px solid var(--surface-d);
}
</style>

204
src/views/text/TextDoc.vue
View File

@ -1,204 +0,0 @@
<template>
<AppDoc name="TextDemo" :sources="sources" github="text/TextDemo.vue">
<h5>Getting Started</h5>
<p>The text classes use the <i>text-{value}</i> syntax.</p>
<h5>Alignment</h5>
<p>Four options are available for alignment.</p>
<ul>
<li>left</li>
<li>center</li>
<li>right</li>
<li>justify</li>
</ul>
<pre v-code><code><template v-pre>
&lt;div class="text-left"&gt;Left&lt;/div&gt;
&lt;div class="text-center"&gt;Center&lt;/div&gt;
&lt;div class="text-right"&gt;Right&lt;/div&gt;
&lt;div class="text-justify"&gt;Justify&lt;/div&gt;
</template>
</code></pre>
<h5>Transform</h5>
<p>Transform property changes the case of the text.</p>
<ul>
<li>lowercase</li>
<li>uppercase</li>
<li>capitalize</li>
</ul>
<pre v-code><code><template v-pre>
&lt;div class="text-lowercase"&gt;LOWERCASE&lt;/div&gt;
&lt;div class="text-uppercase"&gt;uppercase&lt;/div&gt;
&lt;div class="text-capitalize"&gt;capitalize&lt;/div&gt;
</template>
</code></pre>
<h5>Wrap</h5>
<p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
<pre v-code><code><template v-pre>
&lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
&lt;div class="white-space-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
&lt;div class="white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
</template>
</code></pre>
<h5>Style</h5>
<p>Text styling applies to font weight and style and also uses <i>font-{value}</i> syntax.</p>
<ul>
<li>bold</li>
<li>semi-bold</li>
<li>medium</li>
<li>normal</li>
<li>light</li>
<li>italic</li>
</ul>
<pre v-code><code><template v-pre>
&lt;div class="font-bold"&gt;Bold&lt;/div&gt;
&lt;div class="font-norrmal"&gt;Normal&lt;/div&gt;
&lt;div class="font-light"&gt;Light&lt;/div&gt;
&lt;div class="font-italic"&gt;Italic&lt;/div&gt;
</template>
</code></pre>
<h5>Customization</h5>
<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 3.1.2.</p>
</AppDoc>
</template>
<script>
export default {
data() {
return {
sources: {
'options-api': {
tabName: 'Options API Source',
content: `
<template>
<div>
<h5>Alignment</h5>
<div class="mb-3 text-left">Left</div>
<div class="mb-3 text-center">Center</div>
<div class="text-right">Right</div>
<h5>Wrap</h5>
<div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="mb-3 text-lowercase">LOWERCASE</div>
<div class="mb-3 text-uppercase">uppercase</div>
<div class="text-capitalize">capitalize</div>
<h5>Style</h5>
<div class="mb-3 font-bold">Bold</div>
<div class="mb-3 font-norrmal">Normal</div>
<div class="mb-3 font-light">Light</div>
<div class="mb-3 font-italic">Italic</div>
</div>
</template>
<script>
export default {
}
<\\/script>
<style scoped>
.demo-container {
border: 2px solid var(--surface-d);
}
</style>
`
},
'composition-api': {
tabName: 'Composition API Source',
content: `
<template>
<div>
<h5>Alignment</h5>
<div class="mb-3 text-left">Left</div>
<div class="mb-3 text-center">Center</div>
<div class="text-right">Right</div>
<h5>Wrap</h5>
<div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="mb-3 text-lowercase">LOWERCASE</div>
<div class="mb-3 text-uppercase">uppercase</div>
<div class="text-capitalize">capitalize</div>
<h5>Style</h5>
<div class="mb-3 font-bold">Bold</div>
<div class="mb-3 font-norrmal">Normal</div>
<div class="mb-3 font-light">Light</div>
<div class="mb-3 font-italic">Italic</div>
</div>
</template>
<script>
export default {
}
<\\/script>
<style scoped>
.demo-container {
border: 2px solid var(--surface-d);
}
</style>
`
},
'browser-source': {
tabName: 'Browser Source',
content: `<div id="app">
<h5>Alignment</h5>
<div class="mb-3 text-left">Left</div>
<div class="mb-3 text-center">Center</div>
<div class="text-right">Right</div>
<h5>Wrap</h5>
<div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="mb-3 text-lowercase">LOWERCASE</div>
<div class="mb-3 text-uppercase">uppercase</div>
<div class="text-capitalize">capitalize</div>
<h5>Style</h5>
<div class="mb-3 font-bold">Bold</div>
<div class="mb-3 font-norrmal">Normal</div>
<div class="mb-3 font-light">Light</div>
<div class="mb-3 font-italic">Italic</div>
</div>
<script type="module">
const { createApp } = Vue;
const App = {
};
createApp(App)
.use(primevue.config.default)
.mount("#app");
<\\/script>
<style>
.demo-container {
border: 2px solid var(--surface-d);
}
</style>
`
}
}
}
}
}
</script>