Fixed #434 - Docs for PrimeFlex Setup
cagataycivici
parent
e74cf13e11
commit
a0f11bdacf
|
|
@ -20,6 +20,7 @@
|
|||
|
||||
<div class="menu-category">PrimeFlex</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/primeflex">Setup</router-link>
|
||||
<router-link to="/display">Display</router-link>
|
||||
<router-link to="/elevation">Elevation</router-link>
|
||||
<router-link to="/flexbox">FlexBox</router-link>
|
||||
|
|
|
|||
|
|
@ -460,6 +460,11 @@ export default new Router({
|
|||
path: '/progressspinner',
|
||||
name: 'progressspinner',
|
||||
component: () => import('./views/progressspinner/ProgressSpinnerDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/primeflex',
|
||||
name: 'primeflex',
|
||||
component: () => import('./views/primeflex/PrimeFlexSetup.vue')
|
||||
},
|
||||
{
|
||||
path: '/radiobutton',
|
||||
|
|
|
|||
|
|
@ -2,17 +2,6 @@
|
|||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Install</h5>
|
||||
<p>PrimeFlex is available at npm, if you have an existing application run the following command to download it to your project.</p>
|
||||
<CodeHighlight lang="js">
|
||||
npm install primeflex --save
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Then add the primeflex.css to your application</p>
|
||||
<CodeHighlight lang="js">
|
||||
import 'primeflex/primeflex.css';
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
|
||||
<CodeHighlight>
|
||||
|
|
|
|||
|
|
@ -2,18 +2,6 @@
|
|||
<div class="content-section documentation flexgrid-demo">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Install</h5>
|
||||
<p>PrimeFlex is available at npm, if you have an existing application run the following command to download it to your project.</p>
|
||||
<CodeHighlight lang="js">
|
||||
npm install primeflex --save
|
||||
</CodeHighlight>
|
||||
|
||||
<p>Then add the primeflex.css to your application</p>
|
||||
<CodeHighlight lang="js">
|
||||
import 'primeflex/primeflex.css';
|
||||
</CodeHighlight>
|
||||
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
|
||||
a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section documentation">
|
||||
<h1>PrimeFlex</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>
|
||||
|
||||
<h5>Download</h5>
|
||||
<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>
|
||||
|
||||
<h5>Import</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>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
import 'primeflex/primeflex.css';
|
||||
</CodeHighlight>
|
||||
|
||||
<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>
|
||||
<CodeHighlight lang="css">
|
||||
import 'primeflex/src/_variables.scss';
|
||||
import 'primeflex/src/_grid.scss';
|
||||
import 'primeflex/src/_formlayout.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';
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Variables</h5>
|
||||
<p>PrimeFlex uses sensible defaults for the variables.</p>
|
||||
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Description</th>
|
||||
<th>Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>$sm</td>
|
||||
<td>Breakpoint of screens such as phones.</td>
|
||||
<td>576px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$md</td>
|
||||
<td>Breakpoint of screens such as tablets.</td>
|
||||
<td>768px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$lg</td>
|
||||
<td>Breakpoint of screens such as notebook monitors.</td>
|
||||
<td>992px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$xl</td>
|
||||
<td>Breakpoint of smaller screens such as desktop monitors.</td>
|
||||
<td>1200px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$gutter</td>
|
||||
<td>Padding of a grid column.</td>
|
||||
<td>.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$fieldMargin</td>
|
||||
<td>Spacing of a field. Can be vertical of horizontal depending on form layout.</td>
|
||||
<td>.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$fieldLabelMargin</td>
|
||||
<td>Spacing of a field label. Can be vertical of horizontal depending on form layout.</td>
|
||||
<td>.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$helperTextMargin</td>
|
||||
<td>Top spacing of a helper text.</td>
|
||||
<td>.5rem</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>$spacer</td>
|
||||
<td>Base value to use in spacing utilities, view spacing documentation for details.</td>
|
||||
<td>.5rem</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>There are two ways to use these variables, one option is getting the source code of PrimeFlex from github, compile your own primeflex and importing the css file. Other
|
||||
alternative is importing your own variables to override the defaults if your application can import scss files. Example below overrides breakpoints;
|
||||
</p>
|
||||
|
||||
<p><b>_overrides.scss</b></p>
|
||||
<CodeHighlight lang="css">
|
||||
$sm:640px;
|
||||
$md:720px;
|
||||
$lg:960px;
|
||||
$xl:1080px;
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
import './assets/myoverrides.scss';
|
||||
import 'primeflex/src/_variables.css';
|
||||
import 'primeflex/src/_grid.css';
|
||||
import 'primeflex/src/_formlayour.css';
|
||||
import 'primeflex/src/_display.css';
|
||||
import 'primeflex/src/_text.css';
|
||||
import 'primeflex/src/flexbox/_flexbox.css';
|
||||
import 'primeflex/src/_spacing.css';
|
||||
import 'primeflex/src/_elevation.css';
|
||||
</CodeHighlight>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Loading…
Reference in New Issue