Update spacing doc
cagataycivici
parent
792ed203db
commit
e9bdabef9f
|
|
@ -153,6 +153,10 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,30 +8,17 @@
|
|||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-6">
|
||||
<div class="card">
|
||||
<h5>Use Case 1</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>
|
||||
|
||||
<h5>Margin</h5>
|
||||
<h6>Without Spacing</h6>
|
||||
<Button type="button" label="Button 1" style="width:250px" />
|
||||
<Button type="button" label="Button 2" style="width:250px" />
|
||||
<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:250px" class="p-mr-2 p-mb-2" />
|
||||
<Button type="button" label="Button 2" style="width:250px" class="p-mr-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>
|
||||
<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">
|
||||
|
|
@ -57,8 +44,29 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -77,7 +85,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
min-height: 100%;
|
||||
}
|
||||
.demo-container {
|
||||
border: 1px solid var(--surface-d);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -3,16 +3,18 @@
|
|||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h5>Getting Started</h5>
|
||||
<p>The classes modify the margins and use the <i>p-m{position}-{value}</i> syntax whereas for responsive
|
||||
values <i>p-m{position}-{breakpoint}-{value}</i> format is used.</p>
|
||||
<CodeHighlight>
|
||||
<div class="p-mb-2"></i>
|
||||
<div class="p-mt-4"></i>
|
||||
<div class="p-m-1 p-m-lg-2"></i>
|
||||
</CodeHighlight>
|
||||
<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>
|
||||
<p>Property can either be a margin or a padding.</p>
|
||||
<ul>
|
||||
<li><b>m</b>: margin</li>
|
||||
<li><b>p</b>: padding</li>
|
||||
</ul>
|
||||
|
||||
<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>
|
||||
<li><b>t</b>: top</li>
|
||||
<li><b>b</b>: bottom</li>
|
||||
|
|
@ -24,7 +26,7 @@
|
|||
</ul>
|
||||
|
||||
<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>
|
||||
<li><b>0</b>: $spacer * 0</li>
|
||||
<li><b>1</b>: $spacer * .25</li>
|
||||
|
|
@ -45,6 +47,17 @@
|
|||
<li><b>xl</b>: larger screens .e.g monitors</li>
|
||||
</ul>
|
||||
|
||||
<h5>Examples</h5>
|
||||
<CodeHighlight>
|
||||
<div class="p-mb-2">Margin bottom with level 2</i>
|
||||
<div class="p-mt-4">Margin top with level 2</i>
|
||||
<div class="p-m-2">Margin for all sides with level 2</i>
|
||||
<div class="p-mx-auto">Auto margins for left and right side</i>
|
||||
<div class="p-pb-4">Padding bottom with level 4</i>
|
||||
<div class="p-p-1">Padding for all sides with level 1</i>
|
||||
<div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3">Level 3 spacing for lg screens and level 1 for smaller screens (xs).</i>
|
||||
</CodeHighlight>
|
||||
|
||||
<h5>Dependencies</h5>
|
||||
<p>PrimeFlex.</p>
|
||||
</TabPanel>
|
||||
|
|
@ -55,7 +68,65 @@
|
|||
</a>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
</TabPanel>
|
||||
|
|
|
|||
Loading…
Reference in New Issue