Add display utility demo
cagataycivici
parent
e9bdabef9f
commit
df934fcdec
|
|
@ -12,11 +12,14 @@
|
|||
|
||||
<div class="menu-category">Utilities</div>
|
||||
<div class="menu-items">
|
||||
<router-link to="/icons">Icons</router-link>
|
||||
<router-link to="/flexgrid">Grid System</router-link>
|
||||
<router-link to="/formlayout">FormLayout</router-link>
|
||||
<router-link to="/display">Display</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="/text">Text</router-link>
|
||||
</div>
|
||||
|
||||
<div class="menu-category">Form</div>
|
||||
|
|
|
|||
|
|
@ -481,6 +481,21 @@ export default new Router({
|
|||
name: 'spacing',
|
||||
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',
|
||||
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>
|
||||
|
||||
<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>
|
||||
<li><b>sm</b>: small screens e.g. phones</li>
|
||||
<li><b>md</b>: medium screens e.g. tablets</li>
|
||||
|
|
@ -49,15 +50,18 @@
|
|||
|
||||
<h5>Examples</h5>
|
||||
<CodeHighlight>
|
||||
<div class="p-mb-2">Margin bottom with level 2</i>
|
||||
<div class="p-mt-4">Margin top with level 2</i>
|
||||
<div class="p-m-2">Margin for all sides with level 2</i>
|
||||
<div class="p-mx-auto">Auto margins for left and right side</i>
|
||||
<div class="p-pb-4">Padding bottom with level 4</i>
|
||||
<div class="p-p-1">Padding for all sides with level 1</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).</i>
|
||||
<div class="p-mb-2">Margin bottom with level 2</div>
|
||||
<div class="p-mt-4">Margin top with level 2</div>
|
||||
<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</div>
|
||||
<div class="p-pb-4">Padding bottom with level 4</div>
|
||||
<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).</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>
|
||||
|
|
|
|||
|
|
@ -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