Update Grid system demo
cagataycivici
parent
5eaf167997
commit
691fda26fc
|
|
@ -16,7 +16,7 @@
|
||||||
<router-link to="/elevation">Elevation</router-link>
|
<router-link to="/elevation">Elevation</router-link>
|
||||||
<router-link to="/flexbox">FlexBox</router-link>
|
<router-link to="/flexbox">FlexBox</router-link>
|
||||||
<router-link to="/formlayout">FormLayout</router-link>
|
<router-link to="/formlayout">FormLayout</router-link>
|
||||||
<router-link to="/flexgrid">Grid System</router-link>
|
<router-link to="/grid">Grid System</router-link>
|
||||||
<router-link to="/spacing">Spacing</router-link>
|
<router-link to="/spacing">Spacing</router-link>
|
||||||
<router-link to="/text">Text</router-link>
|
<router-link to="/text">Text</router-link>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -317,9 +317,9 @@ export default new Router({
|
||||||
component: () => import('./views/fileupload/FileUploadDemo.vue')
|
component: () => import('./views/fileupload/FileUploadDemo.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/flexgrid',
|
path: '/grid',
|
||||||
name: 'flexgrid',
|
name: 'grid',
|
||||||
component: () => import('./views/flexgrid/FlexGridDemo.vue')
|
component: () => import('./views/grid/GridDemo.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/formlayout',
|
path: '/formlayout',
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="content-section implementation flexgrid-demo">
|
<div class="content-section implementation flexgrid-demo">
|
||||||
<h1>FlexGrid</h1>
|
<h1>Grid System</h1>
|
||||||
<p>Flex Grid CSS is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.
|
<p>Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.</p>
|
||||||
Flex Grid CSS is not included in PrimeVue as it is provided by <a href="https://github.com/primefaces/primeflex">PrimeFlex</a>, a shared grid library between PrimeFaces, PrimeNG, PrimeReact and PrimeVue projects.</p>
|
|
||||||
|
|
||||||
<h5>Basic</h5>
|
<h5>Basic</h5>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
|
|
@ -348,80 +347,38 @@
|
||||||
<h5>Panels</h5>
|
<h5>Panels</h5>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Header">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Header">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Header">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Sample Layout</h5>
|
|
||||||
<div class="p-grid sample-layout">
|
|
||||||
<div class="p-col-12 p-md-2">
|
|
||||||
Menu
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-10 p-col-nogutter">
|
|
||||||
<div class="p-col-12 p-col-nogutter">
|
|
||||||
Top Bar
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12">
|
|
||||||
<div class="p-grid">
|
|
||||||
<div class="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
|
|
||||||
dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
|
|
||||||
In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div>
|
|
||||||
<div class="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
|
|
||||||
tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
|
|
||||||
at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
|
|
||||||
nulla nec, rutrum sapien.</div>
|
|
||||||
<div class="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
|
|
||||||
sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
|
|
||||||
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
|
|
||||||
condimentum eget hendrerit sit amet.</div>
|
|
||||||
|
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
|
||||||
|
|
||||||
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
|
||||||
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
|
||||||
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
|
|
||||||
<div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
|
|
||||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
|
|
||||||
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12">
|
|
||||||
Footer
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FlexGridDoc/>
|
<GridDoc/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import FlexGridDoc from './FlexGridDoc';
|
import GridDoc from './GridDoc';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -438,15 +395,14 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
'FlexGridDoc': FlexGridDoc
|
'GridDoc': GridDoc
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.flexgrid-demo {
|
.flexgrid-demo {
|
||||||
.box,
|
.box {
|
||||||
.sample-layout > div {
|
|
||||||
background-color: var(--surface-e);
|
background-color: var(--surface-e);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
|
|
@ -459,14 +415,6 @@ export default {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sample-layout {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-layout > div {
|
|
||||||
border: 1px solid var(--surface-d);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-container {
|
.vertical-container {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
|
@ -489,5 +437,9 @@ export default {
|
||||||
.dynamic-box-enter, .dynamic-box-leave-to {
|
.dynamic-box-enter, .dynamic-box-leave-to {
|
||||||
transform: translateX(30px);
|
transform: translateX(30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -950,72 +950,30 @@ import 'primeflex/primeflex.css';
|
||||||
<h3>Panels</h3>
|
<h3>Panels</h3>
|
||||||
<div class="p-grid">
|
<div class="p-grid">
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Header">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Header">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-col">
|
<div class="p-col">
|
||||||
<Panel header="Godfather">
|
<Panel header="Header">
|
||||||
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||||
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
|
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
</Panel>
|
</Panel>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Sample Layout</h3>
|
|
||||||
<div class="p-grid sample-layout">
|
|
||||||
<div class="p-col-12 p-md-2">
|
|
||||||
Menu
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12 p-md-10 p-col-nogutter">
|
|
||||||
<div class="p-col-12 p-col-nogutter">
|
|
||||||
Top Bar
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12">
|
|
||||||
<div class="p-grid">
|
|
||||||
<div class="p-col-12 p-md-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed imperdiet, orci nec
|
|
||||||
dictum convallis, ligula mauris vestibulum turpis, nec varius tortor quam at diam. Nullam a viverra nibh.
|
|
||||||
In tincidunt tempor lectus quis vulputate. Pellentesque nec dui aliquam, lobortis est in, lobortis ante</div>
|
|
||||||
<div class="p-col-12 p-md-4">Maecenas vel nisi aliquet, vulputate tortor id, laoreet massa. Maecenas mattis
|
|
||||||
tristique bibendum. Suspendisse vel mi dictum, vestibulum lacus quis, pulvinar quam. Proin vulputate, nibh
|
|
||||||
at finibus varius, leo eros lacinia elit, nec blandit odio tellus a justo. Donec nec ex auctor, tristique
|
|
||||||
nulla nec, rutrum sapien.</div>
|
|
||||||
<div class="p-col-12 p-md-4">Proin efficitur in leo eget ornare. Nam vestibulum neque sed velit sagittis
|
|
||||||
sodales. Sed scelerisque hendrerit magna a hendrerit. Cras tempor sem at justo pharetra convallis.
|
|
||||||
Curabitur vel sodales purus. Vestibulum interdum facilisis nulla imperdiet suscipit. Quisque lectus felis,
|
|
||||||
condimentum eget hendrerit sit amet.</div>
|
|
||||||
|
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /></div>
|
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /></div>
|
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /></div>
|
|
||||||
<div class="p-col-6 p-md-3"><img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /></div>
|
|
||||||
|
|
||||||
<div class="p-col-12 p-md-6">Phasellus faucibus purus volutpat mauris lacinia sodales. Ut sit amet sapien
|
|
||||||
facilisis, commodo dui non, fringilla tellus. Quisque tempus facilisis nisi sodales finibus. Pellentesque
|
|
||||||
neque orci, ullamcorper vitae ligula quis, dignissim euismod augue.</div>
|
|
||||||
<div class="p-col-12 p-md-6">Fusce ullamcorper congue massa, eget ullamcorper nunc lobortis egestas. Lorem
|
|
||||||
ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices dui eget dolor feugiat dapibus. Aliquam
|
|
||||||
pretium leo et egestas luctus. Nunc facilisis gravida tellus.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-col-12">
|
|
||||||
Footer
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
|
|
@ -1039,31 +997,23 @@ export default {
|
||||||
|
|
||||||
<CodeHighlight lang="css">
|
<CodeHighlight lang="css">
|
||||||
.flexgrid-demo {
|
.flexgrid-demo {
|
||||||
.box,
|
.box {
|
||||||
.sample-layout > div {
|
background-color: var(--surface-e);
|
||||||
background-color: #f1f1f1;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
padding-bottom: 1rem;
|
padding-bottom: 1rem;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-stretched {
|
.box-stretched {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sample-layout {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sample-layout > div {
|
|
||||||
border: 1px solid #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-container {
|
.vertical-container {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
background: #c0c0c0;
|
background: var(--surface-d);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1082,6 +1032,10 @@ export default {
|
||||||
.dynamic-box-enter, .dynamic-box-leave-to {
|
.dynamic-box-enter, .dynamic-box-leave-to {
|
||||||
transform: translateX(30px);
|
transform: translateX(30px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
Loading…
Reference in New Issue