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

Update demo content

pull/358/head
cagataycivici 2020-07-01 18:27:18 +03:00
parent b2d9e1f189
commit c67d645c8b
6 changed files with 80 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/dialog/DialogDemo.vue
View File

@ -56,6 +56,19 @@
</template>
</Dialog>
<h5>Confirmation</h5>
<Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
<Dialog header="Confirmation" :visible.sync="displayConfirmation" :style="{width: '350px'}" :modal="true">
<div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
<span>Are you sure you want to proceed?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text"/>
<Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus />
</template>
</Dialog>
<h5>Maximizable</h5>
<Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
<Dialog header="Header" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
@ -111,6 +124,7 @@ export default {
displayBasic: false,
displayBasic2: false,
displayModal: false,
displayConfirmation: false,
displayMaximizable: false,
displayPosition: false,
position: 'center'
@ -135,6 +149,12 @@ export default {
closeModal() {
this.displayModal = false;
},
openConfirmation() {
this.displayConfirmation = true;
},
closeConfirmation() {
this.displayConfirmation = false;
},
openMaximizable() {
this.displayMaximizable = true;
},
@ -157,11 +177,17 @@ export default {
<style scoped lang="scss">
.p-button {
margin: .5em .5em .5em 0;
width: 140px;
margin: 0 .5rem 0 0;
min-width: 10rem;
}
p {
margin: 0;
}
.confirmation-content {
display: flex;
align-items: center;
justify-content: center;
}
</style>

49
src/views/dialog/DialogDoc.vue
View File

@ -290,6 +290,19 @@ export default {
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;h5&gt;Confirmation&lt;/h5&gt;
&lt;Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" /&gt;
&lt;Dialog header="Confirmation" :visible.sync="displayConfirmation" :style="{width: '350px'}" :modal="true"&gt;
&lt;div class="confirmation-content"&gt;
&lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt;
&lt;span&gt;Are you sure you want to proceed?&lt;/span&gt;
&lt;/div&gt;
&lt;template #footer&gt;
&lt;Button label="No" icon="pi pi-times" @click="closeConfirmation" class="p-button-text"/&gt;
&lt;Button label="Yes" icon="pi pi-check" @click="closeConfirmation" class="p-button-text" autofocus /&gt;
&lt;/template&gt;
&lt;/Dialog&gt;
&lt;h5&gt;Maximizable&lt;/h5&gt;
&lt;Button label="Show" icon="pi pi-external-link" @click="openMaximizable" /&gt;
&lt;Dialog header="Header" :visible.sync="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true"&gt;
@ -339,6 +352,7 @@ export default {
displayBasic: false,
displayBasic2: false,
displayModal: false,
displayConfirmation: false,
displayMaximizable: false,
displayPosition: false,
position: 'center'
@ -363,6 +377,12 @@ export default {
closeModal() {
this.displayModal = false;
},
openConfirmation() {
this.displayConfirmation = true;
},
closeConfirmation() {
this.displayConfirmation = false;
},
openMaximizable() {
this.displayMaximizable = true;
},
@ -376,31 +396,24 @@ export default {
closePosition() {
this.displayPosition = false;
}
},
components: {
'DialogDoc': DialogDoc
}
}
</CodeHighlight>
<CodeHighlight lang="css">
//CSS
body .p-button-dark {
background-color: #455b70;
border-color: #455b70;
.p-button {
margin: 0 .5rem 0 0;
min-width: 10rem;
}
body .p-button-dark:enabled:hover {
background-color: #364758;
p {
margin: 0;
}
body .p-button-dark:enabled:focus {
box-shadow: 0 0 0 0.2em #95a9bd;
}
body .{
margin: .5em .5em .5em 0;
width: 140px;
}
body .p-dialog .p-dialog-content {
line-height: 1.5;
.confirmation-content {
display: flex;
align-items: center;
justify-content: center;
}
</CodeHighlight>
</TabPanel>

2
src/views/inputswitch/InputSwitchDemo.vue
View File

@ -11,11 +11,9 @@
<div class="card">
<h5>Basic</h5>
<InputSwitch v-model="checked1" />
<p style="font-weight: bold">{{checked1}}</p>
<h5>Preselection</h5>
<InputSwitch v-model="checked2" />
<p style="font-weight: bold">{{checked2}}</p>
</div>
</div>

2
src/views/inputswitch/InputSwitchDoc.vue
View File

@ -161,11 +161,9 @@ export default {
<template v-pre>
&lt;h3&gt;Basic&lt;/h3&gt;
&lt;InputSwitch v-model="checked1" /&gt;
&lt;p style="font-weight: bold"&gt;{{checked1}}&lt;/p&gt;
&lt;h3&gt;Preselection&lt;/h3&gt;
&lt;InputSwitch v-model="checked2" /&gt;
&lt;p style="font-weight: bold"&gt;{{checked2}}&lt;/p&gt;
</template>
</CodeHighlight>

36
src/views/sidebar/SidebarDemo.vue
View File

@ -9,40 +9,30 @@
<div class="content-section implementation">
<div class="card">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" />
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2" />
<Button icon="pi pi-th-large" @click="visibleFull = true" />
<Sidebar :visible.sync="visibleLeft" :baseZIndex="1000">
<h1 style="fontWeight:normal">Left Sidebar</h1>
<Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" />
<Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/>
<h3>Left Sidebar</h3>
</Sidebar>
<Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right">
<h1 style="fontWeight:normal">Right Sidebar</h1>
<Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" />
<Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/>
<h3>Right Sidebar</h3>
</Sidebar>
<Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top">
<h1 style="fontWeight:normal">Top Sidebar</h1>
<Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" />
<Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/>
<h3>Top Sidebar</h3>
</Sidebar>
<Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom">
<h1 style="fontWeight:normal">Bottom Sidebar</h1>
<Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" />
<Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/>
<h3>Bottom Sidebar</h3>
</Sidebar>
<Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full">
<h1 style="fontWeight:normal">Full Screen</h1>
<Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" />
<Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/>
<h3>Full Screen</h3>
</Sidebar>
</div>
</div>
@ -68,10 +58,4 @@ export default {
'SidebarDoc': SidebarDoc
}
}
</script>
<style lang="scss" scoped>
h1 {
margin-top: 0;
}
</style>
</script>

32
src/views/sidebar/SidebarDoc.vue
View File

@ -204,41 +204,31 @@ import Sidebar from 'primevue/sidebar';
</a>
<CodeHighlight>
<template v-pre>
&lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-th-large" @click="visibleFull = true" /&gt;
&lt;Sidebar :visible.sync="visibleLeft" :baseZIndex="1000"&gt;
&lt;h1 style="fontWeight:normal"&gt;Left Sidebar&lt;/h1&gt;
&lt;Button type="button" @click="visibleLeft = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleLeft = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;h3&gt;Left Sidebar&lt;/h3&gt;
&lt;/Sidebar&gt;
&lt;Sidebar :visible.sync="visibleRight" :baseZIndex="1000" position="right"&gt;
&lt;h1 style="fontWeight:normal"&gt;Right Sidebar&lt;/h1&gt;
&lt;Button type="button" @click="visibleRight = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleRight = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;h3&gt;Right Sidebar&lt;/h3&gt;
&lt;/Sidebar&gt;
&lt;Sidebar :visible.sync="visibleTop" :baseZIndex="1000" position="top"&gt;
&lt;h1 style="fontWeight:normal"&gt;Top Sidebar&lt;/h1&gt;
&lt;Button type="button" @click="visibleTop = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleTop = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;h3&gt;Top Sidebar&lt;/h3&gt;
&lt;/Sidebar&gt;
&lt;Sidebar :visible.sync="visibleBottom" :baseZIndex="1000" position="bottom"&gt;
&lt;h1 style="fontWeight:normal"&gt;Bottom Sidebar&lt;/h1&gt;
&lt;Button type="button" @click="visibleBottom = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleBottom = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;h3&gt;Bottom Sidebar&lt;/h3&gt;
&lt;/Sidebar&gt;
&lt;Sidebar :visible.sync="visibleFull" :baseZIndex="1000" position="full"&gt;
&lt;h1 style="fontWeight:normal"&gt;Full Screen&lt;/h1&gt;
&lt;Button type="button" @click="visibleFull = false" label="Save" class="p-button-success" style="margin-right:.25em" /&gt;
&lt;Button type="button" @click="visibleFull = false" label="Cancel" class="p-button-secondary"/&gt;
&lt;h3&gt;Full Screen&lt;/h3&gt;
&lt;/Sidebar&gt;
&lt;Button icon="pi pi-arrow-right" @click="visibleLeft = true" style="margin-right:.25em" /&gt;
&lt;Button icon="pi pi-arrow-left" @click="visibleRight = true" style="margin-right:.25em" /&gt;
&lt;Button icon="pi pi-arrow-down" @click="visibleTop = true" style="margin-right:.25em" /&gt;
&lt;Button icon="pi pi-arrow-up" @click="visibleBottom = true" style="margin-right:.25em" /&gt;
&lt;Button icon="pi pi-th-large" @click="visibleFull = true" /&gt;
</template>
</CodeHighlight>