vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 00:42:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

Button updates

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-03-03 15:15:20 +03:00
parent daa4e9fd77
commit 98f222cb90
47 changed files with 418 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

72
doc/dialog/PositionDoc.vue
View file

@ -4,18 +4,18 @@
</DocSectionText>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" />
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
</div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@ -24,7 +24,7 @@
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" />
<Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template>
</Dialog>
@ -41,18 +41,18 @@ export default {
code: {
basic: `
<div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" />
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
</div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@ -61,7 +61,7 @@ export default {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" />
<Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template>
</Dialog>`,
@ -69,18 +69,18 @@ export default {
<template>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" />
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
</div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@ -89,7 +89,7 @@ export default {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" />
<Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template>
</Dialog>
@ -116,18 +116,18 @@ export default {
<template>
<div class="card">
<div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" />
<Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
<Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
</div>
<div class="flex flex-wrap justify-content-center gap-2 mb-2">
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" />
<Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
<Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
<Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
</div>
<div class="flex flex-wrap justify-content-center gap-2">
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" />
<Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
<Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
<Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
</div>
<Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@ -136,7 +136,7 @@ export default {
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<template #footer>
<Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" />
<Button label="No" icon="pi pi-times" @click="visible = false" text />
<Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
</template>
</Dialog>