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

Fixed #464 - Update PrimeFlex documentation to 2.0.0

pull/642/head
Cagatay Civici 2020-09-08 13:47:51 +03:00
parent e0a2ec8be0
commit 8f9782c79c
9 changed files with 318 additions and 621 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,9 +39,6 @@
<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.</p>
</TabPanel>
<TabPanel header="Source">

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

@ -14,9 +14,6 @@
&lt;div class="p-shadow-1" /&gt;
&lt;div class="p-shadow-24" /&gt;
</CodeHighlight>
<h5>Dependencies</h5>
<p>PrimeFlex.</p>
</TabPanel>
<TabPanel header="Source">

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

@ -518,9 +518,6 @@
<div>Item 1</div>
<div class="p-mt-auto">Item 2</div>
</div>
<h5>Dependencies</h5>
<p>PrimeFlex.</p>
</div>
</div>
</template>

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

@ -30,7 +30,7 @@
</div>
<h5>Reverse Direction</h5>
<div class="p-grid p-dir-rev">
<div class="p-grid p-flex-row-reverse">
<div class="p-col">
<div class="box">1</div>
</div>
@ -43,7 +43,7 @@
</div>
<h5>Column Direction</h5>
<div class="p-grid p-dir-col">
<div class="p-grid p-flex-column">
<div class="p-col">
<div class="box">1</div>
</div>
@ -56,7 +56,7 @@
</div>
<h5>Reverse Column Direction</h5>
<div class="p-grid p-dir-col-rev">
<div class="p-grid p-flex-column-reverse">
<div class="p-col">
<div class="box">1</div>
</div>
@ -166,7 +166,7 @@
</div>
<h5>Horizontal Alignment - Start</h5>
<div class="p-grid p-justify-start">
<div class="p-grid p-jc-start">
<div class="p-col-2">
<div class="box">2</div>
</div>
@ -179,7 +179,7 @@
</div>
<h5>Horizontal Alignment - End</h5>
<div class="p-grid p-justify-end">
<div class="p-grid p-jc-end">
<div class="p-col-2">
<div class="box">2</div>
</div>
@ -192,7 +192,7 @@
</div>
<h5>Horizontal Alignment - Center</h5>
<div class="p-grid p-justify-center">
<div class="p-grid p-jc-center">
<div class="p-col-2">
<div class="box">2</div>
</div>
@ -205,7 +205,7 @@
</div>
<h5>Horizontal Alignment - Between</h5>
<div class="p-grid p-justify-between">
<div class="p-grid p-jc-between">
<div class="p-col-2">
<div class="box">2</div>
</div>
@ -218,7 +218,7 @@
</div>
<h5>Horizontal Alignment - Around</h5>
<div class="p-grid p-justify-around">
<div class="p-grid p-jc-around">
<div class="p-col-2">
<div class="box">2</div>
</div>
@ -231,7 +231,7 @@
</div>
<h5>Horizontal Alignment - Even</h5>
<div class="p-grid p-justify-even">
<div class="p-grid p-jc-evenly">
<div class="p-col-2">
<div class="box">2</div>
</div>
@ -244,7 +244,7 @@
</div>
<h5>Vertical Alignment - Start</h5>
<div class="p-grid p-align-start vertical-container">
<div class="p-grid p-ai-start vertical-container">
<div class="p-col">
<div class="box">4</div>
</div>
@ -257,7 +257,7 @@
</div>
<h5>Vertical Alignment - End</h5>
<div class="p-grid p-align-end vertical-container">
<div class="p-grid p-ai-end vertical-container">
<div class="p-col">
<div class="box">4</div>
</div>
@ -270,7 +270,7 @@
</div>
<h5>Vertical Alignment - Center</h5>
<div class="p-grid p-align-center vertical-container">
<div class="p-grid p-ai-center vertical-container">
<div class="p-col">
<div class="box">4</div>
</div>
@ -283,7 +283,7 @@
</div>
<h5>Vertical Alignment - Stretch</h5>
<div class="p-grid p-align-stretch vertical-container">
<div class="p-grid p-ai-stretch vertical-container">
<div class="p-col">
<div class="box box-stretched">4</div>
</div>
@ -297,13 +297,13 @@
<h5>Vertical Alignment - Per Column</h5>
<div class="p-grid vertical-container">
<div class="p-col p-col-align-start">
<div class="p-col p-as-start">
<div class="box">4</div>
</div>
<div class="p-col p-col-align-center">
<div class="p-col p-as-center">
<div class="box">4</div>
</div>
<div class="p-col p-col-align-end">
<div class="p-col p-as-end">
<div class="box">4</div>
</div>
</div>

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

@ -25,66 +25,6 @@
</div>
</div>
<h5>Direction</h5>
<p>Default direction is <b>row</b> and <i>p-dir-*</i> class at the container defines the other possible directions which can be <b>row reverse</b>, <b>column</b> and <b>column reverse</b></p>
<CodeHighlight>
<!-- Row Reverse -->
&lt;div class="p-grid p-dir-rev"&gt;
&lt;div class="p-col"&gt;1&lt;/div&gt;
&lt;div class="p-col"&gt;2&lt;/div&gt;
&lt;div class="p-col"&gt;3&lt;/div&gt;
&lt;/div&gt;
<!-- Column -->
&lt;div class="p-grid p-dir-col"&gt;
&lt;div class="p-col"&gt;1&lt;/div&gt;
&lt;div class="p-col"&gt;2&lt;/div&gt;
&lt;div class="p-col"&gt;3&lt;/div&gt;
&lt;/div&gt;
<!-- Column Reverse -->
&lt;div class="p-grid p-dir-col-rev"&gt;
&lt;div class="p-col"&gt;1&lt;/div&gt;
&lt;div class="p-col"&gt;2&lt;/div&gt;
&lt;div class="p-col"&gt;3&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<div class="p-grid p-dir-rev">
<div class="p-col">
<div class="box">1</div>
</div>
<div class="p-col">
<div class="box">2</div>
</div>
<div class="p-col">
<div class="box">3</div>
</div>
</div>
<div class="p-grid p-dir-col">
<div class="p-col">
<div class="box">1</div>
</div>
<div class="p-col">
<div class="box">2</div>
</div>
<div class="p-col">
<div class="box">3</div>
</div>
</div>
<div class="p-grid p-dir-col-rev">
<div class="p-col">
<div class="box">1</div>
</div>
<div class="p-col">
<div class="box">2</div>
</div>
<div class="p-col">
<div class="box">3</div>
</div>
</div>
<h5>12 Column Grid</h5>
<p>FlexGrid includes a 12 column based layout utility where width of a column is defined with the <i>p-col-&#123;number&#125;</i> style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.</p>
@ -259,171 +199,6 @@
<div class="box">D</div>
</div>
</div>
<h5>Horizontal Alignment</h5>
<p><i>p-justify-*</i> classes are used on the container element to define the alignment along the main axis.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-justify-start (default)</td>
<td>Items are packed toward the start line</td>
</tr>
<tr>
<td>p-justify-end</td>
<td>Items are packed toward to end line</td>
</tr>
<tr>
<td>p-justify-center</td>
<td>Items are centered along the line</td>
</tr>
<tr>
<td>p-justify-between</td>
<td>Items are evenly distributed in the line; first item is on the start line, last item on the end line</td>
</tr>
<tr>
<td>p-justify-around</td>
<td>Items are evenly distributed in the line with equal space around them.</td>
</tr>
<tr>
<td>p-justify-even</td>
<td>Items are distributed so that the spacing between any two items (and the space to the edges) is equal.</td>
</tr>
</tbody>
</table>
</div>
<CodeHighlight>
&lt;div class="p-grid p-justify-between"&gt;
&lt;div class="p-col-2"&gt;2&lt;/div&gt;
&lt;div class="p-col-1"&gt;1&lt;/div&gt;
&lt;div class="p-col-4"&gt;4&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<div class="p-grid p-justify-between">
<div class="p-col-2">
<div class="box">2</div>
</div>
<div class="p-col-1">
<div class="box">1</div>
</div>
<div class="p-col-4">
<div class="box">4</div>
</div>
</div>
<h5>Vertical Alignment</h5>
<p><i>p-align-*</i> classes are used on the container element to define the alignment along the cross axis.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-align-stretch (default)</td>
<td>Stretch to fill the container.</td>
</tr>
<tr>
<td>p-align-start</td>
<td>Cross-start margin edge of the items is placed on the cross-start line</td>
</tr>
<tr>
<td>p-align-end</td>
<td>Cross-end margin edge of the items is placed on the cross-end line</td>
</tr>
<tr>
<td>p-align-center</td>
<td>Items are centered in the cross-axis</td>
</tr>
<tr>
<td>p-align-baseline</td>
<td>Items are aligned such as their baselines align</td>
</tr>
</tbody>
</table>
</div>
<CodeHighlight>
&lt;div class="p-grid p-align-center"&gt;
&lt;div class="p-col"&gt;4&lt;/div&gt;
&lt;div class="p-col"&gt;4&lt;/div&gt;
&lt;div class="p-col"&gt;4&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<div class="p-grid p-align-center vertical-container">
<div class="p-col">
<div class="box">4</div>
</div>
<div class="p-col">
<div class="box">4</div>
</div>
<div class="p-col">
<div class="box">4</div>
</div>
</div>
<p>Vertical alignment can also be defined at column level with the <i>p-align-col-*</i> classes.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-col-align-stretch</td>
<td>Stretch to fill the container.</td>
</tr>
<tr>
<td>p-col-align-start</td>
<td>Cross-start margin edge of the items is placed on the cross-start line</td>
</tr>
<tr>
<td>p-col-align-end</td>
<td>Cross-end margin edge of the items is placed on the cross-end line</td>
</tr>
<tr>
<td>p-col-align-center</td>
<td>Items are centered in the cross-axis</td>
</tr>
<tr>
<td>p-col-align-baseline</td>
<td>Items are aligned such as their baselines align</td>
</tr>
</tbody>
</table>
</div>
<CodeHighlight>
&lt;div class="p-grid"&gt;
&lt;div class="p-col p-col-align-start"&gt;4&lt;/div&gt;
&lt;div class="p-col p-col-align-center"&gt;4&lt;/div&gt;
&lt;div class="p-col p-col-align-end"&gt;4&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<div class="p-grid vertical-container">
<div class="p-col p-col-align-start">
<div class="box">4</div>
</div>
<div class="p-col p-col-align-center">
<div class="box">4</div>
</div>
<div class="p-col p-col-align-end">
<div class="box">4</div>
</div>
</div>
<h5>Offset</h5>
<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
<CodeHighlight>
@ -550,58 +325,6 @@
&lt;div class="p-col"&gt;3&lt;/div&gt;
&lt;/div&gt;
</CodeHighlight>
<h5>Customization</h5>
<p>PrimeFlex allows customization of breakpoints and gutters via SASS variables, visit the <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> repository to get access to the primeflex.scss file to build your own customized Grid.</p>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Variable</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>$sm</td>
<td>576px</td>
</tr>
<tr>
<td>$md</td>
<td>768</td>
</tr>
<tr>
<td>$lg</td>
<td>992</td>
</tr>
<tr>
<td>$xl</td>
<td>1200px</td>
</tr>
<tr>
<td>$gutter</td>
<td>.5em</td>
</tr>
<tr>
<td>$fieldMargin</td>
<td>1rem</td>
</tr>
<tr>
<td>$fieldLabelMargin</td>
<td>.5rem</td>
</tr>
<tr>
<td>$helperTextMargin</td>
<td>.25rem</td>
</tr>
<tr>
<td>$spacer</td>
<td>1rem</td>
</tr>
</tbody>
</table>
</div>
</TabPanel>
<TabPanel header="Source">
@ -610,372 +333,372 @@
</a>
<CodeHighlight>
<template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
<h5>Basic</h5>
&lt;div class="p-grid"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Dynamic&lt;/h3&gt;
&lt;h5&gt;Dynamic&lt;/h5&gt;
&lt;Button type="button" icon="pi pi-plus" title="Add Column" @click="addColumn" :disabled="columns.length === 20" style="margin-right: .5em" /&gt;
&lt;Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" /&gt;
&lt;div style="margin-top: .5em"&gt;
&lt;transition-group name="dynamic-box" tag="div" class="p-grid"&gt;
&lt;div v-for="col of columns" :key="col" class="p-col"&gt;
&lt;div class="box"&gt;{{col}}&lt;/div&gt;
&lt;/div&gt;
&lt;/transition-group&gt;
&lt;transition-group name="dynamic-box" tag="div" class="p-grid"&gt;
&lt;div v-for="col of columns" :key="col" class="p-col"&gt;
&lt;div class="box"&gt;{{col}}&lt;/div&gt;
&lt;/div&gt;
&lt;/transition-group&gt;
&lt;/div&gt;
&lt;h3&gt;Reverse Direction&lt;/h3&gt;
&lt;div class="p-grid p-dir-rev"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Reverse Direction&lt;/h5&gt;
&lt;div class="p-grid p-flex-row-reverse"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Column Direction&lt;/h3&gt;
&lt;div class="p-grid p-dir-col"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Column Direction&lt;/h5&gt;
&lt;div class="p-grid p-flex-column"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Reverse Column Direction&lt;/h3&gt;
&lt;div class="p-grid p-dir-col-rev"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Reverse Column Direction&lt;/h5&gt;
&lt;div class="p-grid p-flex-column-reverse"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;3&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;12 Column Grid&lt;/h3&gt;
&lt;h5&gt;12 Column Grid&lt;/h5&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-8"&gt;
&lt;div class="box"&gt;8&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-8"&gt;
&lt;div class="box"&gt;8&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;MultiLine&lt;/h3&gt;
&lt;h5&gt;MultiLine&lt;/h5&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Fixed Width Column&lt;/h3&gt;
&lt;h5&gt;Fixed Width Column&lt;/h5&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-fixed" style="width:100px"&gt;
&lt;div class="box"&gt;100px&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;auto&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-fixed" style="width:100px"&gt;
&lt;div class="box"&gt;100px&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;auto&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Responsive&lt;/h3&gt;
&lt;h5&gt;Responsive&lt;/h5&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;
&lt;div class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Start&lt;/h3&gt;
&lt;div class="p-grid p-justify-start"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Horizontal Alignment - Start&lt;/h5&gt;
&lt;div class="p-grid p-jc-start"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - End&lt;/h3&gt;
&lt;div class="p-grid p-justify-end"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Horizontal Alignment - End&lt;/h5&gt;
&lt;div class="p-grid p-jc-end"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Center&lt;/h3&gt;
&lt;div class="p-grid p-justify-center"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Horizontal Alignment - Center&lt;/h5&gt;
&lt;div class="p-grid p-jc-center"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Between&lt;/h3&gt;
&lt;div class="p-grid p-justify-between"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Horizontal Alignment - Between&lt;/h5&gt;
&lt;div class="p-grid p-jc-between"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Around&lt;/h3&gt;
&lt;div class="p-grid p-justify-around"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Horizontal Alignment - Around&lt;/h5&gt;
&lt;div class="p-grid p-jc-around"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Even&lt;/h3&gt;
&lt;div class="p-grid p-justify-even"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Horizontal Alignment - Even&lt;/h5&gt;
&lt;div class="p-grid p-jc-evenly"&gt;
&lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-1"&gt;
&lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Start&lt;/h3&gt;
&lt;div class="p-grid p-align-start vertical-container"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Vertical Alignment - Start&lt;/h5&gt;
&lt;div class="p-grid p-ai-start vertical-container"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Vertical Alignment - End&lt;/h3&gt;
&lt;div class="p-grid p-align-end vertical-container"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Vertical Alignment - End&lt;/h5&gt;
&lt;div class="p-grid p-ai-end vertical-container"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Center&lt;/h3&gt;
&lt;div class="p-grid p-align-center vertical-container"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Vertical Alignment - Center&lt;/h5&gt;
&lt;div class="p-grid p-ai-center vertical-container"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Stretch&lt;/h3&gt;
&lt;div class="p-grid p-align-stretch vertical-container"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;h5&gt;Vertical Alignment - Stretch&lt;/h5&gt;
&lt;div class="p-grid p-ai-stretch vertical-container"&gt;
&lt;div class="p-col"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Per Column&lt;/h3&gt;
&lt;h5&gt;Vertical Alignment - Per Column&lt;/h5&gt;
&lt;div class="p-grid vertical-container"&gt;
&lt;div class="p-col p-col-align-start"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col p-col-align-center"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col p-col-align-end"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col p-as-start"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col p-as-center"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col p-as-end"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Offset&lt;/h3&gt;
&lt;h5&gt;Offset&lt;/h5&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-6 p-offset-3"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6 p-offset-3"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4 p-offset-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4 p-offset-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Nested&lt;/h3&gt;
&lt;h5&gt;Nested&lt;/h5&gt;
&lt;div class="p-grid nested-grid"&gt;
&lt;div class="p-col-8"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="box"&gt;12&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-8"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="box"&gt;12&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-4"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h3&gt;Panels&lt;/h3&gt;
&lt;h5&gt;Panels&lt;/h5&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col"&gt;
&lt;Panel header="Header"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/Panel&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;Panel header="Header"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/Panel&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;Panel header="Header"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/Panel&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;Panel header="Header"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/Panel&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;Panel header="Header"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/Panel&gt;
&lt;/div&gt;
&lt;div class="p-col"&gt;
&lt;Panel header="Header"&gt;
&lt;p&gt;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.&lt;/p&gt;
&lt;/Panel&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</CodeHighlight>

10
src/views/megamenu/MegaMenuDoc.vue
View File

@ -8,15 +8,7 @@ import MegaMenu from 'primevue/megamenu';
</CodeHighlight>
<h5>MenuModel</h5>
<p>MegaMenu uses the common MenuModel API to define the items, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<h5>Getting Started</h5>
<p>Layout of the MegaMenu is managed by the <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> that can be downloaded from npm.</p>
<CodeHighlight lang="js">
npm install primeflex --save
</CodeHighlight>
<p>MegaMenu requires a collection of menuitems as its model.</p>
<p>MegaMenu uses the common MenuModel API to define the items of the model, visit <router-link to="/menumodel">MenuModel API</router-link> for details.</p>
<CodeHighlight>
&lt;MegaMenu :model="items" /&gt;
</CodeHighlight>

5
src/views/setup/Setup.vue
View File

@ -14,10 +14,7 @@ npm install primeicons --save
<h5>PrimeFlex</h5>
<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.</p>
<CodeHighlight lang="js">
npm install primeflex --save
</CodeHighlight>
recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the <router-link to="/primeflex">PrimeFlex</router-link> section for the installation.</p>
<h5>Module Loader</h5>
<p>This is the recommended way if your application uses <a href="https://cli.vuejs.org/">vue-cli</a> or has a webpack based build with <a href="https://github.com/vuejs/vue-loader">vue-loader</a> configured.

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

@ -61,9 +61,6 @@
<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.</p>
</TabPanel>
<TabPanel header="Source">

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

@ -68,9 +68,6 @@
&lt;div class="p-text-italic"&gt;Italic&lt;/div&gt;
</template>
</CodeHighlight>
<h5>Dependencies</h5>
<p>PrimeFlex.</p>
</TabPanel>
<TabPanel header="Source">