diff --git a/src/views/display/DisplayDoc.vue b/src/views/display/DisplayDoc.vue index 895afa096..a81221614 100644 --- a/src/views/display/DisplayDoc.vue +++ b/src/views/display/DisplayDoc.vue @@ -39,9 +39,6 @@
Customization

A custom build with different values can be obtained from PrimeFlex using the _variables.scss file.

- -
Dependencies
-

PrimeFlex.

diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue index c5db091e7..6e1594849 100644 --- a/src/views/elevation/ElevationDoc.vue +++ b/src/views/elevation/ElevationDoc.vue @@ -14,9 +14,6 @@ <div class="p-shadow-1" /> <div class="p-shadow-24" /> - -
Dependencies
-

PrimeFlex.

 diff --git a/src/views/flexbox/FlexBoxDemo.vue b/src/views/flexbox/FlexBoxDemo.vue index c1a370bf8..26ea955a4 100644 --- a/src/views/flexbox/FlexBoxDemo.vue +++ b/src/views/flexbox/FlexBoxDemo.vue @@ -518,9 +518,6 @@
Item 1
Item 2
- -
Dependencies
-

PrimeFlex.

diff --git a/src/views/grid/GridDemo.vue b/src/views/grid/GridDemo.vue index d2dbb2689..82299bcfa 100755 --- a/src/views/grid/GridDemo.vue +++ b/src/views/grid/GridDemo.vue @@ -30,7 +30,7 @@
Reverse Direction
-
+
1
@@ -43,7 +43,7 @@
Column Direction
-
+
1
@@ -56,7 +56,7 @@
Reverse Column Direction
-
+
1
@@ -166,7 +166,7 @@
Horizontal Alignment - Start
-
+
2
@@ -179,7 +179,7 @@
Horizontal Alignment - End
-
+
2
@@ -192,7 +192,7 @@
Horizontal Alignment - Center
-
+
2
@@ -205,7 +205,7 @@
Horizontal Alignment - Between
-
+
2
@@ -218,7 +218,7 @@
Horizontal Alignment - Around
-
+
2
@@ -231,7 +231,7 @@
Horizontal Alignment - Even
-
+
2
@@ -244,7 +244,7 @@
Vertical Alignment - Start
-
+
4
@@ -257,7 +257,7 @@
Vertical Alignment - End
-
+
4
@@ -270,7 +270,7 @@
Vertical Alignment - Center
-
+
4
@@ -283,7 +283,7 @@
Vertical Alignment - Stretch
-
+
4
@@ -297,13 +297,13 @@
Vertical Alignment - Per Column
-
+
4
-
+
4
-
+
4
diff --git a/src/views/grid/GridDoc.vue b/src/views/grid/GridDoc.vue index 000ed6c29..828d0c860 100755 --- a/src/views/grid/GridDoc.vue +++ b/src/views/grid/GridDoc.vue @@ -25,66 +25,6 @@
-
Direction
-

Default direction is row and p-dir-* class at the container defines the other possible directions which can be row reverse, column and column 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> - - -<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> - - -<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> - - -
-
-
1
-
-
-
2
-
-
-
3
-
-
- -
-
-
1
-
-
-
2
-
-
-
3
-
-
- -
-
-
1
-
-
-
2
-
-
-
3
-
-
12 Column Grid

FlexGrid includes a 12 column based layout utility where width of a column is defined with the p-col-{number} style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.

@@ -259,171 +199,6 @@
D
- -
Horizontal Alignment
-

p-justify-* classes are used on the container element to define the alignment along the main axis.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
p-justify-start (default)Items are packed toward the start line
p-justify-endItems are packed toward to end line
p-justify-centerItems are centered along the line
p-justify-betweenItems are evenly distributed in the line; first item is on the start line, last item on the end line
p-justify-aroundItems are evenly distributed in the line with equal space around them.
p-justify-evenItems are distributed so that the spacing between any two items (and the space to the edges) is equal.
-
- -<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> - - -
-
-
2
-
-
-
1
-
-
-
4
-
-
- -
Vertical Alignment
-

p-align-* classes are used on the container element to define the alignment along the cross axis.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
p-align-stretch (default)Stretch to fill the container.
p-align-startCross-start margin edge of the items is placed on the cross-start line
p-align-endCross-end margin edge of the items is placed on the cross-end line
p-align-centerItems are centered in the cross-axis
p-align-baselineItems are aligned such as their baselines align
-
- -<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> - - -
-
-
4
-
-
-
4
-
-
-
4
-
-
-

Vertical alignment can also be defined at column level with the p-align-col-* classes.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ClassDescription
p-col-align-stretchStretch to fill the container.
p-col-align-startCross-start margin edge of the items is placed on the cross-start line
p-col-align-endCross-end margin edge of the items is placed on the cross-end line
p-col-align-centerItems are centered in the cross-axis
p-col-align-baselineItems are aligned such as their baselines align
-
- -<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> - - -
-
-
4
-
-
-
4
-
-
-
4
-
-
-
Offset

Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.

@@ -550,58 +325,6 @@ <div class="p-col">3</div> </div> - -
Customization
-

PrimeFlex allows customization of breakpoints and gutters via SASS variables, visit the PrimeFlex repository to get access to the primeflex.scss file to build your own customized Grid.

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableDefault
$sm576px
$md768
$lg992
$xl1200px
$gutter.5em
$fieldMargin1rem
$fieldLabelMargin.5rem
$helperTextMargin.25rem
$spacer1rem
-
@@ -610,372 +333,372 @@ diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue index 5ad6f5c5b..ae5281ace 100755 --- a/src/views/megamenu/MegaMenuDoc.vue +++ b/src/views/megamenu/MegaMenuDoc.vue @@ -8,15 +8,7 @@ import MegaMenu from 'primevue/megamenu';
MenuModel
-

MegaMenu uses the common MenuModel API to define the items, visit MenuModel API for details.

- -
Getting Started
-

Layout of the MegaMenu is managed by the PrimeFlex that can be downloaded from npm.

- -npm install primeflex --save - - -

MegaMenu requires a collection of menuitems as its model.

+

MegaMenu uses the common MenuModel API to define the items of the model, visit MenuModel API for details.

<MegaMenu :model="items" /> diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue index afef28817..c131d869e 100755 --- a/src/views/setup/Setup.vue +++ b/src/views/setup/Setup.vue @@ -14,10 +14,7 @@ npm install primeicons --save
PrimeFlex

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.

- -npm install primeflex --save - + recommended to add PrimeFlex as it is likely to need such utilities when developing applications. View the PrimeFlex section for the installation.

Module Loader

This is the recommended way if your application uses vue-cli or has a webpack based build with vue-loader configured. diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue index 2b86bfe9c..611925b60 100644 --- a/src/views/spacing/SpacingDoc.vue +++ b/src/views/spacing/SpacingDoc.vue @@ -61,9 +61,6 @@

Customization

A custom build with different values can be obtained from PrimeFlex using the _variables.scss file.

- -
Dependencies
-

PrimeFlex.

 diff --git a/src/views/text/TextDoc.vue b/src/views/text/TextDoc.vue index 3271c189a..724d3c3ce 100644 --- a/src/views/text/TextDoc.vue +++ b/src/views/text/TextDoc.vue @@ -68,9 +68,6 @@ <div class="p-text-italic">Italic</div> - -
Dependencies
-

PrimeFlex.