Fixed #464 - Update PrimeFlex documentation to 2.0.0
Cagatay Civici
parent
e0a2ec8be0
commit
8f9782c79c
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,6 @@
|
||||||
<div class="p-shadow-1" />
|
<div class="p-shadow-1" />
|
||||||
<div class="p-shadow-24" />
|
<div class="p-shadow-24" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
|
||||||
<p>PrimeFlex.</p>
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 -->
|
|
||||||
<div class="p-grid p-dir-rev">
|
|
||||||
<div class="p-col">1</div>
|
|
||||||
<div class="p-col">2</div>
|
|
||||||
<div class="p-col">3</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Column -->
|
|
||||||
<div class="p-grid p-dir-col">
|
|
||||||
<div class="p-col">1</div>
|
|
||||||
<div class="p-col">2</div>
|
|
||||||
<div class="p-col">3</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Column Reverse -->
|
|
||||||
<div class="p-grid p-dir-col-rev">
|
|
||||||
<div class="p-col">1</div>
|
|
||||||
<div class="p-col">2</div>
|
|
||||||
<div class="p-col">3</div>
|
|
||||||
</div>
|
|
||||||
</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-{number}</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-{number}</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>
|
|
||||||
<div class="p-grid p-justify-between">
|
|
||||||
<div class="p-col-2">2</div>
|
|
||||||
<div class="p-col-1">1</div>
|
|
||||||
<div class="p-col-4">4</div>
|
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
<div class="p-grid p-align-center">
|
|
||||||
<div class="p-col">4</div>
|
|
||||||
<div class="p-col">4</div>
|
|
||||||
<div class="p-col">4</div>
|
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
<div class="p-grid">
|
|
||||||
<div class="p-col p-col-align-start">4</div>
|
|
||||||
<div class="p-col p-col-align-center">4</div>
|
|
||||||
<div class="p-col p-col-align-end">4</div>
|
|
||||||
</div>
|
|
||||||
</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 @@
|
||||||
<div class="p-col">3</div>
|
<div class="p-col">3</div>
|
||||||
</div>
|
</div>
|
||||||
</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,372 +333,372 @@
|
||||||
</a>
|
</a>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<template v-pre>
|
<template v-pre>
|
||||||
<h3>Basic</h3>
|
<h5>Basic</h5>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Dynamic</h3>
|
<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-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" />
|
<Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
|
||||||
|
|
||||||
<div style="margin-top: .5em">
|
<div style="margin-top: .5em">
|
||||||
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
<transition-group name="dynamic-box" tag="div" class="p-grid">
|
||||||
<div v-for="col of columns" :key="col" class="p-col">
|
<div v-for="col of columns" :key="col" class="p-col">
|
||||||
<div class="box">{{col}}</div>
|
<div class="box">{{col}}</div>
|
||||||
</div>
|
</div>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Reverse Direction</h3>
|
<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>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Column Direction</h3>
|
<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>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Reverse Column Direction</h3>
|
<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>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">3</div>
|
<div class="box">3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>12 Column Grid</h3>
|
<h5>12 Column Grid</h5>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-8">
|
<div class="p-col-8">
|
||||||
<div class="box">8</div>
|
<div class="box">8</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-2">
|
<div class="p-col-2">
|
||||||
<div class="box">2</div>
|
<div class="box">2</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>MultiLine</h3>
|
<h5>MultiLine</h5>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Fixed Width Column</h3>
|
<h5>Fixed Width Column</h5>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-fixed" style="width:100px">
|
<div class="p-col-fixed" style="width:100px">
|
||||||
<div class="box">100px</div>
|
<div class="box">100px</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">auto</div>
|
<div class="box">auto</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Responsive</h3>
|
<h5>Responsive</h5>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12 p-md-6 p-lg-3">
|
<div class="p-col-12 p-md-6 p-lg-3">
|
||||||
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
<div class="box">p-col-12 p-md-6 p-lg-3</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Start</h3>
|
<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>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - End</h3>
|
<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>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Center</h3>
|
<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>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Between</h3>
|
<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>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Around</h3>
|
<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>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Horizontal Alignment - Even</h3>
|
<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>
|
||||||
<div class="p-col-1">
|
<div class="p-col-1">
|
||||||
<div class="box">1</div>
|
<div class="box">1</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Start</h3>
|
<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>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - End</h3>
|
<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>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Center</h3>
|
<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>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Stretch</h3>
|
<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>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Vertical Alignment - Per Column</h3>
|
<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>
|
||||||
|
|
||||||
<h3>Offset</h3>
|
<h5>Offset</h5>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6 p-offset-3">
|
<div class="p-col-6 p-offset-3">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4 p-offset-4">
|
<div class="p-col-4 p-offset-4">
|
||||||
<div class="box">4</div>
|
<div class="box">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Nested</h3>
|
<h5>Nested</h5>
|
||||||
<div class="p-grid nested-grid">
|
<div class="p-grid nested-grid">
|
||||||
<div class="p-col-8">
|
<div class="p-col-8">
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-6">
|
<div class="p-col-6">
|
||||||
<div class="box">6</div>
|
<div class="box">6</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-12">
|
<div class="p-col-12">
|
||||||
<div class="box">12</div>
|
<div class="box">12</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col-4">
|
<div class="p-col-4">
|
||||||
<div class="box box-stretched">4</div>
|
<div class="box box-stretched">4</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Panels</h3>
|
<h5>Panels</h5>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Header">
|
<Panel header="Header">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<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.
|
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
|
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>
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Header">
|
<Panel header="Header">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<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.
|
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
|
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>
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Header">
|
<Panel header="Header">
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
<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.
|
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
|
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>
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
<MegaMenu :model="items" />
|
<MegaMenu :model="items" />
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
|
||||||
|
|
@ -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.
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -68,9 +68,6 @@
|
||||||
<div class="p-text-italic">Italic</div>
|
<div class="p-text-italic">Italic</div>
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
|
||||||
<p>PrimeFlex.</p>
|
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
||||||
<TabPanel header="Source">
|
<TabPanel header="Source">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue