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

csb added to display

pull/1143/head
Tuğçe Küçükoğlu 2021-03-23 14:41:34 +03:00
parent b4714e8740
commit d07b0a84d5
1 changed files with 109 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/views/display/DisplayDoc.vue
View File

@ -1,7 +1,5 @@
<template>
<div class="content-section documentation">
<TabView>
<TabPanel header="Documentation">
<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>
@ -40,39 +38,88 @@
<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>
&lt;div class="card"&gt;
&lt;h5&gt;Inline&lt;/h5&gt;
&lt;InputText class="p-mr-2 p-d-inline" /&gt;
&lt;InputText class="p-d-inline" /&gt;
&lt;h5&gt;Block&lt;/h5&gt;
&lt;InputText class="p-mb-2 p-d-block" /&gt;
&lt;InputText class="p-d-block" /&gt;
&lt;h5&gt;Visible on a Small Screen&lt;/h5&gt;
&lt;p&gt;Resize to view.&lt;/p&gt;
&lt;Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" /&gt;
&lt;h5&gt;Hidden on a Small Screen&lt;/h5&gt;
&lt;p&gt;Resize to hide.&lt;/p&gt;
&lt;Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" /&gt;
&lt;h5&gt;Visible to Print, Invisible for Screen&lt;/h5&gt;
&lt;p class="p-d-none p-print-block"&gt;Only visible when printed.&lt;/p&gt;
&lt;h5&gt;Visible to Screen, Invisible for Print&lt;/h5&gt;
&lt;p class="p-d-block p-print-none"&gt;Not available for printing.&lt;/p&gt;
&lt;/div&gt;
</AppDoc>
</template>
</code></pre>
</TabPanel>
</TabView>
<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>