Add display utility demo
cagataycivici
parent
e9bdabef9f
commit
df934fcdec
|
|
@ -12,11 +12,14 @@
|
||||||
|
|
||||||
<div class="menu-category">Utilities</div>
|
<div class="menu-category">Utilities</div>
|
||||||
<div class="menu-items">
|
<div class="menu-items">
|
||||||
<router-link to="/icons">Icons</router-link>
|
<router-link to="/display">Display</router-link>
|
||||||
<router-link to="/flexgrid">Grid System</router-link>
|
|
||||||
<router-link to="/formlayout">FormLayout</router-link>
|
|
||||||
<router-link to="/elevation">Elevation</router-link>
|
<router-link to="/elevation">Elevation</router-link>
|
||||||
|
<router-link to="/flexbox">FlexBox</router-link>
|
||||||
|
<router-link to="/formlayout">FormLayout</router-link>
|
||||||
|
<router-link to="/flexgrid">Grid System</router-link>
|
||||||
|
<router-link to="/icons">Icons</router-link>
|
||||||
<router-link to="/spacing">Spacing</router-link>
|
<router-link to="/spacing">Spacing</router-link>
|
||||||
|
<router-link to="/text">Text</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="menu-category">Form</div>
|
<div class="menu-category">Form</div>
|
||||||
|
|
|
||||||
|
|
@ -481,6 +481,21 @@ export default new Router({
|
||||||
name: 'spacing',
|
name: 'spacing',
|
||||||
component: () => import('./views/spacing/SpacingDemo.vue')
|
component: () => import('./views/spacing/SpacingDemo.vue')
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/display',
|
||||||
|
name: 'display',
|
||||||
|
component: () => import('./views/display/DisplayDemo.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/flexbox',
|
||||||
|
name: 'flexbox',
|
||||||
|
component: () => import('./views/flexbox/FlexBoxDemo.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/text',
|
||||||
|
name: 'text',
|
||||||
|
component: () => import('./views/text/TextDemo.vue')
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/splitbutton',
|
path: '/splitbutton',
|
||||||
name: 'splitbutton',
|
name: 'splitbutton',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Display</h1>
|
||||||
|
<p>Efficiently configure the display of the component with <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> display utilities.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
<div class="card">
|
||||||
|
<h5>Inline</h5>
|
||||||
|
<InputText class="p-mr-2 p-d-inline" />
|
||||||
|
<InputText class="p-d-inline" />
|
||||||
|
|
||||||
|
<h5>Block</h5>
|
||||||
|
<InputText class="p-mb-2 p-d-block" />
|
||||||
|
<InputText class="p-d-block" />
|
||||||
|
|
||||||
|
<h5>Visible on a Small Screen</h5>
|
||||||
|
<p>Resize to view.</p>
|
||||||
|
<Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />
|
||||||
|
|
||||||
|
<h5>Hidden on a Small Screen</h5>
|
||||||
|
<p>Resize to hide.</p>
|
||||||
|
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />
|
||||||
|
|
||||||
|
<h5>Visible to Print, Invisible for Screen</h5>
|
||||||
|
<p class="p-d-none p-print-block">Only visible when printed.</p>
|
||||||
|
|
||||||
|
<h5>Visible to Screen, Invisible for Print</h5>
|
||||||
|
<p class="p-d-block p-print-none">Not available for printing.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DisplayDoc />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DisplayDoc from './DisplayDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'DisplayDoc': DisplayDoc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Documentation">
|
||||||
|
<h5>Getting Started</h5>
|
||||||
|
<p>The display classes use the <i>p-d-{value}</i> format and <i>p-d-{breakpoint}-{value}</i> format for responsive design.</p>
|
||||||
|
|
||||||
|
<h5>Values</h5>
|
||||||
|
<p>Value field can be one of the following options.</p>
|
||||||
|
<ul>
|
||||||
|
<li>none</li>
|
||||||
|
<li>inline</li>
|
||||||
|
<li>inline-block</li>
|
||||||
|
<li>block</li>
|
||||||
|
<li>flex</li>
|
||||||
|
<li>inline-flex</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h5>Breakpoint</h5>
|
||||||
|
<p>Breakpoints define how the display property should be defined depending on the screen size. Design is mobile first so smaller values
|
||||||
|
can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.</p>
|
||||||
|
<ul>
|
||||||
|
<li><b>sm</b>: small screens e.g. phones</li>
|
||||||
|
<li><b>md</b>: medium screens e.g. tablets</li>
|
||||||
|
<li><b>lg</b>: large screens e.g. notebooks</li>
|
||||||
|
<li><b>xl</b>: larger screens .e.g monitors</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h5>Examples</h5>
|
||||||
|
<CodeHighlight>
|
||||||
|
<div class="p-d-inline">Displayed as inline.</div>
|
||||||
|
<div class="p-d-flex">Displayed as a flexbox container.</div>
|
||||||
|
<div class="p-d-block p-d-lg-inline">Inline for larger screens and block for others.</div>
|
||||||
|
<div class="p-d-md-none">Visible on a Small Screen</div>
|
||||||
|
<div class="p-d-none p-d-md-inline-flex">Hidden on a Small Screen</div>
|
||||||
|
<div class="p-d-none p-print-block">Only visible when printed.</div>
|
||||||
|
<div class="p-d-block p-print-none">Not available for printing.</div>
|
||||||
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<h5>Dependencies</h5>
|
||||||
|
<p>PrimeFlex.</p>
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/display" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
<div class="card">
|
||||||
|
<h5>Inline</h5>
|
||||||
|
<InputText class="p-mr-2 p-d-inline" />
|
||||||
|
<InputText class="p-d-inline" />
|
||||||
|
|
||||||
|
<h5>Block</h5>
|
||||||
|
<InputText class="p-mb-2 p-d-block" />
|
||||||
|
<InputText class="p-d-block" />
|
||||||
|
|
||||||
|
<h5>Visible on a Small Screen</h5>
|
||||||
|
<p>Resize to view.</p>
|
||||||
|
<Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />
|
||||||
|
|
||||||
|
<h5>Hidden on a Small Screen</h5>
|
||||||
|
<p>Resize to hide.</p>
|
||||||
|
<Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />
|
||||||
|
|
||||||
|
<h5>Visible to Print, Invisible for Screen</h5>
|
||||||
|
<p class="p-d-none p-print-block">Only visible when printed.</p>
|
||||||
|
|
||||||
|
<h5>Visible to Screen, Invisible for Print</h5>
|
||||||
|
<p class="p-d-block p-print-none">Not available for printing.</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>FlexBox</h1>
|
||||||
|
<p><a href="https://github.com/primefaces/primeflex">PrimeFlex</a> provides various spacing utilities to modify an element's layout.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<DisplayDoc />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import FlexBoxDoc from './FlexBoxDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'FlexBoxDoc': FlexBoxDoc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Documentation">
|
||||||
|
<h5>Getting Started</h5>
|
||||||
|
<p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
|
||||||
|
values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<h5>Dependencies</h5>
|
||||||
|
<p>PrimeFlex.</p>
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/display" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
@ -39,7 +39,8 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h5>Breakpoint</h5>
|
<h5>Breakpoint</h5>
|
||||||
<p>Breakpoints define how the spacing should be depending on the screen size.</p>
|
<p>Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values
|
||||||
|
can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><b>sm</b>: small screens e.g. phones</li>
|
<li><b>sm</b>: small screens e.g. phones</li>
|
||||||
<li><b>md</b>: medium screens e.g. tablets</li>
|
<li><b>md</b>: medium screens e.g. tablets</li>
|
||||||
|
|
@ -49,15 +50,18 @@
|
||||||
|
|
||||||
<h5>Examples</h5>
|
<h5>Examples</h5>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<div class="p-mb-2">Margin bottom with level 2</i>
|
<div class="p-mb-2">Margin bottom with level 2</div>
|
||||||
<div class="p-mt-4">Margin top with level 2</i>
|
<div class="p-mt-4">Margin top with level 2</div>
|
||||||
<div class="p-m-2">Margin for all sides with level 2</i>
|
<div class="p-m-2">Margin for all sides with level 2</div>
|
||||||
<div class="p-mx-auto">Auto margins for left and right side</i>
|
<div class="p-mx-auto">Auto margins for left and right side</div>
|
||||||
<div class="p-pb-4">Padding bottom with level 4</i>
|
<div class="p-pb-4">Padding bottom with level 4</div>
|
||||||
<div class="p-p-1">Padding for all sides with level 1</i>
|
<div class="p-p-1">Padding for all sides with level 1</div>
|
||||||
<div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3">Level 3 spacing for lg screens and level 1 for smaller screens (xs).</i>
|
<div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3">Level 3 spacing for lg screens and level 1 for smaller screens (xs).</div>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>PrimeFlex.</p>
|
<p>PrimeFlex.</p>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="content-section introduction">
|
||||||
|
<div class="feature-intro">
|
||||||
|
<h1>Text</h1>
|
||||||
|
<p><a href="https://github.com/primefaces/primeflex">PrimeFlex</a> provides various spacing utilities to modify an element's layout.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-section implementation">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<TextDoc />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TextDoc from './TextDoc';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'TextDoc': TextDoc
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<template>
|
||||||
|
<div class="content-section documentation">
|
||||||
|
<TabView>
|
||||||
|
<TabPanel header="Documentation">
|
||||||
|
<h5>Getting Started</h5>
|
||||||
|
<p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
|
||||||
|
values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
|
||||||
|
|
||||||
|
|
||||||
|
<h5>Dependencies</h5>
|
||||||
|
<p>PrimeFlex.</p>
|
||||||
|
</TabPanel>
|
||||||
|
|
||||||
|
<TabPanel header="Source">
|
||||||
|
<a href="https://github.com/primefaces/primevue/tree/master/src/views/display" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||||
|
<span>View on GitHub</span>
|
||||||
|
</a>
|
||||||
|
<CodeHighlight>
|
||||||
|
<template v-pre>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</CodeHighlight>
|
||||||
|
</TabPanel>
|
||||||
|
</TabView>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue