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

Update Grid system demo

pull/358/head
cagataycivici 2020-07-02 14:43:02 +03:00
parent 5eaf167997
commit 691fda26fc
4 changed files with 76 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/AppMenu.vue
View File

@ -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>

6
src/router.js
View File

@ -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',

98
src/views/flexgrid/FlexGridDemo.vue → src/views/grid/GridDemo.vue
View File

@ -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>

140
src/views/flexgrid/FlexGridDoc.vue → src/views/grid/GridDoc.vue
View File

@ -950,72 +950,30 @@ import 'primeflex/primeflex.css';
&lt;h3&gt;Panels&lt;/h3&gt; &lt;h3&gt;Panels&lt;/h3&gt;
&lt;div class="p-grid"&gt; &lt;div class="p-grid"&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;Panel header="Godfather"&gt; &lt;Panel header="Header"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. &lt;p&gt;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.&lt;/p&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;Panel header="Godfather"&gt; &lt;Panel header="Header"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. &lt;p&gt;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.&lt;/p&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-col"&gt; &lt;div class="p-col"&gt;
&lt;Panel header="Godfather"&gt; &lt;Panel header="Header"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. &lt;p&gt;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.&lt;/p&gt;
&lt;/Panel&gt; &lt;/Panel&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h3&gt;Sample Layout&lt;/h3&gt;
&lt;div class="p-grid sample-layout"&gt;
&lt;div class="p-col-12 p-md-2"&gt;
Menu
&lt;/div&gt;
&lt;div class="p-col-12 p-md-10 p-col-nogutter"&gt;
&lt;div class="p-col-12 p-col-nogutter"&gt;
Top Bar
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-4"&gt;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&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;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.&lt;/div&gt;
&lt;div class="p-col-12 p-md-4"&gt;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.&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 1" src="demo/images/nature/nature1.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 2" src="demo/images/nature/nature2.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 3" src="demo/images/nature/nature3.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-6 p-md-3"&gt;&lt;img alt="Galleria 4" src="demo/images/nature/nature4.jpg" style="width: 100%" /&gt;&lt;/div&gt;
&lt;div class="p-col-12 p-md-6"&gt;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.&lt;/div&gt;
&lt;div class="p-col-12 p-md-6"&gt;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.&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12"&gt;
Footer
&lt;/div&gt;
&lt;/div&gt;
</template> </template>
</CodeHighlight> </CodeHighlight>
@ -1039,49 +997,45 @@ 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 { .vertical-container {
margin: 0; margin: 0;
} height: 200px;
background: var(--surface-d);
border-radius: 4px;
}
.sample-layout > div { .nested-grid .p-col-4 {
border: 1px solid #ffffff; padding-bottom: 1rem;
} }
.vertical-container { .dynamic-box-enter-active, .dynamic-box-leave-active {
margin: 0; transition: all .5s;
height: 200px; }
background: #c0c0c0;
border-radius: 4px;
}
.nested-grid .p-col-4 { .dynamic-box-enter, .dynamic-box-leave-to {
padding-bottom: 1rem; opacity: 0;
} }
.dynamic-box-enter-active, .dynamic-box-leave-active { .dynamic-box-enter, .dynamic-box-leave-to {
transition: all .5s; transform: translateX(30px);
} }
.dynamic-box-enter, .dynamic-box-leave-to { p {
opacity: 0; margin: 0;
} }
.dynamic-box-enter, .dynamic-box-leave-to {
transform: translateX(30px);
}
} }
</CodeHighlight> </CodeHighlight>
</TabPanel> </TabPanel>