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

Demo cosmetics

pull/345/head
cagataycivici 2020-05-27 15:25:14 +03:00
parent 4f4a5956f1
commit 7d222f7b68
1 changed files with 14 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/datatable/DataTableStyleDemo.vue
View File

@ -12,7 +12,7 @@
<Column field="vin" header="Vin"></Column> <Column field="vin" header="Vin"></Column>
<Column field="year" header="Year" bodyStyle="padding: 0"> <Column field="year" header="Year" bodyStyle="padding: 0">
<template #body="slotProps"> <template #body="slotProps">
<div :class="['year-cell', {'old-car': slotProps.data.year < 2010}]"> <div :class="[{'old-car': slotProps.data.year < 2010}]">
{{slotProps.data.year}} {{slotProps.data.year}}
</div> </div>
</template> </template>
@ -31,7 +31,7 @@
&lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt; &lt;Column field="vin" header="Vin"&gt;&lt;/Column&gt;
&lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt; &lt;Column field="year" header="Year" bodyStyle="padding: 0"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;div :class="['year-cell', {'old-car': slotProps.data.year &lt; 2010}]"&gt; &lt;div :class="[{'old-car': slotProps.data.year &lt; 2010}]"&gt;
&#123;&#123;slotProps.data.year&#125;&#125; &#123;&#123;slotProps.data.year&#125;&#125;
&lt;/div&gt; &lt;/div&gt;
&lt;/template&gt; &lt;/template&gt;
@ -61,25 +61,20 @@ export default {
}, },
methods: { methods: {
rowClass(data) { rowClass(data) {
return data.color === 'Orange' ? 'orange-car': null; return data.color === 'Gray' ? 'gray-car': null;
} }
} }
} }
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
.year-cell { .old-car {
padding: 0.429em 0.857rem; font-weight: 700;
text-decoration: line-through;
&amp;.old-car {
background-color: #41b783;
font-weight: 700;
color: #ffffff;
}
} }
/deep/ .orange-car { /deep/ .gray-car {
background-color: #344b5f !important; background-color: #607D8B !important;
color: #ffffff !important; color: #ffffff !important;
} }
</CodeHighlight> </CodeHighlight>
@ -108,25 +103,20 @@ export default {
}, },
methods: { methods: {
rowClass(data) { rowClass(data) {
return data.color === 'Orange' ? 'orange-car': null; return data.color === 'Gray' ? 'gray-car': null;
} }
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.year-cell { .old-car {
padding: 0.429em 0.857rem; font-weight: 700;
text-decoration: line-through;
&.old-car {
background-color: #41b783;
font-weight: 700;
color: #ffffff;
}
} }
/deep/ .orange-car { /deep/ .gray-car {
background-color: #344b5f !important; background-color: #607D8B !important;
color: #ffffff !important; color: #ffffff !important;
} }
</style> </style>