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

Update spacing demo

pull/345/head
cagataycivici 2020-06-17 22:38:02 +03:00
parent 878348cdee
commit 53c78c054b
2 changed files with 46 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,11 +23,10 @@
}
a {
background-color: var(--primary-color-text);
color: var(--primary-color);
border-radius: 3px;
padding: 2px 4px;
text-decoration: none;
color: $linkColor;
font-weight: 600;
&:hover {
text-decoration: underline;
}
@ -141,7 +140,7 @@
a {
text-decoration: none;
color: $linkColor;
font-weight: 500;
font-weight: 600;
&:hover {
text-decoration: underline;

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

@ -10,48 +10,52 @@
<div class="content-section implementation">
<div class="p-grid">
<div class="p-col-12 p-md-6">
<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>
<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>
<h6>Without Spacing</h6>
<Button type="button" label="Button 1" style="width:250px" />
<Button type="button" label="Button 2" style="width:250px" />
<h6>Without Spacing</h6>
<Button type="button" label="Button 1" style="width:250px" />
<Button type="button" label="Button 2" style="width:250px" />
<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"/>
<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">
<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>
<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>
<div class="p-grid p-formgrid p-fluid">
<div class="p-col-12 p-lg-4">
<InputText />
<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>
<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 />
<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>
@ -73,7 +77,7 @@ export default {
</script>
<style scoped>
p {
line-height: 1.5;
.card {
min-height: 100%;
}
</style>