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

Update CustomDoc.vue

pull/4683/head
Tuğçe Küçükoğlu 2023-10-24 10:31:03 +03:00
parent 3a0ee41915
commit 43a487c15d
1 changed files with 75 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
doc/scrollpanel/CustomDoc.vue
View File

@ -5,7 +5,15 @@
<div class="card"> <div class="card">
<div class="flex flex-column md:flex-row gap-5"> <div class="flex flex-column md:flex-row gap-5">
<div class="flex-auto"> <div class="flex-auto">
<ScrollPanel style="width: 100%; height: 200px" class="custombar1"> <ScrollPanel
style="width: 100%; height: 200px"
:pt="{
wrapper: {
style: { 'border-right': '10px solid var(--surface-ground)' }
},
bary: 'hover:bg-primary-400 bg-primary-300 opacity-100'
}"
>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 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 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. consequat. 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.
@ -21,7 +29,15 @@
</ScrollPanel> </ScrollPanel>
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<ScrollPanel style="width: 100%; height: 200px" class="custombar2"> <ScrollPanel
style="width: 100%; height: 200px"
:pt="{
wrapper: {
style: 'border-right: 10px solid var(--surface-50); border-bottom: 10px solid var(--surface-50);'
},
bary: 'surface-300 opacity-100 border-noround'
}"
>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 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 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. consequat. 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.
@ -47,15 +63,31 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<ScrollPanel style="width: 100%; height: 200px" class="custombar1"> <ScrollPanel
style="width: 100%; height: 200px"
:pt="{
wrapper: {
style: { 'border-right': '10px solid var(--surface-ground)' }
},
bary: 'hover:bg-primary-400 bg-primary-300 opacity-100'
}"
>
<p> <p>
Lorem ipsum dolor .. Lorem ipsum dolor sit amet...
</p> </p>
</ScrollPanel> </ScrollPanel>
<ScrollPanel style="width: 100%; height: 200px" class="custombar2"> <ScrollPanel
style="width: 100%; height: 200px"
:pt="{
wrapper: {
style: 'border-right: 10px solid var(--surface-50); border-bottom: 10px solid var(--surface-50);'
},
bary: 'surface-300 opacity-100 border-noround'
}"
>
<p> <p>
Lorem ipsum dolor .. Lorem ipsum dolor sit amet...
</p> </p>
</ScrollPanel> </ScrollPanel>
`, `,
@ -64,7 +96,15 @@ export default {
<div class="card"> <div class="card">
<div class="flex flex-column md:flex-row gap-5"> <div class="flex flex-column md:flex-row gap-5">
<div class="flex-auto"> <div class="flex-auto">
<ScrollPanel style="width: 100%; height: 200px" class="custombar1"> <ScrollPanel
style="width: 100%; height: 200px"
:pt="{
wrapper: {
style: { 'border-right': '10px solid var(--surface-ground)' }
},
bary: 'hover:bg-primary-400 bg-primary-300 opacity-100'
}"
>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 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 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. consequat. 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.
@ -80,7 +120,15 @@ export default {
</ScrollPanel> </ScrollPanel>
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<ScrollPanel style="width: 100%; height: 200px" class="custombar2"> <ScrollPanel
style="width: 100%; height: 200px"
:pt="{
wrapper: {
style: 'border-right: 10px solid var(--surface-50); border-bottom: 10px solid var(--surface-50);'
},
bary: 'surface-300 opacity-100 border-noround'
}"
>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 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 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. consequat. 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.
@ -98,44 +146,21 @@ export default {
</div> </div>
</div> </div>
</template> </template>
<script>
<\/script>
<style scoped>
::v-deep(.p-scrollpanel.custombar1 .p-scrollpanel-wrapper) {
border-right: 10px solid var(--surface-ground);
}
::v-deep(.p-scrollpanel.custombar1 .p-scrollpanel-bar) {
background-color: var(--primary-300);
opacity: 1;
transition: background-color 0.3s;
}
::v-deep(.p-scrollpanel.custombar1 .p-scrollpanel-bar:hover) {
background-color: var(--primary-400);
}
::v-deep(.p-scrollpanel.custombar2 .p-scrollpanel-wrapper) {
border-right: 10px solid var(--surface-50);
border-bottom: 10px solid var(--surface-50);
}
::v-deep(.p-scrollpanel.custombar2 .p-scrollpanel-bar) {
background-color: var(--surface-300);
border-radius: 0;
opacity: 1;
transition: background-color 0.3s;
}
</style>
`, `,
composition: ` composition: `
<template> <template>
<div class="card"> <div class="card">
<div class="flex flex-column md:flex-row gap-5"> <div class="flex flex-column md:flex-row gap-5">
<div class="flex-auto"> <div class="flex-auto">
<ScrollPanel style="width: 100%; height: 200px" class="custombar1"> <ScrollPanel
style="width: 100%; height: 200px"
:pt="{
wrapper: {
style: { 'border-right': '10px solid var(--surface-ground)' }
},
bary: 'hover:bg-primary-400 bg-primary-300 opacity-100'
}"
>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 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 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. consequat. 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.
@ -151,7 +176,15 @@ export default {
</ScrollPanel> </ScrollPanel>
</div> </div>
<div class="flex-auto"> <div class="flex-auto">
<ScrollPanel style="width: 100%; height: 200px" class="custombar2"> <ScrollPanel
style="width: 100%; height: 200px"
:pt="{
wrapper: {
style: 'border-right: 10px solid var(--surface-50); border-bottom: 10px solid var(--surface-50);'
},
bary: 'surface-300 opacity-100 border-noround'
}"
>
<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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 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 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. consequat. 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.
@ -169,67 +202,9 @@ export default {
</div> </div>
</div> </div>
</template> </template>
`
<script setup>
<\/script>
<style scoped>
::v-deep(.p-scrollpanel.custombar1 .p-scrollpanel-wrapper) {
border-right: 10px solid var(--surface-ground);
}
::v-deep(.p-scrollpanel.custombar1 .p-scrollpanel-bar) {
background-color: var(--primary-300);
opacity: 1;
transition: background-color 0.3s;
}
::v-deep(.p-scrollpanel.custombar1 .p-scrollpanel-bar:hover) {
background-color: var(--primary-400);
}
::v-deep(.p-scrollpanel.custombar2 .p-scrollpanel-wrapper) {
border-right: 10px solid var(--surface-50);
border-bottom: 10px solid var(--surface-50);
}
::v-deep(.p-scrollpanel.custombar2 .p-scrollpanel-bar) {
background-color: var(--surface-300);
border-radius: 0;
opacity: 1;
transition: background-color 0.3s;
}
</style>`
} }
}; };
} }
}; };
</script> </script>
<style scoped>
::v-deep(.p-scrollpanel.custombar1 .p-scrollpanel-wrapper) {
border-right: 10px solid var(--surface-ground);
}
::v-deep(.p-scrollpanel.custombar1 .p-scrollpanel-bar) {
background-color: var(--primary-300);
opacity: 1;
transition: background-color 0.3s;
}
::v-deep(.p-scrollpanel.custombar1 .p-scrollpanel-bar:hover) {
background-color: var(--primary-400);
}
::v-deep(.p-scrollpanel.custombar2 .p-scrollpanel-wrapper) {
border-right: 10px solid var(--surface-50);
border-bottom: 10px solid var(--surface-50);
}
::v-deep(.p-scrollpanel.custombar2 .p-scrollpanel-bar) {
background-color: var(--surface-300);
border-radius: 0;
opacity: 1;
transition: background-color 0.3s;
}
</style>