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

Update responsive demo

pull/1047/head
Cagatay Civici 2021-02-25 13:04:07 +03:00
parent 7aece338f2
commit 7363be4b27
1 changed files with 3 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/responsive/ResponsiveDemo.vue
View File

@ -288,17 +288,6 @@
<span class="image-text">{{slotProps.data.country.name}}</span> <span class="image-text">{{slotProps.data.country.name}}</span>
</template> </template>
</Column> </Column>
<Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
<template #body="slotProps">
<img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
<span class="image-text p-ml-2">{{slotProps.data.representative.name}}</span>
</template>
</Column>
<Column field="date" header="Date" :sortable="true" filterMatchMode="equals">
<template #body="slotProps">
<span>{{slotProps.data.date}}</span>
</template>
</Column>
<Column field="status" header="Status" :sortable="true" filterMatchMode="equals"> <Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
<template #body="slotProps"> <template #body="slotProps">
<span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span> <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
@ -306,12 +295,7 @@
</Column> </Column>
<Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte"> <Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte">
<template #body="slotProps"> <template #body="slotProps">
<ProgressBar :value="slotProps.data.activity" :showValue="false" /> <ProgressBar :value="slotProps.data.activity" :showValue="false" style="width: 100px"/>
</template>
</Column>
<Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #body>
<Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button>
</template> </template>
</Column> </Column>
</DataTable> </DataTable>
@ -408,7 +392,7 @@
<div class="p-col-12 p-md-3"> <div class="p-col-12 p-md-3">
<div class="card p-fluid"> <div class="card p-fluid">
<h5>Dialog</h5> <h5>Dialog</h5>
<Dialog header="Dialog" v-model:visible="display" :style="{width: '30vw'}" :modal="true"> <Dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true">
<p> <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
@ -816,17 +800,6 @@
&lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt; &lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in"&gt;
&lt;template #body="slotProps"&gt;
&lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
&lt;span class="image-text p-ml-2"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="date" header="Date" :sortable="true" filterMatchMode="equals"&gt;
&lt;template #body="slotProps"&gt;
&lt;span&gt;{{slotProps.data.date}}&lt;/span&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt; &lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
&lt;template #body="slotProps"&gt; &lt;template #body="slotProps"&gt;
&lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt; &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
@ -837,11 +810,6 @@
&lt;ProgressBar :value="slotProps.data.activity" :showValue="false" /&gt; &lt;ProgressBar :value="slotProps.data.activity" :showValue="false" /&gt;
&lt;/template&gt; &lt;/template&gt;
&lt;/Column&gt; &lt;/Column&gt;
&lt;Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
&lt;template #body&gt;
&lt;Button type="button" icon="pi pi-cog" class="p-button-secondary"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;/Column&gt;
&lt;/DataTable&gt; &lt;/DataTable&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
@ -936,7 +904,7 @@
&lt;div class="p-col-12 p-md-3"&gt; &lt;div class="p-col-12 p-md-3"&gt;
&lt;div class="card p-fluid"&gt; &lt;div class="card p-fluid"&gt;
&lt;h5&gt;Dialog&lt;/h5&gt; &lt;h5&gt;Dialog&lt;/h5&gt;
&lt;Dialog header="Dialog" v-model:visible="display" :style="{width: '30vw'}" :modal="true"&gt; &lt;Dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true"&gt;
&lt;p&gt; &lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit