csb added to display
Tuğçe Küçükoğlu
parent
b4714e8740
commit
d07b0a84d5
|
|
@ -1,32 +1,30 @@
|
|||
<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>
|
||||
<AppDoc name="DisplayDemo" :sources="sources">
|
||||
<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>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>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>
|
||||
<h5>Examples</h5>
|
||||
<pre v-code><code>
|
||||
<div class="p-d-inline">Displayed as inline.</div>
|
||||
<div class="p-d-flex">Displayed as a flexbox container.</div>
|
||||
|
|
@ -38,41 +36,90 @@
|
|||
|
||||
</code></pre>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<pre v-code><code><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>
|
||||
<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>
|
||||
</AppDoc>
|
||||
</template>
|
||||
</code></pre>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'options-api': {
|
||||
tabName: 'Source',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
},
|
||||
'composition-api': {
|
||||
tabName: 'Composition API',
|
||||
content: `
|
||||
<template>
|
||||
<div>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
<\\/script>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue