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;
}
} }
} }
} }

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

@ -8,56 +8,64 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<div class="p-grid"> <div class="card">
<div class="p-col-12 p-md-6"> <h5>Margin</h5>
<div class="card"> <h6>Without Spacing</h6>
<h5>Use Case 1</h5> <Button type="button" label="Button 1" style="width:20rem" />
<p>Spacing is a handy utility when elements wrap when screen size get smaller. In example below, when buttons wrap <Button type="button" label="Button 2" style="width:20rem" />
they are displayed on top of each other whereas with spacing this issue can easily be resolved.
</p>
<h6>Without Spacing</h6> <h6>With Spacing</h6>
<Button type="button" label="Button 1" style="width:250px" /> <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" /> <Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
<h6>With Spacing</h6> <h5>Responsive Margin</h5>
<Button type="button" label="Button 1" style="width:250px" class="p-mr-2 p-mb-2" /> <h6>Without Spacing</h6>
<Button type="button" label="Button 2" style="width:250px" class="p-mr-2"/> <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>
</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>
<h6>Without Spacing</h6> <h6>With 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-mb-2 p-lg-4 p-mb-lg-0">
<InputText /> <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>
</div> </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> </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>