Fixed #2017 - Move PrimeFlex v2 Docs to Github
Cagatay Civici
parent
6032532358
commit
e2b443b2b2
|
|
@ -112,46 +112,12 @@
|
|||
"meta": ["primeflex"],
|
||||
"children": [
|
||||
{
|
||||
"name": "Setup",
|
||||
"to": "/primeflex"
|
||||
"name": "PrimeFlex v3",
|
||||
"href": "https://www.primefaces.org/primeflex"
|
||||
},
|
||||
{
|
||||
"name": "Display",
|
||||
"to": "/display"
|
||||
},
|
||||
{
|
||||
"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"
|
||||
"name": "PrimeFlex v2",
|
||||
"href": "https://github.com/primefaces/primeflex/wiki/PrimeFlex-v2"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -327,11 +327,6 @@ const routes = [
|
|||
name: 'dialog',
|
||||
component: () => import('../views/dialog/DialogDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/display',
|
||||
name: 'display',
|
||||
component: () => import('../views/display/DisplayDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/divider',
|
||||
name: 'divider',
|
||||
|
|
@ -352,11 +347,6 @@ const routes = [
|
|||
name: 'editor',
|
||||
component: () => import('../views/editor/EditorDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/elevation',
|
||||
name: 'elevation',
|
||||
component: () => import('../views/elevation/ElevationDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/fieldset',
|
||||
name: 'fieldset',
|
||||
|
|
@ -372,16 +362,6 @@ const routes = [
|
|||
name: 'fileupload',
|
||||
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',
|
||||
name: 'fullcalendar',
|
||||
|
|
@ -452,11 +432,6 @@ const routes = [
|
|||
name: 'listbox',
|
||||
component: () => import('../views/listbox/ListboxDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/flexbox',
|
||||
name: 'flexbox',
|
||||
component: () => import('../views/flexbox/FlexBoxDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/floatlabel',
|
||||
name: 'floatlabel',
|
||||
|
|
@ -542,11 +517,6 @@ const routes = [
|
|||
name: 'progressspinner',
|
||||
component: () => import('../views/progressspinner/ProgressSpinnerDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/primeflex',
|
||||
name: 'primeflex',
|
||||
component: () => import('../views/primeflex/PrimeFlexSetup.vue')
|
||||
},
|
||||
{
|
||||
path: '/radiobutton',
|
||||
name: 'radiobutton',
|
||||
|
|
@ -587,11 +557,6 @@ const routes = [
|
|||
name: 'slider',
|
||||
component: () => import('../views/slider/SliderDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/spacing',
|
||||
name: 'spacing',
|
||||
component: () => import('../views/spacing/SpacingDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/speeddial',
|
||||
name: 'speeddial',
|
||||
|
|
@ -661,11 +626,6 @@ const routes = [
|
|||
name: 'tag',
|
||||
component: () => import('../views/tag/TagDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/text',
|
||||
name: 'text',
|
||||
component: () => import('../views/text/TextDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/textarea',
|
||||
name: 'textarea',
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import DataView from 'primevue/dataview';
|
|||
</code></pre>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<div class="shadow-1" />
|
||||
|
||||
</code></pre>
|
||||
|
||||
<h5>Levels</h5>
|
||||
<p>There are 8 depths available varying from 1 to 8.</p>
|
||||
<pre v-code><code>
|
||||
<div class="shadow-1" />
|
||||
<div class="shadow-8" />
|
||||
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
<div class="flex">Flex Container</div>
|
||||
<div class="inline-flex">Inline Flex Container</div>
|
||||
|
||||
</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>
|
||||
<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="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="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="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>
|
||||
<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="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>
|
||||
<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="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="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="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>
|
||||
<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="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="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="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="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="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>
|
||||
<div class="flex justify-content-center">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
</code></pre>
|
||||
<div class="flex justify-content-center">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
<h6>Center</h6>
|
||||
<pre v-code><code>
|
||||
<div class="flex justify-content-center">
|
||||
<div class="mr-2">Item 1</div>
|
||||
<div>Item 2</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
<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="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="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="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>
|
||||
<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="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>
|
||||
<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>
|
||||
|
||||
</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>
|
||||
<div class="flex flex-column" style="height:150px">
|
||||
<div>Item 1</div>
|
||||
<div class="mt-auto">Item 2</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<div class="field">
|
||||
<label for="fieldId">Label</label>
|
||||
<InputText id="fieldId" type="text" />
|
||||
</div>
|
||||
|
||||
</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>
|
||||
<div class="p-fluid">
|
||||
<div class="field">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field p-col">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" type="text" />
|
||||
</div>
|
||||
<div class="field p-col">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
<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="field grid">
|
||||
<label for="lastname" class="p-col-fixed" style="width:100px">Lastname</label>
|
||||
<div class="p-col">
|
||||
<InputText id="lastname" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
<div class="p-fluid">
|
||||
<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="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>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
<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="field">
|
||||
<label for="lastname" class="p-sr-only">Lastname</label>
|
||||
<InputText id="lastname" type="text" placeholder="Lastname" />
|
||||
</div>
|
||||
<Button type="button" label="Submit" />
|
||||
</div>
|
||||
|
||||
</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>
|
||||
<h3>Vertical Checkbox</h3>
|
||||
<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>
|
||||
|
||||
<h3>Horizontal Checkbox</h3>
|
||||
<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>
|
||||
|
||||
</code></pre>
|
||||
|
||||
<pre v-code><code>
|
||||
<h3>Vertical RadioButton</h3>
|
||||
<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>
|
||||
|
||||
<h3>Horizontal RadioButton</h3>
|
||||
<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="field-checkbox">
|
||||
<RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
|
||||
<label for="city8">Los Angeles</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
<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>
|
||||
|
||||
</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>
|
||||
<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="field col-12 md:col-6">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" 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>
|
||||
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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>
|
||||
<link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
|
||||
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<div class="mb-2">Margin bottom with level 2</div>
|
||||
<div class="mt-4">Margin top with level 2</div>
|
||||
<div class="m-2">Margin for all sides with level 2</div>
|
||||
<div class="mx-auto">Auto margins for left and right side</div>
|
||||
<div class="pb-4">Padding bottom with level 4</div>
|
||||
<div class="p-1">Padding for all sides with level 1</div>
|
||||
<div class="m-1 p-1 lg:m-3">Level 3 spacing for lg screens and level 1 for smaller screens (xs).</div>
|
||||
|
||||
</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
<div class="text-left">Left</div>
|
||||
<div class="text-center">Center</div>
|
||||
<div class="text-right">Right</div>
|
||||
<div class="text-justify">Justify</div>
|
||||
</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>
|
||||
<div class="text-lowercase">LOWERCASE</div>
|
||||
<div class="text-uppercase">uppercase</div>
|
||||
<div class="text-capitalize">capitalize</div>
|
||||
</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>
|
||||
<div style="width: 10rem">Long text wraps and does not overlow.</div>
|
||||
<div class="white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||
<div class="white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
|
||||
</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>
|
||||
<div class="font-bold">Bold</div>
|
||||
<div class="font-norrmal">Normal</div>
|
||||
<div class="font-light">Light</div>
|
||||
<div class="font-italic">Italic</div>
|
||||
</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>
|
||||
Loading…
Reference in New Issue