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

AppDoc added

pull/1143/head
Tuğçe Küçükoğlu 2021-03-23 15:38:05 +03:00
parent 424f548389
commit 20bf1fde46
4 changed files with 1369 additions and 715 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/views/elevation/ElevationDoc.vue
View File

@ -1,38 +1,97 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="ElevationDemo" :sources="sources">
<TabView> <h5>Getting Started</h5>
<TabPanel header="Documentation"> <p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
<h5>Getting Started</h5>
<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-shadow-1" /&gt; &lt;div class="p-shadow-1" /&gt;
</code></pre> </code></pre>
<h5>Levels</h5> <h5>Levels</h5>
<p>There are 24 depths available varying from 1 to 24.</p> <p>There are 24 depths available varying from 1 to 24.</p>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-shadow-1" /&gt; &lt;div class="p-shadow-1" /&gt;
&lt;div class="p-shadow-24" /&gt; &lt;div class="p-shadow-24" /&gt;
</code></pre> </code></pre>
</TabPanel> </AppDoc>
</template>
<TabPanel header="Source"> <script>
<a href="https://github.com/primefaces/primevue/tree/master/src/views/elevation" class="btn-viewsource" target="_blank" rel="noopener noreferrer"> export default {
<span>View on GitHub</span> data() {
</a> return {
<pre v-code><code><template v-pre> sources: {
&lt;div class="p-grid"&gt; 'options-api': {
&lt;div class="p-col" v-for="index in 24" :key="index"&gt; tabName: 'Source',
&lt;div :class="['box', 'p-shadow-' + index]"&gt; content: `
p-shadow-{{index}} <template>
&lt;/div&gt; <div>
&lt;/div&gt; <div class="p-grid">
&lt;/div&gt; <div class="p-col" v-for="index in 24" :key="index">
<div :class="['box', 'p-shadow-' + index]">
p-shadow-{{index}}
</div>
</div>
</div>
</div>
</template> </template>
</code></pre>
</TabPanel> <script>
</TabView> export default {
</div> }
<\\/script>
<style lang="scss" scoped>
.box {
min-height: 100px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 2rem;
border-radius: 4px;
}
</style>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="p-grid">
<div class="p-col" v-for="index in 24" :key="index">
<div :class="['box', 'p-shadow-' + index]">
p-shadow-{{index}}
</div>
</div>
</div>
</div>
</template> </template>
<script>
export default {
}
<\\/script>
<style lang="scss" scoped>
.box {
min-height: 100px;
min-width: 150px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin: 2rem;
border-radius: 4px;
}
</style>
`
}
}
}
}
}
</script>

1453
src/views/grid/GridDoc.vue
View File

File diff suppressed because it is too large Load Diff

324
src/views/spacing/SpacingDoc.vue
View File

@ -1,54 +1,52 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="SpacingDemo" :sources="sources">
<TabView> <h5>Getting Started</h5>
<TabPanel header="Documentation"> <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
<h5>Getting Started</h5> values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
<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>Property</h5> <h5>Property</h5>
<p>Property can either be a margin or a padding.</p> <p>Property can either be a margin or a padding.</p>
<ul> <ul>
<li><b>m</b>: margin</li> <li><b>m</b>: margin</li>
<li><b>p</b>: padding</li> <li><b>p</b>: padding</li>
</ul> </ul>
<h5>Position</h5> <h5>Position</h5>
<p>Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.</p> <p>Position are available for the individual sides, the x-y axis or blank for the shortand of all sides.</p>
<ul> <ul>
<li><b>t</b>: top</li> <li><b>t</b>: top</li>
<li><b>b</b>: bottom</li> <li><b>b</b>: bottom</li>
<li><b>l</b>: left</li> <li><b>l</b>: left</li>
<li><b>r</b>: right</li> <li><b>r</b>: right</li>
<li><b>x</b>: left and right</li> <li><b>x</b>: left and right</li>
<li><b>y</b>: top and bottom</li> <li><b>y</b>: top and bottom</li>
<li><b>blank</b>: all sides</li> <li><b>blank</b>: all sides</li>
</ul> </ul>
<h5>Value</h5> <h5>Value</h5>
<p>Value field varies from 0 to 6 where default value of the <i>$spacer</i> is 1rem. The special <i>auto</i> value is available to margins only and used to center elements.</p> <p>Value field varies from 0 to 6 where default value of the <i>$spacer</i> is 1rem. The special <i>auto</i> value is available to margins only and used to center elements.</p>
<ul> <ul>
<li><b>0</b>: $spacer * 0</li> <li><b>0</b>: $spacer * 0</li>
<li><b>1</b>: $spacer * .25</li> <li><b>1</b>: $spacer * .25</li>
<li><b>2</b>: $spacer * .5</li> <li><b>2</b>: $spacer * .5</li>
<li><b>3</b>: $spacer * 1</li> <li><b>3</b>: $spacer * 1</li>
<li><b>4</b>: $spacer * 1.5</li> <li><b>4</b>: $spacer * 1.5</li>
<li><b>5</b>: $spacer * 2</li> <li><b>5</b>: $spacer * 2</li>
<li><b>6</b>: $spacer * 3</li> <li><b>6</b>: $spacer * 3</li>
<li><b>auto</b>: auto margin</li> <li><b>auto</b>: auto margin</li>
</ul> </ul>
<h5>Breakpoint</h5> <h5>Breakpoint</h5>
<p>Breakpoints define how the spacing should be defined depending on the screen size. Design is mobile first so smaller values <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> 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>
<li><b>lg</b>: large screens e.g. notebooks</li> <li><b>lg</b>: large screens e.g. notebooks</li>
<li><b>xl</b>: larger screens .e.g monitors</li> <li><b>xl</b>: larger screens .e.g monitors</li>
</ul> </ul>
<h5>Examples</h5> <h5>Examples</h5>
<pre v-code><code> <pre v-code><code>
&lt;div class="p-mb-2"&gt;Margin bottom with level 2&lt;/div&gt; &lt;div class="p-mb-2"&gt;Margin bottom with level 2&lt;/div&gt;
&lt;div class="p-mt-4"&gt;Margin top with level 2&lt;/div&gt; &lt;div class="p-mt-4"&gt;Margin top with level 2&lt;/div&gt;
@ -60,78 +58,168 @@
</code></pre> </code></pre>
<h5>Customization</h5> <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> <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> </AppDoc>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/spacing" 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;Margin&lt;/h5&gt;
&lt;h6&gt;Without Spacing&lt;/h6&gt;
&lt;Button type="button" label="Button 1" style="width:20rem" /&gt;
&lt;Button type="button" label="Button 2" style="width:20rem" /&gt;
&lt;h6&gt;With Spacing&lt;/h6&gt;
&lt;Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" /&gt;
&lt;Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/&gt;
&lt;h5&gt;Responsive Margin&lt;/h5&gt;
&lt;h6&gt;Without Spacing&lt;/h6&gt;
&lt;div class="p-grid p-formgrid p-fluid"&gt;
&lt;div class="p-col-12 p-lg-4"&gt;
&lt;InputText /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-lg-4"&gt;
&lt;InputText /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-lg-4"&gt;
&lt;InputText /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h6&gt;With Spacing&lt;/h6&gt;
&lt;div class="p-grid p-formgrid p-fluid"&gt;
&lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
&lt;InputText /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
&lt;InputText /&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0"&gt;
&lt;InputText /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;h6&gt;Center&lt;/h6&gt;
&lt;div class="demo-container p-p-4"&gt;
&lt;Button type="button" label="Button" class="p-d-block p-mx-auto" /&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Padding&lt;/h5&gt;
&lt;h6&gt;Without Spacing&lt;/h6&gt;
&lt;div class="demo-container"&gt;
&lt;Button type="button" label="Button" /&gt;
&lt;/div&gt;
&lt;h6&gt;With Spacing&lt;/h6&gt;
&lt;div class="demo-container p-p-3"&gt;
&lt;Button type="button" label="Button" /&gt;
&lt;/div&gt;
&lt;h6&gt;Responsive Spacing&lt;/h6&gt;
&lt;div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3"&gt;
&lt;Button type="button" label="Button" /&gt;
&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</code></pre>
</TabPanel> <script>
</TabView> export default {
</div> data() {
return {
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<div class="card">
<h5>Margin</h5>
<h6>Without Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" />
<Button type="button" label="Button 2" style="width:20rem" />
<h6>With Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
<Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
<h5>Responsive Margin</h5>
<h6>Without Spacing</h6>
<div class="p-grid p-formgrid p-fluid">
<div class="p-col-12 p-lg-4">
<InputText />
</div>
<div class="p-col-12 p-lg-4">
<InputText />
</div>
<div class="p-col-12 p-lg-4">
<InputText />
</div>
</div>
<h6>With Spacing</h6>
<div class="p-grid p-formgrid p-fluid">
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
<InputText />
</div>
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
<InputText />
</div>
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
<InputText />
</div>
</div>
<h6>Center</h6>
<div class="demo-container p-p-4">
<Button type="button" label="Button" class="p-d-block p-mx-auto" />
</div>
</div>
<div class="card">
<h5>Padding</h5>
<h6>Without Spacing</h6>
<div class="demo-container">
<Button type="button" label="Button" />
</div>
<h6>With Spacing</h6>
<div class="demo-container p-p-3">
<Button type="button" label="Button" />
</div>
<h6>Responsive Spacing</h6>
<div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
<Button type="button" label="Button" />
</div>
</div>
</div>
</template> </template>
<script>
export default {
}
<\\/script>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<div class="card">
<h5>Margin</h5>
<h6>Without Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" />
<Button type="button" label="Button 2" style="width:20rem" />
<h6>With Spacing</h6>
<Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
<Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
<h5>Responsive Margin</h5>
<h6>Without Spacing</h6>
<div class="p-grid p-formgrid p-fluid">
<div class="p-col-12 p-lg-4">
<InputText />
</div>
<div class="p-col-12 p-lg-4">
<InputText />
</div>
<div class="p-col-12 p-lg-4">
<InputText />
</div>
</div>
<h6>With Spacing</h6>
<div class="p-grid p-formgrid p-fluid">
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
<InputText />
</div>
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
<InputText />
</div>
<div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
<InputText />
</div>
</div>
<h6>Center</h6>
<div class="demo-container p-p-4">
<Button type="button" label="Button" class="p-d-block p-mx-auto" />
</div>
</div>
<div class="card">
<h5>Padding</h5>
<h6>Without Spacing</h6>
<div class="demo-container">
<Button type="button" label="Button" />
</div>
<h6>With Spacing</h6>
<div class="demo-container p-p-3">
<Button type="button" label="Button" />
</div>
<h6>Responsive Spacing</h6>
<div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
<Button type="button" label="Button" />
</div>
</div>
</div>
</template>
<script>
export default {
}
<\\/script>
`
}
}
}
}
}
</script>

192
src/views/text/TextDoc.vue
View File

@ -1,18 +1,16 @@
<template> <template>
<div class="content-section documentation"> <AppDoc name="TextDemo" :sources="sources">
<TabView> <h5>Getting Started</h5>
<TabPanel header="Documentation"> <p>The text classes use the <i>p-text-{value}</i> syntax.</p>
<h5>Getting Started</h5>
<p>The text classes use the <i>p-text-{value}</i> syntax.</p>
<h5>Alignment</h5> <h5>Alignment</h5>
<p>Four options are available for alignment.</p> <p>Four options are available for alignment.</p>
<ul> <ul>
<li>left</li> <li>left</li>
<li>center</li> <li>center</li>
<li>right</li> <li>right</li>
<li>justify</li> <li>justify</li>
</ul> </ul>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;div class="p-text-left"&gt;Left&lt;/div&gt; &lt;div class="p-text-left"&gt;Left&lt;/div&gt;
&lt;div class="p-text-center"&gt;Center&lt;/div&gt; &lt;div class="p-text-center"&gt;Center&lt;/div&gt;
@ -21,13 +19,13 @@
</template> </template>
</code></pre> </code></pre>
<h5>Wrap</h5> <h5>Wrap</h5>
<p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p> <p>Text wrapping defines how the text would be displayed when it exceeds the size of its container.</p>
<ul> <ul>
<li>nowrap</li> <li>nowrap</li>
<li>wrap</li> <li>wrap</li>
<li>truncate</li> <li>truncate</li>
</ul> </ul>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt; &lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
&lt;div class="p-text-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt; &lt;div class="p-text-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
@ -35,13 +33,13 @@
</template> </template>
</code></pre> </code></pre>
<h5>Transform</h5> <h5>Transform</h5>
<p>Transform property changes the case of the text.</p> <p>Transform property changes the case of the text.</p>
<ul> <ul>
<li>lowercase</li> <li>lowercase</li>
<li>uppercase</li> <li>uppercase</li>
<li>capitalize</li> <li>capitalize</li>
</ul> </ul>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;div class="p-text-lowercase"&gt;LOWERCASE&lt;/div&gt; &lt;div class="p-text-lowercase"&gt;LOWERCASE&lt;/div&gt;
&lt;div class="p-text-uppercase"&gt;uppercase&lt;/div&gt; &lt;div class="p-text-uppercase"&gt;uppercase&lt;/div&gt;
@ -49,14 +47,14 @@
</template> </template>
</code></pre> </code></pre>
<h5>Style</h5> <h5>Style</h5>
<p>Text styling applies to font weight and style.</p> <p>Text styling applies to font weight and style.</p>
<ul> <ul>
<li>bold</li> <li>bold</li>
<li>normal</li> <li>normal</li>
<li>light</li> <li>light</li>
<li>italic</li> <li>italic</li>
</ul> </ul>
<pre v-code><code><template v-pre> <pre v-code><code><template v-pre>
&lt;div class="p-text-bold"&gt;Bold&lt;/div&gt; &lt;div class="p-text-bold"&gt;Bold&lt;/div&gt;
&lt;div class="p-text-normal"&gt;Normal&lt;/div&gt; &lt;div class="p-text-normal"&gt;Normal&lt;/div&gt;
@ -64,38 +62,96 @@
&lt;div class="p-text-italic"&gt;Italic&lt;/div&gt; &lt;div class="p-text-italic"&gt;Italic&lt;/div&gt;
</template> </template>
</code></pre> </code></pre>
</TabPanel> </AppDoc>
<TabPanel header="Source">
<a href="https://github.com/primefaces/primevue/tree/master/src/views/text" 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;Alignment&lt;/h5&gt;
&lt;div class="p-mb-3 p-text-left"&gt;Left&lt;/div&gt;
&lt;div class="p-mb-3 p-text-center"&gt;Center&lt;/div&gt;
&lt;div class="p-text-right"&gt;Right&lt;/div&gt;
&lt;h5&gt;Wrap&lt;/h5&gt;
&lt;div class="p-mb-3 demo-container" style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
&lt;div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
&lt;div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
&lt;h5&gt;Transform&lt;/h5&gt;
&lt;div class="p-mb-3 p-text-lowercase"&gt;LOWERCASE&lt;/div&gt;
&lt;div class="p-mb-3 p-text-uppercase"&gt;uppercase&lt;/div&gt;
&lt;div class="p-text-capitalize"&gt;capitalize&lt;/div&gt;
&lt;h5&gt;Style&lt;/h5&gt;
&lt;div class="p-mb-3 p-text-bold"&gt;Bold&lt;/div&gt;
&lt;div class="p-mb-3 p-text-normal"&gt;Normal&lt;/div&gt;
&lt;div class="p-mb-3 p-text-light"&gt;Light&lt;/div&gt;
&lt;div class="p-mb-3 p-text-italic"&gt;Italic&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</code></pre>
</TabPanel> <script>
</TabView> export default {
</div> data() {
return {
sources: {
'options-api': {
tabName: 'Source',
content: `
<template>
<div>
<h5>Alignment</h5>
<div class="p-mb-3 p-text-left">Left</div>
<div class="p-mb-3 p-text-center">Center</div>
<div class="p-text-right">Right</div>
<h5>Wrap</h5>
<div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
<div class="p-mb-3 p-text-uppercase">uppercase</div>
<div class="p-text-capitalize">capitalize</div>
<h5>Style</h5>
<div class="p-mb-3 p-text-bold">Bold</div>
<div class="p-mb-3 p-text-normal">Normal</div>
<div class="p-mb-3 p-text-light">Light</div>
<div class="p-mb-3 p-text-italic">Italic</div>
</div>
</template> </template>
<script>
export default {
}
<\\/script>
<style scoped>
.demo-container {
border: 2px solid var(--surface-d);
}
</style>
`
},
'composition-api': {
tabName: 'Composition API',
content: `
<template>
<div>
<h5>Alignment</h5>
<div class="p-mb-3 p-text-left">Left</div>
<div class="p-mb-3 p-text-center">Center</div>
<div class="p-text-right">Right</div>
<h5>Wrap</h5>
<div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
<div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
<h5>Transform</h5>
<div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
<div class="p-mb-3 p-text-uppercase">uppercase</div>
<div class="p-text-capitalize">capitalize</div>
<h5>Style</h5>
<div class="p-mb-3 p-text-bold">Bold</div>
<div class="p-mb-3 p-text-normal">Normal</div>
<div class="p-mb-3 p-text-light">Light</div>
<div class="p-mb-3 p-text-italic">Italic</div>
</div>
</template>
<script>
export default {
}
<\\/script>
<style scoped>
.demo-container {
border: 2px solid var(--surface-d);
}
</style>
`
}
}
}
}
}
</script>