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

Updated DataView Demo

pull/104/head
cagataycivici 2019-10-18 10:08:11 +03:00
parent 84a0874481
commit e425f4a7b3
2 changed files with 90 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/views/dataview/DataViewDemo.vue
View File

@ -7,7 +7,7 @@
</div>
</div>
<div class="content-section implementation dataview-demo">
<div class="content-section implementation">
<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
<template #header>
<div class="p-grid p-nogutter">
@ -20,27 +20,20 @@
</div>
</template>
<template #list="slotProps" >
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
<div class="p-grid">
<div class="p-col-12 p-md-3">
<div class="p-col-12">
<div class="car-details">
<div>
<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
</div>
<div class="p-col-12 p-md-8 car-details">
<div class="p-grid">
<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
</div>
</div>
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
<Button icon="pi pi-search"></Button>
</div>
</div>
</div>
</template>
<template #grid="slotProps">
<div style="padding: .5em" class="p-col-12 p-md-3">
@ -108,36 +101,33 @@ export default {
}
</script>
<style lang="scss">
.dataview-demo {
.ui-button {
margin-top: 3em;
}
<style lang="scss" scoped>
.p-dataview {
.car-details {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2em;
border-bottom: 1px solid #d9dad9;
.filter-container {
text-align: center;
}
& > div {
display: flex;
align-items: center;
.car-data > div {
padding: .429em;
img {
margin-right: 14px;
}
.p-dropdown {
width: 12em;
}
}
@media (max-width: 767px) {
.dataview-demo {
.car-details, .search-icon {
text-align: center;
margin-top: 0;
}
.filter-container {
text-align: left;
}
}
}
@media (max-width: 1024px) {
.p-dataview {
.car-details {
img {
width: 75px;
}
}
}
}
</style>

73
src/views/dataview/DataViewDoc.vue
View File

@ -37,24 +37,21 @@ export default {
<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
<CodeHighlight>
<template v-pre>
&lt;template #list="slotProps" &gt;
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;template #list="slotProps"&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="car-details"&gt;
&lt;div&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-data"&gt;
&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
@ -426,28 +423,21 @@ export default {
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #list="slotProps" &gt;
&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12 p-md-3"&gt;
&lt;template #list="slotProps"&gt;
&lt;div class="p-col-12"&gt;
&lt;div class="car-details"&gt;
&lt;div&gt;
&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-8 car-details"&gt;
&lt;div class="p-grid"&gt;
&lt;div class="p-col-12"&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;template #grid="slotProps"&gt;
&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
@ -509,8 +499,33 @@ export default {
</CodeHighlight>
<CodeHighlight lang="css">
.p-dropdown {
width: 12em;
.p-dataview {
.car-details {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2em;
border-bottom: 1px solid #d9dad9;
&amp; > div {
display: flex;
align-items: center;
img {
margin-right: 14px;
}
}
}
}
@media (max-width: 1024px) {
.p-dataview {
.car-details {
img {
width: 75px;
}
}
}
}
</CodeHighlight>
</TabPanel>