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

Update spacing doc

pull/358/head
cagataycivici 2020-07-02 13:42:58 +03:00
parent 792ed203db
commit e9bdabef9f
3 changed files with 139 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/styles/app/_content.scss
View File

@ -153,6 +153,10 @@
text-decoration: underline; text-decoration: underline;
} }
} }
li {
line-height: 1.5;
}
} }
} }
} }

52
src/views/spacing/SpacingDemo.vue
View File

@ -8,30 +8,17 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="p-grid">
<div class="p-col-12 p-md-6">
<div class="card"> <div class="card">
<h5>Use Case 1</h5> <h5>Margin</h5>
<p>Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap
they are displayed on top of each other whereas with spacing this issue can easily be resolved.
</p>
<h6>Without Spacing</h6> <h6>Without Spacing</h6>
<Button type="button" label="Button 1" style="width:250px" /> <Button type="button" label="Button 1" style="width:20rem" />
<Button type="button" label="Button 2" style="width:250px" /> <Button type="button" label="Button 2" style="width:20rem" />
<h6>With Spacing</h6> <h6>With Spacing</h6>
<Button type="button" label="Button 1" style="width:250px" class="p-mr-2 p-mb-2" /> <Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
<Button type="button" label="Button 2" style="width:250px" class="p-mr-2"/> <Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
</div>
</div>
<div class="p-col-12 p-md-6">
<div class="card">
<h5>Use Case 2</h5>
<p>Spacing utilities also work seamlessly with responsive PrimeFlex grid utilty. Example below demonstrates a case where on a smaller screen inputs receive a margin to position themselves
separately in stacked mode, reduce the dimension of the window to view the difference.
</p>
<h5>Responsive Margin</h5>
<h6>Without Spacing</h6> <h6>Without Spacing</h6>
<div class="p-grid p-formgrid p-fluid"> <div class="p-grid p-formgrid p-fluid">
<div class="p-col-12 p-lg-4"> <div class="p-col-12 p-lg-4">
@ -57,8 +44,29 @@
<InputText /> <InputText />
</div> </div>
</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> </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>
</div> </div>
@ -77,7 +85,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
.card { .demo-container {
min-height: 100%; border: 1px solid var(--surface-d);
} }
</style> </style>

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

@ -3,16 +3,18 @@
<TabView> <TabView>
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h5>Getting Started</h5> <h5>Getting Started</h5>
<p>The classes modify the margins and use the <i>p-m{position}-{value}</i> syntax whereas for responsive <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
values <i>p-m{position}-{breakpoint}-{value}</i> format is used.</p> values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
<CodeHighlight>
&lt;div class="p-mb-2"&gt;&lt;/i&gt; <h5>Property</h5>
&lt;div class="p-mt-4"&gt;&lt;/i&gt; <p>Property can either be a margin or a padding.</p>
&lt;div class="p-m-1 p-m-lg-2"&gt;&lt;/i&gt; <ul>
</CodeHighlight> <li><b>m</b>: margin</li>
<li><b>p</b>: padding</li>
</ul>
<h5>Position</h5> <h5>Position</h5>
<p>Position can either be either of the 4 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>
@ -24,7 +26,7 @@
</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 auto value is used to center elements using auto margins.</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>
@ -45,6 +47,17 @@
<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>
<CodeHighlight>
&lt;div class="p-mb-2"&gt;Margin bottom with level 2&lt;/i&gt;
&lt;div class="p-mt-4"&gt;Margin top with level 2&lt;/i&gt;
&lt;div class="p-m-2"&gt;Margin for all sides with level 2&lt;/i&gt;
&lt;div class="p-mx-auto"&gt;Auto margins for left and right side&lt;/i&gt;
&lt;div class="p-pb-4"&gt;Padding bottom with level 4&lt;/i&gt;
&lt;div class="p-p-1"&gt;Padding for all sides with level 1&lt;/i&gt;
&lt;div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3"&gt;Level 3 spacing for lg screens and level 1 for smaller screens (xs).&lt;/i&gt;
</CodeHighlight>
<h5>Dependencies</h5> <h5>Dependencies</h5>
<p>PrimeFlex.</p> <p>PrimeFlex.</p>
</TabPanel> </TabPanel>
@ -55,7 +68,65 @@
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <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;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>
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>