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

Drawer pt viewer demo added

pull/6449/head
tugcekucukoglu 2024-09-20 15:48:52 +03:00
parent 7215df3ba8
commit e3b0999f56
4 changed files with 61 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/showcase/doc/drawer/pt/PTImage.vue
View File

@ -1,8 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>{{ $attrs.description }}</p>
</DocSectionText>
<div class="card">
<img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/sidebar.jpg" />
</div>
</template>

56
apps/showcase/doc/drawer/pt/PTViewer.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<DocPTViewer :docs="docs" class="!justify-start">
<div class="">
<div class="p-drawer p-component h-[450px] w-80" role="complementary" aria-modal="true" data-pc-name="drawer" data-pc-section="root">
<span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="firstfocusableelement"></span>
<div class="p-drawer-header" data-pc-section="header">
<div class="p-drawer-title" data-pc-section="title">Drawer</div>
<button
class="p-button p-component p-button-icon-only p-button-secondary p-button-rounded p-button-text p-drawer-close-button"
type="button"
aria-label="Close"
data-pc-name="pcclosebutton"
data-p-disabled="false"
data-p-severity="secondary"
data-pc-group-section="iconcontainer"
data-pc-extend="button"
data-pc-section="root"
>
<TimesIcon class="p-button-icon" />
</button>
</div>
<div class="p-drawer-content" data-pc-section="content">
<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
consequat.
</p>
</div>
<div class="p-drawer-footer" data-pc-section="footer">Footer</div>
<span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="lastfocusableelement"></span>
</div>
</div>
</DocPTViewer>
</template>
<script>
import { getPTOptions } from '@/components/doc/helpers';
import TimesIcon from '@primevue/icons/times';
import { markRaw } from 'vue';
export default {
data() {
return {
visible: true,
docs: [
{
data: getPTOptions('Drawer'),
key: 'Drawer'
}
]
};
},
components: {
TimesIcon: markRaw(TimesIcon)
}
};
</script>

8
apps/showcase/doc/drawer/pt/index.vue
View File

@ -11,16 +11,16 @@
<script>
import DocApiTable from '@/components/doc/DocApiTable.vue';
import { getPTOptions } from '@/components/doc/helpers';
import PTImage from './PTImage.vue';
import PTViewer from './PTViewer.vue';
export default {
data() {
return {
docs: [
{
id: 'pt.image',
label: 'Wireframe',
component: PTImage
id: 'pt.viewer',
label: 'Viewer',
component: PTViewer
},
{
id: 'pt.doc.drawer',

2
apps/showcase/doc/toast/pt/PTViewer.vue
View File

@ -1,6 +1,6 @@
<template>
<DocPTViewer :docs="docs">
<div class="p-toast p-component" data-pc-name="toast">
<div class="p-toast p-component" data-pc-name="toast" data-pc-section="root">
<div>
<div class="p-toast-message p-toast-message-info" data-pc-section="message">
<div class="p-toast-message-content" data-pc-section="messagecontent">