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> <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> <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>
<TabPanel header="Source"> <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-1" /&gt;
&lt;div class="p-shadow-24" /&gt; &lt;div class="p-shadow-24" /&gt;
</CodeHighlight> </CodeHighlight>
<h5>Dependencies</h5>
<p>PrimeFlex.</p>
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">

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

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

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

@ -30,7 +30,7 @@
</div> </div>
<h5>Reverse Direction</h5> <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="p-col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
@ -43,7 +43,7 @@
</div> </div>
<h5>Column Direction</h5> <h5>Column Direction</h5>
<div class="p-grid p-dir-col"> <div class="p-grid p-flex-column">
<div class="p-col"> <div class="p-col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
@ -56,7 +56,7 @@
</div> </div>
<h5>Reverse Column Direction</h5> <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="p-col">
<div class="box">1</div> <div class="box">1</div>
</div> </div>
@ -166,7 +166,7 @@
</div> </div>
<h5>Horizontal Alignment - Start</h5> <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="p-col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
@ -179,7 +179,7 @@
</div> </div>
<h5>Horizontal Alignment - End</h5> <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="p-col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
@ -192,7 +192,7 @@
</div> </div>
<h5>Horizontal Alignment - Center</h5> <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="p-col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
@ -205,7 +205,7 @@
</div> </div>
<h5>Horizontal Alignment - Between</h5> <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="p-col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
@ -218,7 +218,7 @@
</div> </div>
<h5>Horizontal Alignment - Around</h5> <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="p-col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
@ -231,7 +231,7 @@
</div> </div>
<h5>Horizontal Alignment - Even</h5> <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="p-col-2">
<div class="box">2</div> <div class="box">2</div>
</div> </div>
@ -244,7 +244,7 @@
</div> </div>
<h5>Vertical Alignment - Start</h5> <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="p-col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
@ -257,7 +257,7 @@
</div> </div>
<h5>Vertical Alignment - End</h5> <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="p-col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
@ -270,7 +270,7 @@
</div> </div>
<h5>Vertical Alignment - Center</h5> <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="p-col">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
@ -283,7 +283,7 @@
</div> </div>
<h5>Vertical Alignment - Stretch</h5> <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="p-col">
<div class="box box-stretched">4</div> <div class="box box-stretched">4</div>
</div> </div>
@ -297,13 +297,13 @@
<h5>Vertical Alignment - Per Column</h5> <h5>Vertical Alignment - Per Column</h5>
<div class="p-grid vertical-container"> <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 class="box">4</div>
</div> </div>
<div class="p-col p-col-align-center"> <div class="p-col p-as-center">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
<div class="p-col p-col-align-end"> <div class="p-col p-as-end">
<div class="box">4</div> <div class="box">4</div>
</div> </div>
</div> </div>

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

@ -25,66 +25,6 @@
</div> </div>
</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> <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> <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 class="box">D</div>
</div> </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> <h5>Offset</h5>
<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p> <p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
<CodeHighlight> <CodeHighlight>
@ -550,58 +325,6 @@
&lt;div class="p-col"&gt;3&lt;/div&gt; &lt;div class="p-col"&gt;3&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</CodeHighlight> </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>
<TabPanel header="Source"> <TabPanel header="Source">
@ -610,7 +333,7 @@
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt; <h5>Basic</h5>
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt; &lt;div class="box"&gt;1&lt;/div&gt;
@ -623,7 +346,7 @@
&lt;/div&gt; &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-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;Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" /&gt;
@ -635,8 +358,8 @@
&lt;/transition-group&gt; &lt;/transition-group&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Reverse Direction&lt;/h3&gt; &lt;h5&gt;Reverse Direction&lt;/h5&gt;
&lt;div class="p-grid p-dir-rev"&gt; &lt;div class="p-grid p-flex-row-reverse"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt; &lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -648,8 +371,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Column Direction&lt;/h3&gt; &lt;h5&gt;Column Direction&lt;/h5&gt;
&lt;div class="p-grid p-dir-col"&gt; &lt;div class="p-grid p-flex-column"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt; &lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -661,8 +384,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Reverse Column Direction&lt;/h3&gt; &lt;h5&gt;Reverse Column Direction&lt;/h5&gt;
&lt;div class="p-grid p-dir-col-rev"&gt; &lt;div class="p-grid p-flex-column-reverse"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;1&lt;/div&gt; &lt;div class="box"&gt;1&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -674,7 +397,7 @@
&lt;/div&gt; &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-grid"&gt;
&lt;div class="p-col-4"&gt; &lt;div class="p-col-4"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
@ -729,7 +452,7 @@
&lt;/div&gt; &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-grid"&gt;
&lt;div class="p-col-6"&gt; &lt;div class="p-col-6"&gt;
&lt;div class="box"&gt;6&lt;/div&gt; &lt;div class="box"&gt;6&lt;/div&gt;
@ -745,7 +468,7 @@
&lt;/div&gt; &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-grid"&gt;
&lt;div class="p-col-fixed" style="width:100px"&gt; &lt;div class="p-col-fixed" style="width:100px"&gt;
&lt;div class="box"&gt;100px&lt;/div&gt; &lt;div class="box"&gt;100px&lt;/div&gt;
@ -755,7 +478,7 @@
&lt;/div&gt; &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-grid"&gt;
&lt;div class="p-col-12 p-md-6 p-lg-3"&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 class="box"&gt;p-col-12 p-md-6 p-lg-3&lt;/div&gt;
@ -771,8 +494,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Start&lt;/h3&gt; &lt;h5&gt;Horizontal Alignment - Start&lt;/h5&gt;
&lt;div class="p-grid p-justify-start"&gt; &lt;div class="p-grid p-jc-start"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -784,8 +507,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - End&lt;/h3&gt; &lt;h5&gt;Horizontal Alignment - End&lt;/h5&gt;
&lt;div class="p-grid p-justify-end"&gt; &lt;div class="p-grid p-jc-end"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -797,8 +520,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Center&lt;/h3&gt; &lt;h5&gt;Horizontal Alignment - Center&lt;/h5&gt;
&lt;div class="p-grid p-justify-center"&gt; &lt;div class="p-grid p-jc-center"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -810,8 +533,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Between&lt;/h3&gt; &lt;h5&gt;Horizontal Alignment - Between&lt;/h5&gt;
&lt;div class="p-grid p-justify-between"&gt; &lt;div class="p-grid p-jc-between"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -823,8 +546,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Around&lt;/h3&gt; &lt;h5&gt;Horizontal Alignment - Around&lt;/h5&gt;
&lt;div class="p-grid p-justify-around"&gt; &lt;div class="p-grid p-jc-around"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -836,8 +559,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Horizontal Alignment - Even&lt;/h3&gt; &lt;h5&gt;Horizontal Alignment - Even&lt;/h5&gt;
&lt;div class="p-grid p-justify-even"&gt; &lt;div class="p-grid p-jc-evenly"&gt;
&lt;div class="p-col-2"&gt; &lt;div class="p-col-2"&gt;
&lt;div class="box"&gt;2&lt;/div&gt; &lt;div class="box"&gt;2&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -849,8 +572,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Start&lt;/h3&gt; &lt;h5&gt;Vertical Alignment - Start&lt;/h5&gt;
&lt;div class="p-grid p-align-start vertical-container"&gt; &lt;div class="p-grid p-ai-start vertical-container"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -862,8 +585,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Vertical Alignment - End&lt;/h3&gt; &lt;h5&gt;Vertical Alignment - End&lt;/h5&gt;
&lt;div class="p-grid p-align-end vertical-container"&gt; &lt;div class="p-grid p-ai-end vertical-container"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -875,8 +598,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Center&lt;/h3&gt; &lt;h5&gt;Vertical Alignment - Center&lt;/h5&gt;
&lt;div class="p-grid p-align-center vertical-container"&gt; &lt;div class="p-grid p-ai-center vertical-container"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -888,8 +611,8 @@
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Vertical Alignment - Stretch&lt;/h3&gt; &lt;h5&gt;Vertical Alignment - Stretch&lt;/h5&gt;
&lt;div class="p-grid p-align-stretch vertical-container"&gt; &lt;div class="p-grid p-ai-stretch vertical-container"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;div class="box box-stretched"&gt;4&lt;/div&gt; &lt;div class="box box-stretched"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -901,20 +624,20 @@
&lt;/div&gt; &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-grid vertical-container"&gt;
&lt;div class="p-col p-col-align-start"&gt; &lt;div class="p-col p-as-start"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col p-col-align-center"&gt; &lt;div class="p-col p-as-center"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col p-col-align-end"&gt; &lt;div class="p-col p-as-end"&gt;
&lt;div class="box"&gt;4&lt;/div&gt; &lt;div class="box"&gt;4&lt;/div&gt;
&lt;/div&gt; &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-grid"&gt;
&lt;div class="p-col-6 p-offset-3"&gt; &lt;div class="p-col-6 p-offset-3"&gt;
&lt;div class="box"&gt;6&lt;/div&gt; &lt;div class="box"&gt;6&lt;/div&gt;
@ -930,7 +653,7 @@
&lt;/div&gt; &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-grid nested-grid"&gt;
&lt;div class="p-col-8"&gt; &lt;div class="p-col-8"&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
@ -950,7 +673,7 @@
&lt;/div&gt; &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-grid"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;Panel header="Header"&gt; &lt;Panel header="Header"&gt;

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

@ -8,15 +8,7 @@ import MegaMenu from 'primevue/megamenu';
</CodeHighlight> </CodeHighlight>
<h5>MenuModel</h5> <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> <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>
<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>
<CodeHighlight> <CodeHighlight>
&lt;MegaMenu :model="items" /&gt; &lt;MegaMenu :model="items" /&gt;
</CodeHighlight> </CodeHighlight>

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

@ -14,10 +14,7 @@ npm install primeicons --save
<h5>PrimeFlex</h5> <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 <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> 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>
<CodeHighlight lang="js">
npm install primeflex --save
</CodeHighlight>
<h5>Module Loader</h5> <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. <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> <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> <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>
<TabPanel header="Source"> <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; &lt;div class="p-text-italic"&gt;Italic&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
<h5>Dependencies</h5>
<p>PrimeFlex.</p>
</TabPanel> </TabPanel>
<TabPanel header="Source"> <TabPanel header="Source">