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

doc update for primeflex 3

pull/1984/head
Tuğçe Küçükoğlu 2022-01-13 16:05:48 +03:00 committed by Tuğçe Küçükoğlu
parent 8b872e37c2
commit f8e53a5d9a
7 changed files with 82 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/menu/menu.json
View File

@ -108,16 +108,7 @@
"children": []
},
{
"name": "PrimeFlex 3.0",
"meta": ["primeflex"],
"banner": true,
"imageLight": "demo/images/banner-primeflex.svg",
"imageDark": "demo/images/banner-primeflex-dark.svg",
"url": "https://www.primefaces.org/primeflex",
"children": []
},
{
"name": "PrimeFlex 2.0",
"name": "PrimeFlex",
"meta": ["primeflex"],
"children": [
{

5
src/views/elevation/ElevationDemo.vue
View File

@ -10,9 +10,12 @@
<div class="content-section implementation">
<div class="grid">
<div class="p-col">
<div class="shadow-box shadow-none">shadow-none</div>
</div>
<div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'shadow-' + index]">
p-shadow-{{index}}
shadow-{{index}}
</div>
</div>
</div>

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

@ -31,6 +31,9 @@ export default {
<template>
<div>
<div class="grid">
<div class="p-col">
<div class="shadow-box shadow-none">shadow-none</div>
</div>
<div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'shadow-' + index]">
shadow-{{index}}
@ -66,6 +69,9 @@ export default {
<template>
<div>
<div class="grid">
<div class="p-col">
<div class="shadow-box shadow-none">shadow-none</div>
</div>
<div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'shadow-' + index]">
shadow-{{index}}
@ -99,6 +105,9 @@ export default {
tabName: 'Browser Source',
content: `<div id="app">
<div class="grid">
<div class="p-col">
<div class="shadow-box shadow-none">shadow-none</div>
</div>
<div class="p-col" v-for="index in 8" :key="index">
<div :class="['shadow-box', 'shadow-' + index]">
shadow-{{index}}

61
src/views/primeflex/PrimeFlexSetup.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<div class="content-section documentation">
<h1>PrimeFlex (v2.0.0)</h1>
<h1>PrimeFlex (v3.0.0)</h1>
<p>PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more. Although it is not required, it is highly
recommended to add PrimeFlex as it is likely to need such utilities when developing applications with PrimeVue.</p>
@ -9,29 +9,52 @@
<p>PrimeFlex is available at <a href="https://www.npmjs.com/package/primeflex">npm</a>, if you have an existing application run the following commands to install it.</p>
<pre v-code.script><code>
npm install primeflex@2.0.0 --save
npm install primeflex --save
</code></pre>
<h5>Import</h5>
<h5>Import via Module</h5>
<p>Next step is adding the primeflex.css to your application to include all utilities. If you prefer to pick the utilities, move to next step instead.</p>
<pre v-code.css><code>
import 'primeflex/primeflex.css';
</code></pre>
<h5>Import via CDN</h5>
<pre v-code.script><code>
&lt;link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" /&gt;
</code></pre>
<p>PrimeFlex is a lightweight library still if you have an application such as one based on vue-cli
that is able to import scss then you will be able to pick the utilities you need to make the app bundle even smaller.</p>
<pre v-code.css><code>
import 'primeflex/src/_variables.scss';
import 'primeflex/src/_grid.scss';
import 'primeflex/src/_formlayout.scss';
import 'primeflex/src/_animations.scss';
import 'primeflex/src/_border.scss';
import 'primeflex/src/_borderradius.scss';
import 'primeflex/src/_colors.scss';
import 'primeflex/src/_display.scss';
import 'primeflex/src/_text.scss';
import 'primeflex/src/flexbox/_flexbox.scss';
import 'primeflex/src/_spacing.scss';
import 'primeflex/src/_elevation.scss';
import 'primeflex/src/_flexbox.scss';
import 'primeflex/src/_formlayout.scss';
import 'primeflex/src/_grid.scss';
import 'primeflex/src/_image.scss';
import 'primeflex/src/_liststyle.scss';
import 'primeflex/src/_misc.scss';
import 'primeflex/src/_mixins.scss';
import 'primeflex/src/_overflow.scss';
import 'primeflex/src/_padding.scss';
import 'primeflex/src/_position.scss';
import 'primeflex/src/_size.scss';
import 'primeflex/src/_spacing.scss';
import 'primeflex/src/_transform.scss';
import 'primeflex/src/_transition.scss';
import 'primeflex/src/_typography.scss';
import 'primeflex/src/_userselect.scss';
import 'primeflex/src/_utils.scss';
import 'primeflex/src/_variables.scss';
import 'primeflex/src/_zindex.scss';
</code></pre>
@ -74,7 +97,7 @@ import 'primeflex/src/_elevation.scss';
<tr>
<td>$fieldMargin</td>
<td>Spacing of a field. Can be vertical of horizontal depending on form layout.</td>
<td>.5rem</td>
<td>1rem</td>
</tr>
<tr>
<td>$fieldLabelMargin</td>
@ -84,12 +107,17 @@ import 'primeflex/src/_elevation.scss';
<tr>
<td>$helperTextMargin</td>
<td>Top spacing of a helper text.</td>
<td>.5rem</td>
<td>.25rem</td>
</tr>
<tr>
<td>$spacer</td>
<td>Base value to use in spacing utilities, view spacing documentation for details.</td>
<td>.5rem</td>
<td>1rem</td>
</tr>
<tr>
<td>$separator</td>
<td>Separator between responsive breakpoints like <i>md:</i> and pseudo classes like <i>hover:</i></td>
<td>:</td>
</tr>
</tbody>
</table>
@ -115,11 +143,18 @@ import 'primeflex/src/_grid.css';
import 'primeflex/src/_formlayout.css';
import 'primeflex/src/_display.css';
import 'primeflex/src/_text.css';
import 'primeflex/src/flexbox/_flexbox.css';
import 'primeflex/src/_flexbox.css';
import 'primeflex/src/_spacing.css';
import 'primeflex/src/_elevation.css';
</code></pre>
<h5>Production Size</h5>
<p>When using a utility CSS library like PrimeFlex, it is likely to use only a set of classes from the library leaving the rest of the library as unused. To avoid including
the unused part from your application, it is strongly recommended to use a tool like <a href="https://purgecss.com/">PurgeCSS</a> that analyzes your code and generates an optimized primeflex file that only contains the utilities you've used.</p>
<h5>VSCode Extension</h5>
<p>The official PrimeFlex extension for <a href="https://marketplace.visualstudio.com/items?itemName=yigitfindikli.primeflexsnippets">VSCode</a> provides code completion and snippets support for the classes. Search for "PrimeFlex" at VSCode marketplace to download and install the extension.</p>
</div>
</div>
</template>

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

@ -2,7 +2,7 @@
<AppDoc name="SpacingDemo" :sources="sources" github="spacing/SpacingDemo.vue" >
<h5>Getting Started</h5>
<p>The spacing classes use the <i>{property}{position}-{value}</i> syntax whereas for responsive
values <i>{property}{position}-{breakpoint}-{value}</i> format is used.</p>
values <i>{breakpoint}:{property}{position}-{value}</i> format is used.</p>
<h5>Property</h5>
<p>Property can either be a margin or a padding.</p>
@ -33,6 +33,8 @@
<li><b>4</b>: $spacer * 1.5</li>
<li><b>5</b>: $spacer * 2</li>
<li><b>6</b>: $spacer * 3</li>
<li><b>7</b>: $spacer * 4</li>
<li><b>8</b>: $spacer * 5</li>
<li><b>auto</b>: auto margin</li>
</ul>

2
src/views/text/TextDemo.vue
View File

@ -18,7 +18,7 @@
<h5>Wrap</h5>
<div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="mb-3 text-lowercase">LOWERCASE</div>

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

@ -17,20 +17,6 @@
&lt;div class="text-right"&gt;Right&lt;/div&gt;
&lt;div class="text-justify"&gt;Justify&lt;/div&gt;
</template>
</code></pre>
<h5>Wrap</h5>
<p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
<ul>
<li>nowrap</li>
<li>wrap</li>
<li>truncate</li>
</ul>
<pre v-code><code><template v-pre>
&lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
&lt;div class="white-space-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
&lt;div class="white-space-nowrap text-overflow-ellipsis" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
</template>
</code></pre>
<h5>Transform</h5>
@ -45,12 +31,23 @@
&lt;div class="text-uppercase"&gt;uppercase&lt;/div&gt;
&lt;div class="text-capitalize"&gt;capitalize&lt;/div&gt;
</template>
</code></pre>
<h5>Wrap</h5>
<p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
<pre v-code><code><template v-pre>
&lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
&lt;div class="white-space-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
&lt;div class="white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
</template>
</code></pre>
<h5>Style</h5>
<p>Text styling applies to font weight and style.</p>
<p>Text styling applies to font weight and style and also uses <i>font-{value}</i> syntax.</p>
<ul>
<li>bold</li>
<li>semi-bold</li>
<li>medium</li>
<li>normal</li>
<li>light</li>
<li>italic</li>
@ -89,7 +86,7 @@ export default {
<h5>Wrap</h5>
<div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="mb-3 text-lowercase">LOWERCASE</div>
@ -129,7 +126,7 @@ export default {
<h5>Wrap</h5>
<div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="mb-3 text-lowercase">LOWERCASE</div>
@ -167,7 +164,7 @@ export default {
<h5>Wrap</h5>
<div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="mb-3 demo-container white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="mb-3 text-lowercase">LOWERCASE</div>